7 ms·

I noticed the images looked a little blurred to me for pixel art. Digging further into it, they're oversized high resolution JPEG images scaled down by the brow

by cube00 4y ago

I noticed the images looked a little blurred to me for pixel art. Digging further into it, they're oversized high resolution JPEG images scaled down by the browser rather then correctly sized PNGs. Putting quality aside and thinking about the poor internet pipes; each image is around 100kb in size and had it been a two bit black and white PNG would have been around 12kb. I know, I know, it's a probably an off the shelf CMS system but still, it's Apple, if anyone can afford to care about the little things like this shouldn't it be them?

saberience 4y ago
They looked perfect to me, using an Macbook Air M1 and Chrome.
- emkoemko 4y ago
  how do you not see the grey gradient they adding next to each black pixel? making it seem blurry... unless i am missing something
  - vbezhenar 4y ago
    I can clearly see JPEG artifacts on iPhone.
- zffr 4y ago
  Take a screenshot and zoom in. If perfectly pixel aligned the edges should be sharp even when zoomed in on a screen shot. In the screenshot you will see slightly blurry edges.
toxik 4y ago
They look great here. Safari on iOS.
throw457 4y ago
- emkoemko 4y ago
  https://devimages-cdn.apple.com/wwdc-services/articles/images/6DFA3373-0152-4A78-8773-C5117073260A/2048.jpeg https://devimages-cdn.apple.com/wwdc-services/articles/image... your saying there is no anti aliasing ? this looks really blurry, like you said open it up check with a color picker and you will see the gradients....
  - throw457 4y ago
  - pdpi 4y ago
    There's something odd going on with that picture, though, because it has faint grid lines for the pixels. It's hard to tell what's anti-aliasing blurring, and what's a grid line.
    - throw457 4y ago
    - ectopod 4y ago
      If you open it in GIMP, say, and zoom in the grid lines are clearly part of the image. It's a mess.
  - prashnts 4y ago
    I see gridlines on my iPhone, but only if I zoom in a lot. I'm guessing this is a case of "designed and exported on Retina display, for Retina display". Because yeah, in true 1-bit image there won't be a grey gridline.
0xCAP 4y ago
If only Safari shipped AVIF support...
jansan 4y ago
Yes, using a lossy image format for pixel art or images with a small number of colors in general has always been a a bad idea. Many people do not see the artefacts, but they are there, and the fact that the file size is even bigger with lower quality does not make it better. BTW, the images also contain a grid, so you would need at least three colors, which requires 2 bit per pixel before compression.
arendtio 4y ago
Didn't notice it until I read your comment... Revenge: https://xkcd.com/1015/ https://xkcd.com/1015/ Btw. what display/resolution are you using?
greggman3 4y ago
There is actually no perfect solution For one, browser's can't agree on what CSS solution to pick. Chrome and Safari have `image-rendering: pixelated` whereas Firefox has `image-rendering: crisp-edges`. The spec used to say pixelated meant "keep it looking pixelated" and that "crisp-edges" meant to keep the edges crisp and so allowed various algorithms. The spec was changed in early 2021 so that crisp-edges means "nearest-neighbor" and "pixelated" still means "keep it looking like pixels" which implies nearest-neighbor + extra. It gets worse though. What is the web developer's intent? Example: I put <img src="128x128.png" style="width: 256px; height: 256px; image-rendering: pixelated"> Seems straight forward right? I want my 128x128 pixel image displayed double size (256x256) where each original pixel is 2x2 pixels on the user's machine. But, that's not how browsers work. My Windows Desktop has a devicePixelRatio of 1.25 so asking for a 256px by 256px CSS pixel image gives 317x317 device pixels. That means this 128x128 pixel image, scaled to 317x317 with nearest neighbor filtering is going to look really really bad as some pixels get 2x2 and others get 1x1 scaling. This is why `pixelated` = "nearest neighbor" may not actually be what the web designer wants. Where as, if you manually scale the 128x128 image to say 512x512 using nearest neighbor and then let the browser scale it to 256x256 * devicePixelRatio using the default bilinear filtering it will likely look better. Note: You can get these non-integer devicePixelRatio values on Chrome or Firefox just by zooming in the browsers (Cmd/Ctrl +/-). On Windows you can also go into the display settings and choose an OS level devicePixelRatio so that OS handled UI widgets and well written apps will adjust how they draw. See example: https://jsgist.org/?src=c65dfc4e2ed2e547a2d5aad69360be6d https://jsgist.org/?src=c65dfc4e2ed2e547a2d5aad69360be6d Zoom in and out and, at least on my machines the right (pre-scaled externally and then scaled down) looks better than the left (original resolution with image-renedering: pixelated
- kixiQu 4y ago
  I'm not sure why you're saying there's "no true" definition: there is a spec difference between pixelated and crisp-edges: https://stackoverflow.com/a/25278886 https://stackoverflow.com/a/25278886
  - greggman3 4y ago
    I'm saying it because I've actually read the spec. The spec https://drafts.csswg.org/css-images/#the-image-rendering https://drafts.csswg.org/css-images/#the-image-rendering says > pixelated: > The image is scaled in a way that preserves the pixelated nature of the original as much as possible, but allows minor smoothing instead of awkward distortion when necessary. The spec does not say "use nearest neighbor". In fact in specifically allows not using nearest neighbor (end of first sentence). And further, it doesn't specify the algorithm used. So there is no true definition of what you'll get. There is only a general definition of the intent.
joshspankit 4y ago
This is a nonsense suggestion, but what if they used SVG to build and populate the pixel grids?
hulitu 4y ago
> Digging further into it, they're oversized high resolution JPEG images scaled down by the browser rather then correctly sized PNGs Pixel perfect meets JPG. What can go wrong ? /s There is a unhealty love between JPG and the world of photography. I have an 8 Mpx phone but it chooses to use JPG with medium compression. Good bye quality. My camera also uses JPG but fortunately the compression ratio is not so big.

by cube00 4y ago

saberience 4y ago

They looked perfect to me, using an Macbook Air M1 and Chrome.

emkoemko 4y ago
how do you not see the grey gradient they adding next to each black pixel? making it seem blurry... unless i am missing something
- vbezhenar 4y ago
  I can clearly see JPEG artifacts on iPhone.
zffr 4y ago
Take a screenshot and zoom in. If perfectly pixel aligned the edges should be sharp even when zoomed in on a screen shot. In the screenshot you will see slightly blurry edges.

toxik 4y ago

They look great here. Safari on iOS.

throw457 4y ago

emkoemko 4y ago
https://devimages-cdn.apple.com/wwdc-services/articles/images/6DFA3373-0152-4A78-8773-C5117073260A/2048.jpeg https://devimages-cdn.apple.com/wwdc-services/articles/image... your saying there is no anti aliasing ? this looks really blurry, like you said open it up check with a color picker and you will see the gradients....
- throw457 4y ago
- pdpi 4y ago
  There's something odd going on with that picture, though, because it has faint grid lines for the pixels. It's hard to tell what's anti-aliasing blurring, and what's a grid line.
  - throw457 4y ago
  - ectopod 4y ago
    If you open it in GIMP, say, and zoom in the grid lines are clearly part of the image. It's a mess.
- prashnts 4y ago
  I see gridlines on my iPhone, but only if I zoom in a lot. I'm guessing this is a case of "designed and exported on Retina display, for Retina display". Because yeah, in true 1-bit image there won't be a grey gridline.

0xCAP 4y ago

If only Safari shipped AVIF support...

jansan 4y ago

Yes, using a lossy image format for pixel art or images with a small number of colors in general has always been a a bad idea. Many people do not see the artefacts, but they are there, and the fact that the file size is even bigger with lower quality does not make it better. BTW, the images also contain a grid, so you would need at least three colors, which requires 2 bit per pixel before compression.

arendtio 4y ago

Didn't notice it until I read your comment... Revenge: https://xkcd.com/1015/ https://xkcd.com/1015/ Btw. what display/resolution are you using?

greggman3 4y ago

There is actually no perfect solution For one, browser's can't agree on what CSS solution to pick. Chrome and Safari have `image-rendering: pixelated` whereas Firefox has `image-rendering: crisp-edges`. The spec used to say pixelated meant "keep it looking pixelated" and that "crisp-edges" meant to keep the edges crisp and so allowed various algorithms. The spec was changed in early 2021 so that crisp-edges means "nearest-neighbor" and "pixelated" still means "keep it looking like pixels" which implies nearest-neighbor + extra. It gets worse though. What is the web developer's intent? Example: I put <img src="128x128.png" style="width: 256px; height: 256px; image-rendering: pixelated"> Seems straight forward right? I want my 128x128 pixel image displayed double size (256x256) where each original pixel is 2x2 pixels on the user's machine. But, that's not how browsers work. My Windows Desktop has a devicePixelRatio of 1.25 so asking for a 256px by 256px CSS pixel image gives 317x317 device pixels. That means this 128x128 pixel image, scaled to 317x317 with nearest neighbor filtering is going to look really really bad as some pixels get 2x2 and others get 1x1 scaling. This is why `pixelated` = "nearest neighbor" may not actually be what the web designer wants. Where as, if you manually scale the 128x128 image to say 512x512 using nearest neighbor and then let the browser scale it to 256x256 * devicePixelRatio using the default bilinear filtering it will likely look better. Note: You can get these non-integer devicePixelRatio values on Chrome or Firefox just by zooming in the browsers (Cmd/Ctrl +/-). On Windows you can also go into the display settings and choose an OS level devicePixelRatio so that OS handled UI widgets and well written apps will adjust how they draw. See example: https://jsgist.org/?src=c65dfc4e2ed2e547a2d5aad69360be6d https://jsgist.org/?src=c65dfc4e2ed2e547a2d5aad69360be6d Zoom in and out and, at least on my machines the right (pre-scaled externally and then scaled down) looks better than the left (original resolution with image-renedering: pixelated

kixiQu 4y ago
I'm not sure why you're saying there's "no true" definition: there is a spec difference between pixelated and crisp-edges: https://stackoverflow.com/a/25278886 https://stackoverflow.com/a/25278886
- greggman3 4y ago
  I'm saying it because I've actually read the spec. The spec https://drafts.csswg.org/css-images/#the-image-rendering https://drafts.csswg.org/css-images/#the-image-rendering says > pixelated: > The image is scaled in a way that preserves the pixelated nature of the original as much as possible, but allows minor smoothing instead of awkward distortion when necessary. The spec does not say "use nearest neighbor". In fact in specifically allows not using nearest neighbor (end of first sentence). And further, it doesn't specify the algorithm used. So there is no true definition of what you'll get. There is only a general definition of the intent.

joshspankit 4y ago

This is a nonsense suggestion, but what if they used SVG to build and populate the pixel grids?

hulitu 4y ago

> Digging further into it, they're oversized high resolution JPEG images scaled down by the browser rather then correctly sized PNGs Pixel perfect meets JPG. What can go wrong ? /s There is a unhealty love between JPG and the world of photography. I have an 8 Mpx phone but it chooses to use JPG with medium compression. Good bye quality. My camera also uses JPG but fortunately the compression ratio is not so big.