15 ms·

Retina Revolution - smaller images with better quality

134 points by aggarwalachal 14y ago

andybak 14y ago
I've always been vaguely aware that JPEG gives better results at a constant quality setting as increase the size of the image. Firstly - the 8x8 blocks become smaller relative to the image but in addition to this I think that the it's just in the nature of compression algorithms in general and lossy compression in particular to produce better results when there's more source material to work with. However I didn't expect it to improve enough to enable one to but the Gordian knot that Retina displays have forced upon us by using 2x resolution images across the board. I would imagine that not all source images respond quite as well as others. Also - using 2x images for all devices will surely create a quadrupling of RAM requirements which might cause performance issues.
- Retric 14y ago
  Honestly, I did not notice any JPEG artifacts on any of those images, so I don't think it's that obvious yet.
Osmium 14y ago
This is incredible. I can't believe it's taken this long for someone to realise this (at least, it doesn't seem like common knowledge to me). Just commenting for the benefit of anyone without a retina display -- the differences really are stunning. It's like night and day, and to do that while still reducing file sizes seems crazy. So, this raises the question: should this become standard practice from now on. If not, why not? Poor headline though.
- meritt 14y ago
  Curious if we apply it further whether or not it works. At which point does the pattern break-down? 4x and Q20? 8x and Q10? etc
  - Raphael 14y ago
    Well I imagine that there would be no advantage to upscaling the original photograph, as you'd not be gaining any detail. But otherwise, I'd be curious to see what happens.
- mddw 14y ago
  It should not. An outdated computer/browsers sucks at resizing jpegs. A two year old high end Android smartphone too. Minimizing HTTP requests, avoiding FOUC, using only one version of JQuery (or, even better, none), using CSS sprites... there are countless optimisations which are more important and seldom used. Retina is a buzzword and a buzzword resolution. If you target the 0.1% rich hipsters, yeah, it's important. If you've real users browsing in 1024x768 on a four year old laptop and a 2Mbps broadband, it's not. When Amazon'll use Retina img, that's when it'll be a standard practice.
  - barrkel 14y ago
    The cost of doing it always is primarily in extra memory used on the client, while the quality loss from poor client downsizers should not be too bad, particularly if you target 2x resolution. IME the best bandwidth optimization is an adblocker :)
  - Osmium 14y ago
    Which is a fair point, but it depends who you're targeting: if affluent users are more likely to have high-DPI devices (iPad 3, most smartphones, high-end MacBooks), and they are, then you're going to have to make your site 'retina-ready.' And it's a mistake to thing this is just a young, tech-savvy issue. How many older people are buying iPads? Do you think they'll notice, subconsciously or not, if your site looks a bit crappy? I have a hard time believing it would be a significant issue to do a 2x image resize, especially if you provide exact image dimensions in your img tag to start with to avoid the renderer having to wait until the image has downloaded to layout the page properly. In any case, I think someone should do some benchmarks to see what kind of an issue it is in practice. Either way, it's not a bad thing to be forward thinking with design. The amount of 'retina' devices in the world is growing exponentially. At the moment, it's largely an Apple problem, but with high DPI panels now on the market it'll soon be industry-wide.
    - mddw 14y ago
      Show me some A/B testing showing a conversion increase when Retina proofing your website. Old people with an iPad3 won't see the difference between a non retina and a retina website. They'll see which is the fastest and the easiest to use (because usually, pixel perfect guys are not too smart about UI.) Retina-ready is a scam. We have neither the tools (SVG support too weak, no <picture> element, no good navigator.connection...) to provide a meaningful retina experience while respecting other users. Speed trumps "beauty". Most often.
sambeau 14y ago
This is fascinating as I discovered exactly the same thing this week (sadly after applying loads of javascript to swap retina images). I found that a 30 jpeg at retina size generally looks better than a scaled 80 and is smaller. Plus you can zoom in on any Mac, not just an iPad (something I do all the time).
ck2 14y ago
This test was done COMPLETELY WRONG. Look at the details on the jpeg settings from the image itself. Subsampling is turned off for some and on for others, which gives the target size far fewer bytes to work with. This is a common problem with photoshop users, they use the highest settings which turns off subsampling but then reduce the filesize allotment which gives it less room to work with. You get better results if you have a target filesize by turning off subsampling first, which photoshop does not do by default until you drop the quality target very low. This entire test has to be redone. Use SUBSAMPLING OFF and PROGRESSIVE ON for all (jpeg) images for the web. (and do not use default photoshop settings ever for web images) ps. every time you save a file or image in adobe products it embeds a hidden fingerprint (beyond exif) that identifies your specific install - so not only does it add extra file size, every image you post can be traced on the web - use jpegtran or jpegoptim to strip it
- lbotos 14y ago
  I assume you've learned this from somewhere in the bowels of the photoshop documentation or years of domain knowledge? I ask because as a photoshop user of 5 years I've always wanted to learn a LOT more about the nitty gritty details (I am on hackernews :P) of what I was exporting but I didn't find a solid end-all be-all resource. Any ideas where I can find one?
  - ck2 14y ago
    I rarely use photoshop myself - I learned it from having to support photoshop users and solve why the images they upload to the CMS system were so massive, ie. 400k for a 600x600 photo What we did for the non-tech people was simply tell them to always use setting #6 on photoshop and use the progressive setting. Two steps seemed the most they could handle. http://i.imgur.com/vct3D.png http://i.imgur.com/vct3D.png (best one-shot photoshop settings for web jpegs) I had to go into photoshop and save the same image repeatedly under all the different settings and then examine the resulting jpeg under different tools to see exactly what it was doing. It also doesn't help that photoshop bloats jpegs by adding hidden adobe meta to every jpeg (beyond and different from exif). Here is a technical analysis someone did on the photoshop settings: http://www.impulseadventure.com/photo/jpeg-quantization.html#photoshop http://www.impulseadventure.com/photo/jpeg-quantization.html...
gintas 14y ago
FWIW, in case you don't have a retina display, zooming in your browser works just as well to make the difference in quality visible.
7952 14y ago
Surely this works because the compression algorithm can find more predictability in an image before its resolution is reduced. You see this affect a lot when you are trying to get very high compression levels. However, it is difficult to prove exactly what is the best settings without actively trying different configurations.
esolyt 14y ago
"other companies have already started or will also start implementing this new Retina technology." That is simply impossible for two reasons: 1) Retina display is a trademarked Apple phrase and no other company will ever have retina displays. 2) Retina is not a technology. I think the word technology is being overused these days. The author was simply talking about high-PPI displays when he said "this new Retina technology", which other companies have already "implemented" in their smartphone displays. Unless one is talking only about Apple products (which is not the case here) the term retina display should not be used.
- deleted 14y ago
  [deleted]
- radley 14y ago
  For most people, Retina is synonymous with High-PPI, like Kleenex for tissue or Coke for cola. Retina is easier to say & understand. High-PPI is lost in a sea of resolution jargon.
  - Groxx 14y ago
    Not that "High-PPI" is all that useful of a term either, any more than "Ultra High Frequency" or "Very High Frequency" or "Super High Frequency".
    - hayksaakian 14y ago
      High PPI is the literal description of the phenomena referred to by the OP. Its not a buzzword or a trademark, its a technical specification.
      - Groxx 14y ago
        326 PPI is a technical specification. "High PPI" is a buzzword used to sell things - our current use of it will be invalid in a few years. edit: deleted first sentence, was more off-topic than useful.
ErikHuisman 14y ago
Funny thing is. This company is called netvlies which is literally retina in dutch. They don't seem to mention it themselves..
- hayksaakian 14y ago
  It seems like the article is a translation, the irony might be something the original author may not have realized
dtorres 14y ago
Why not just figure out the pixelRatio once and then serve images according to that? See this gist: https://gist.github.com/3848834 https://gist.github.com/3848834
- beagle3 14y ago
  This isn't really good practice, unless you revise your cookie on every page load to make sure it is still correct; e.g. restoring an ipad2 backup to an ipad3 will leave you with the wrong images for the next 10 years. And an OLPC-style device might have different ratios if you're browsing using the e-ink display rather than the lcd.
darkstalker 14y ago
Good observation, but too bad that no one will ever see your high DPI images because the "retina revolution" isn't a thing. Most people won't ever notice the difference.
- Johngibb 14y ago
  Yea that pesky tablet revolution wasn't a thing either, and neither was the GUI actually. I'm still using lynx. (No offense to lynx users.) Snark aside, it seems like high dpi will inevitably become standard in the next few years.
notlisted 14y ago
Suspect that in-browser sharpening of resized images (CSS or HTML) can make up for some of the detail lost in the lower JPG quality. In the 60-90 range, differences are always minimal, especially when applied to images lacking detail 'coverage' to begin with (like the test set on the site). Bottom line: I to think that the blogger is onto something. Even if the "less than original size" thing doesn't always pan out due to inefficiencies in his compression process, it makes sense that in-browser sharpening would allow reduced file sizes for images displayed at lower than native resolution. PS Significant savings in JPEG size with barely any perceptible loss of detail can be achieved by anyone with JPEGMini (which, unlike JPEG2000 is 100% compatible with all browsers these days).
dmmalam 14y ago
Maybe it's time for wider support for more advanced image compression formats (JPEG200, WebP, JPEGXR).
rorrr 14y ago
This is so wrong. 1) He didn't sharpen the small images. 2) He only displayed one type of image - very bright with no shadow detail. This theory breaks completely if you actually compare apples to apples. Like these two, both 80KB generated from a high quality image: http://i.imgur.com/E3gaB.jpg http://i.imgur.com/E3gaB.jpg http://i.imgur.com/UrDEx.jpg http://i.imgur.com/UrDEx.jpg
- barrkel 14y ago
  Why would he sharpen the small images? The browser won't.
  - rorrr 14y ago
    Because then they will look sharper. You have to sharpen when you downsample images. Web design 101.
    - 001sky 14y ago
      Yes, every size photo should have size-specific sharpening. Large or Small. Doesn't matter, if you are expecting people to look at it ~seriously.
    - andybak 14y ago
      Or you use an interpolation algorithm optimized for down-sizing.
jamesmoss 14y ago
Could this technique also work for video?
mgcross 14y ago
While I can appreciate the technique, I haven't adopted the use of @2x images for photos. Most photos tend to hold up pretty well when scaled (soft edges and relatively low contrast). If you're serving up a portfolio, sure, but I find more value in maintaining and serving @2x (based on media queries for MDPR > 1.3) for UI elements or logos not easily reproduced in CSS/SVG.
ixobelle 14y ago
Jesus, white people are ugly.
zajac 14y ago
Smart. It now sems like it should have been obvious all along. You want to reduce the size of an image file from X kB down to y kB. Which method will give better-looking results? 1. Dumb, across-the-board by-two resolution reduction? 2. Smart, perceptually-tuned jpeg compression? We probably should have been using this all along. That we can also benefit from the extra resolution thanks to touch interfaces and high-dpi displays is icing.
Silev 14y ago
I did my own test: http://silev.org/test/Retina-resize.html http://silev.org/test/Retina-resize.html

134 points by aggarwalachal 14y ago

I've always been vaguely aware that JPEG gives better results at a constant quality setting as increase the size of the image. Firstly - the 8x8 blocks become smaller relative to the image but in addition to this I think that the it's just in the nature of compression algorithms in general and lossy compression in particular to produce better results when there's more source material to work with. However I didn't expect it to improve enough to enable one to but the Gordian knot that Retina displays have forced upon us by using 2x resolution images across the board. I would imagine that not all source images respond quite as well as others. Also - using 2x images for all devices will surely create a quadrupling of RAM requirements which might cause performance issues.

Retric 14y ago
Honestly, I did not notice any JPEG artifacts on any of those images, so I don't think it's that obvious yet.

Osmium 14y ago

This is incredible. I can't believe it's taken this long for someone to realise this (at least, it doesn't seem like common knowledge to me). Just commenting for the benefit of anyone without a retina display -- the differences really are stunning. It's like night and day, and to do that while still reducing file sizes seems crazy. So, this raises the question: should this become standard practice from now on. If not, why not? Poor headline though.

meritt 14y ago
Curious if we apply it further whether or not it works. At which point does the pattern break-down? 4x and Q20? 8x and Q10? etc
- Raphael 14y ago
  Well I imagine that there would be no advantage to upscaling the original photograph, as you'd not be gaining any detail. But otherwise, I'd be curious to see what happens.
mddw 14y ago
It should not. An outdated computer/browsers sucks at resizing jpegs. A two year old high end Android smartphone too. Minimizing HTTP requests, avoiding FOUC, using only one version of JQuery (or, even better, none), using CSS sprites... there are countless optimisations which are more important and seldom used. Retina is a buzzword and a buzzword resolution. If you target the 0.1% rich hipsters, yeah, it's important. If you've real users browsing in 1024x768 on a four year old laptop and a 2Mbps broadband, it's not. When Amazon'll use Retina img, that's when it'll be a standard practice.
- barrkel 14y ago
  The cost of doing it always is primarily in extra memory used on the client, while the quality loss from poor client downsizers should not be too bad, particularly if you target 2x resolution. IME the best bandwidth optimization is an adblocker :)
- Osmium 14y ago
  Which is a fair point, but it depends who you're targeting: if affluent users are more likely to have high-DPI devices (iPad 3, most smartphones, high-end MacBooks), and they are, then you're going to have to make your site 'retina-ready.' And it's a mistake to thing this is just a young, tech-savvy issue. How many older people are buying iPads? Do you think they'll notice, subconsciously or not, if your site looks a bit crappy? I have a hard time believing it would be a significant issue to do a 2x image resize, especially if you provide exact image dimensions in your img tag to start with to avoid the renderer having to wait until the image has downloaded to layout the page properly. In any case, I think someone should do some benchmarks to see what kind of an issue it is in practice. Either way, it's not a bad thing to be forward thinking with design. The amount of 'retina' devices in the world is growing exponentially. At the moment, it's largely an Apple problem, but with high DPI panels now on the market it'll soon be industry-wide.
  - mddw 14y ago
    Show me some A/B testing showing a conversion increase when Retina proofing your website. Old people with an iPad3 won't see the difference between a non retina and a retina website. They'll see which is the fastest and the easiest to use (because usually, pixel perfect guys are not too smart about UI.) Retina-ready is a scam. We have neither the tools (SVG support too weak, no <picture> element, no good navigator.connection...) to provide a meaningful retina experience while respecting other users. Speed trumps "beauty". Most often.

sambeau 14y ago

This is fascinating as I discovered exactly the same thing this week (sadly after applying loads of javascript to swap retina images). I found that a 30 jpeg at retina size generally looks better than a scaled 80 and is smaller. Plus you can zoom in on any Mac, not just an iPad (something I do all the time).

ck2 14y ago

This test was done COMPLETELY WRONG. Look at the details on the jpeg settings from the image itself. Subsampling is turned off for some and on for others, which gives the target size far fewer bytes to work with. This is a common problem with photoshop users, they use the highest settings which turns off subsampling but then reduce the filesize allotment which gives it less room to work with. You get better results if you have a target filesize by turning off subsampling first, which photoshop does not do by default until you drop the quality target very low. This entire test has to be redone. Use SUBSAMPLING OFF and PROGRESSIVE ON for all (jpeg) images for the web. (and do not use default photoshop settings ever for web images) ps. every time you save a file or image in adobe products it embeds a hidden fingerprint (beyond exif) that identifies your specific install - so not only does it add extra file size, every image you post can be traced on the web - use jpegtran or jpegoptim to strip it

lbotos 14y ago
I assume you've learned this from somewhere in the bowels of the photoshop documentation or years of domain knowledge? I ask because as a photoshop user of 5 years I've always wanted to learn a LOT more about the nitty gritty details (I am on hackernews :P) of what I was exporting but I didn't find a solid end-all be-all resource. Any ideas where I can find one?
- ck2 14y ago
  I rarely use photoshop myself - I learned it from having to support photoshop users and solve why the images they upload to the CMS system were so massive, ie. 400k for a 600x600 photo What we did for the non-tech people was simply tell them to always use setting #6 on photoshop and use the progressive setting. Two steps seemed the most they could handle. http://i.imgur.com/vct3D.png http://i.imgur.com/vct3D.png (best one-shot photoshop settings for web jpegs) I had to go into photoshop and save the same image repeatedly under all the different settings and then examine the resulting jpeg under different tools to see exactly what it was doing. It also doesn't help that photoshop bloats jpegs by adding hidden adobe meta to every jpeg (beyond and different from exif). Here is a technical analysis someone did on the photoshop settings: http://www.impulseadventure.com/photo/jpeg-quantization.html#photoshop http://www.impulseadventure.com/photo/jpeg-quantization.html...

gintas 14y ago

FWIW, in case you don't have a retina display, zooming in your browser works just as well to make the difference in quality visible.

7952 14y ago

Surely this works because the compression algorithm can find more predictability in an image before its resolution is reduced. You see this affect a lot when you are trying to get very high compression levels. However, it is difficult to prove exactly what is the best settings without actively trying different configurations.

esolyt 14y ago

"other companies have already started or will also start implementing this new Retina technology." That is simply impossible for two reasons: 1) Retina display is a trademarked Apple phrase and no other company will ever have retina displays. 2) Retina is not a technology. I think the word technology is being overused these days. The author was simply talking about high-PPI displays when he said "this new Retina technology", which other companies have already "implemented" in their smartphone displays. Unless one is talking only about Apple products (which is not the case here) the term retina display should not be used.

deleted 14y ago
[deleted]
radley 14y ago
For most people, Retina is synonymous with High-PPI, like Kleenex for tissue or Coke for cola. Retina is easier to say & understand. High-PPI is lost in a sea of resolution jargon.
- Groxx 14y ago
  Not that "High-PPI" is all that useful of a term either, any more than "Ultra High Frequency" or "Very High Frequency" or "Super High Frequency".
  - hayksaakian 14y ago
    High PPI is the literal description of the phenomena referred to by the OP. Its not a buzzword or a trademark, its a technical specification.
    - Groxx 14y ago
      326 PPI is a technical specification. "High PPI" is a buzzword used to sell things - our current use of it will be invalid in a few years. edit: deleted first sentence, was more off-topic than useful.

ErikHuisman 14y ago

Funny thing is. This company is called netvlies which is literally retina in dutch. They don't seem to mention it themselves..

hayksaakian 14y ago
It seems like the article is a translation, the irony might be something the original author may not have realized

dtorres 14y ago

Why not just figure out the pixelRatio once and then serve images according to that? See this gist: https://gist.github.com/3848834 https://gist.github.com/3848834

beagle3 14y ago
This isn't really good practice, unless you revise your cookie on every page load to make sure it is still correct; e.g. restoring an ipad2 backup to an ipad3 will leave you with the wrong images for the next 10 years. And an OLPC-style device might have different ratios if you're browsing using the e-ink display rather than the lcd.

darkstalker 14y ago

Good observation, but too bad that no one will ever see your high DPI images because the "retina revolution" isn't a thing. Most people won't ever notice the difference.

Johngibb 14y ago
Yea that pesky tablet revolution wasn't a thing either, and neither was the GUI actually. I'm still using lynx. (No offense to lynx users.) Snark aside, it seems like high dpi will inevitably become standard in the next few years.

notlisted 14y ago

Suspect that in-browser sharpening of resized images (CSS or HTML) can make up for some of the detail lost in the lower JPG quality. In the 60-90 range, differences are always minimal, especially when applied to images lacking detail 'coverage' to begin with (like the test set on the site). Bottom line: I to think that the blogger is onto something. Even if the "less than original size" thing doesn't always pan out due to inefficiencies in his compression process, it makes sense that in-browser sharpening would allow reduced file sizes for images displayed at lower than native resolution. PS Significant savings in JPEG size with barely any perceptible loss of detail can be achieved by anyone with JPEGMini (which, unlike JPEG2000 is 100% compatible with all browsers these days).

dmmalam 14y ago

Maybe it's time for wider support for more advanced image compression formats (JPEG200, WebP, JPEGXR).

rorrr 14y ago

This is so wrong. 1) He didn't sharpen the small images. 2) He only displayed one type of image - very bright with no shadow detail. This theory breaks completely if you actually compare apples to apples. Like these two, both 80KB generated from a high quality image: http://i.imgur.com/E3gaB.jpg http://i.imgur.com/E3gaB.jpg http://i.imgur.com/UrDEx.jpg http://i.imgur.com/UrDEx.jpg

barrkel 14y ago
Why would he sharpen the small images? The browser won't.
- rorrr 14y ago
  Because then they will look sharper. You have to sharpen when you downsample images. Web design 101.
  - 001sky 14y ago
    Yes, every size photo should have size-specific sharpening. Large or Small. Doesn't matter, if you are expecting people to look at it ~seriously.
  - andybak 14y ago
    Or you use an interpolation algorithm optimized for down-sizing.

jamesmoss 14y ago

Could this technique also work for video?

mgcross 14y ago

While I can appreciate the technique, I haven't adopted the use of @2x images for photos. Most photos tend to hold up pretty well when scaled (soft edges and relatively low contrast). If you're serving up a portfolio, sure, but I find more value in maintaining and serving @2x (based on media queries for MDPR > 1.3) for UI elements or logos not easily reproduced in CSS/SVG.

ixobelle 14y ago

Jesus, white people are ugly.

zajac 14y ago

Smart. It now sems like it should have been obvious all along. You want to reduce the size of an image file from X kB down to y kB. Which method will give better-looking results? 1. Dumb, across-the-board by-two resolution reduction? 2. Smart, perceptually-tuned jpeg compression? We probably should have been using this all along. That we can also benefit from the extra resolution thanks to touch interfaces and high-dpi displays is icing.

Silev 14y ago

I did my own test: http://silev.org/test/Retina-resize.html http://silev.org/test/Retina-resize.html