135 reacties op “Retina revolution”

1. Great advice shared here. So your point is to scale the images down. You are using JPG even for logos, although I would have avoided it due to the lack of quality. Since everything below 80% looks bad on the logo above, one might just use PNG in the first place (as long as the file size remains reasonable).

   Reageer ↓

   • I agree, using jpg images for classic gif or png images is not a very good idea. Mainly because jpg images are bigger than gif / png. I used the logo image only for testing purposes Soon i”ll post a follow up article with lots of new testing images! And more conclusions.

     Reageer ↓

   • Yeah, it’s such a 1990s thing to do. JPG for high-color photos, GIF or 8-bit PNG for logos/low-color flat graphics.

     Reageer ↓

2. Probably the ‘best’ solution I’ve seen so far. Thanks for sharing!

   Reageer ↓

3. I was wondering, how you made the images appear the same size, so i had a look at your code:
   the original images only had a width of 294px even though you set them to 300px as attribute. this was because of the max-width attribute in style.css:808 which has a value of 97.5%. i deactivated the attribute and had a very interesting visual result!

   Reageer ↓

   • This WordPress blog page does strange things with the width of the images as you said. I just scaled the 600px images to 300px.

     Reageer ↓

4. Note that if you upscale an image and then recompress it, you’re not actually adding more detail. You might be using a nicer upsampling filter than no interpolation (jpg) like bilinear, bicubic, etc. But in effect, you just added a bit of blur. The more correct methodology would be to downsize a larger image to 50% its original width/height. And then compare that, and I assure you, you won’t get “the same or better result with less file size”.

   Reageer ↓

   • You misunderstood the article – he is talking about scaling the images in the browser, that is, serving an image that is twice the size that it will display. This has the effect of reducing the jpeg compression from 8×8 squares, to 4×4* squares on standard monitors – even at high compression, this “false resolution” hides the increased numbers of jpeg artifacts.

     * jpeg compresses images in 8×8 sections (by finding a wave that most accurately describes the pixels – the less accurate the wave, that more compression is possible), which is why they get that “squarey” compression

     Reageer ↓

     • No; unless I am misunderstanding how the author described his process, Florian is correct: You can’t judge the *appearance* of the two images, because the larger image is only a scaled-up version of the smaller image.

       For a useful test, the larger image needs to be the original (at full resolution). The smaller image needs to be obtained by scaling the larger image down.

       Reageer ↓

       • Just looking at any one of the examples provided will immediately reveal higher detail on the retina images. And, as Florian says, you can’t magically add detail to upscaled images. So even without reading the article, the only natural thing to conclude is that the same high-resolution source was used for both images. This is standard practice for anybody who deals with images on a regular basis.

         Reageer ↓

5. When your website tops 90 HTTP requests, you shan’t shave a few bytes with a stupid trick, you oughta learn to code.

   Reageer ↓

   • I’m a designer, not a coder.

     Reageer ↓

6. Ugh “Retina revolution”, “this new Retina technology”…

   High end models of other brands pushed full HD displays in to 13″ and even 11″ laptops years back. (the 2009 Vaio Z for instance was 13.1″ and had a full HD display, and the Vaio P has pushed 221 dpi for even longer. The Vaio UX, while being significantly smaller, had 264dpi)

   I fail to see how Apple is leading the charge and their “Retina” branding is being seen as if it were some technological breakthrough. This is the n-th time I see a designer pointing this out as a revolution, and it’s annoyed me every time.

   I like the fact that higher resolution displays are becoming more widely available, but lets give credit where credit is due, and no label this as another Apple invention. Granted, they are a major benefactor for the high-dpi adoption rate, but that’s about it.

   Reageer ↓

   • I think Apple is bringing the high resolution screens to the masses for the firts time. I’m sure they aren’t the inventors of it.

     Reageer ↓

     • Apparently, apple has never invented something new. There has been tablets before the ipad, there has been smartphones before the iphone and there has been portable media players before the ipod – but when apple did it, it was a breakthrough.(Don’t get me wrong, I’m not an apple fan)
       And, of course, this is an interesting finding. The high-res low quality images do look sharper!
       [something irrelevant: Please remove that cookie request and fixed-scrolling "privacy settings". Its really really annoying ]

       Reageer ↓

       • Unfortunately ‘the cookie request’ and ‘privacy settings’ Are there as an implementation of a local (dutch) law. http://bitly.com/Vipic4

         Reageer ↓

   • It’s not about who gets to the plate first, but who does it best. And Apple has far exceeded it’s competitors.

     Reageer ↓

     • Retina displays are better resolution than HDTV screens.

       Reageer ↓

     • Exceeded in what? Marketing bullshit?

       Reageer ↓

       • I think it has more to do with coming up with a strategy for developers. Where the software resolution is close to an old standard size (1440×900) with 2x graphics being used where needed (and type at high-res resolution) to sharpen the true 2880×1800 resolution.

         That’s different from someone making an unusably-high resolution screen where people are forced to dump up font sizes, have unusable programs, and websites with broken layouts.

         It’s the same situation where “tablet computers” existed before the iPad, but nobody thought they needed to update the crappy OS/software (I remember using one with Windows Me??) for touch navigation instead of point+click.

         Reageer ↓

   • The new challenge about Retina is not that it’s higher resolution than everything else (though Apple would like you to believe that), it’s that web pages and their images are displayed at 200% zoom by default. I don’t think the laptops mentioned do that. However, other non-Apple mobile devices do, so this is an increasingly useful technique.

     What surprised me is that it also increases image quality per byte on standard resolution monitors (even after you turn off the interfering CSS rule).

     Reageer ↓

   • The trick with the Retina Display is not that it has so many pixels, but that the OS shows 1 Pixels as 4. So the size of the items on the screen stay the same, but they are sharp.
     Windows lets you choose between small fonts and items or scaling up the items to 150% which results in squishy images – Apple made it easy for developers to add two different asset sets to their software.

     Reageer ↓

7. Interesting but in my not retina display I can appreciate more subtle differences in your images for Retina that are compressed to a 71% of original size. I can appreciate some subtle colour jumps in the background gradient. Perhaps my monitor have more contrast….

   Reageer ↓

8. FYI, you have a css rule that is causing your control images (on the left) to appear slightly smashed and therefore more blurry:

   line 808 of http://blog.netvlies.nl/wp-content/themes/twentyeleven/style.css

   .entry-content img, .comment-content img, .widget img {
   max-width: 97.5%;
   }

   Reageer ↓

9. I’m definitely going to try this later today. Great tip. Two comments:

   1. – Your images have large ‘empty’ areas and fairly limited color/tonal range, which means images compress well to begin with, and output quality varies relatively little if you save an image at 80 or 50). Are your suggestions still valid with images that contain lots of detail and a large variety of colors?

   2. – Check out optimized compression with JPEGMini. I use this for all sites/clients. very happy with the results. Could reduce your full size retina version of the lady with the glasses (41kB) to 21kB without any noticeable difference (smaller version from 16kb => 12kb).

   In a way it makes sense, as the JPEG standard was created to benefit from the limitations of the human eye (color perception/detail) and because of the “pyramid” encoding (every additional quality level adds more “signal” ie detail).

   I suspect that in-browser sharpening applied to browser-rescaled images also plays a role here.

   Thanks again en groeten aan je moeder.

   Reageer ↓

   • Thanks fot the feedback

     1 – In a follow-up article I tried other pictures besides the ones with the limited tonal range etc you mentioned. It’s in Dutch, but maybe Google Translate will make you onderstand. Or perhaps you can read (and) write Dutch!

     http://blog.netvlies.nl/design-interactie/retina-revolutie-follow-up/

     2 – Will check it out!

     Jij ook de groeten aan je moeder, zag haar laatst nog bij de AH!

     Reageer ↓

10. typo: “doubled it’s size” — should be “its” (possessive, no apostrophe)

    Reageer ↓

    • Thanks!

      Reageer ↓

11. another typo: “unfortunately it’s filesize” — should be “its file size”

    Reageer ↓

    • I’m Dutsch!

      Reageer ↓

12. You should look at this post’s HN comment thread to read all the corrections to your little assumptions.

    http://news.ycombinator.com/item?id=4623160

    Reageer ↓

    • I will do that, thank you for your feedback!

      Reageer ↓

13. This is awesome. I just purchased a Retina Macbook Pro and have been scouring the web for new techniques to tackle this issue. When I bought my new MbpR I had no idea what a difference the retina display would have on my web design work. Thanks so much for sharing, I agree with Gwen, one of the best solutions out there so far.

    Reageer ↓

14. Pingback: Retina revolution | Itsaat

15. Dit is de oplossing..
    http://www.jpegmini.com

    Reageer ↓

16. are there noticeable differences in image loading times (compressed vs. uncompressed)?

    Reageer ↓

    • I think so. Off course depending on the site your visiting.

      Reageer ↓

17. Cool discovery. It makes sense that when the higher resolution is scaled down it hides the jpeg compression artifacts, but I had never thought to try this. Even if people aren’t likely using a retina display this would seem to be a valuable technique where load times are critical.

    On another note, this page doesn’t display very well on my iphone 4S — the image examples get squished horizontally and it’s harder to see the difference. Just wanted to let you know since seeing this on a retina display really drives home how effective it is. The examples did display properly on my retina ipad.

    Reageer ↓

    • Thank you for the feedback, it’s a bug in the WordPress code I think. I’m trying to have this fixed.

      Reageer ↓

18. So all you do is make the image twice the size and then set the IMG tag to show it as half the size? I’m thinking in the future, people may have to adjust the DPI of images.

    Reageer ↓

19. In your article it sounds like you’re suggesting to upscale the original image for use in a high resolution situation.

    Anytime you upscale your original image the result will be fuzzy and blurry. You have to have the large image first or else when the high resolution device scales the image it will guesstimate the pixels. This is where the fuzzy and blurry effect come from. If you’re part of the apple developers program there’s a great video on this topic under the WWDC session videos 2012
    https://developer.apple.com/videos/wwdc/2012/?id=602

    Reageer ↓

    • No, it’s not about upscaling your images. You need to use actual bigger pictures: 2 times the pixel size in both directions.

      Reageer ↓

20. Great article. Just a heads up though, images on your site are not being scaled vertically for mobile. They appear stretched on the iPhone.

    This could be resolved by setting “height: auto” in your .entry-content img{}

    Cheers

    Reageer ↓

21. Hi Daan, I don’t want to sound negativistic (the effort is appreciated), but there’s hardly anything new in what you wrote. JPEG compression was specifically designed to exploit deficiencies of the human visual system. That of course doesn’t mean it’s universal – JPEG fails for images with large constant areas or gradients, high-contrast images etc.

    The bottom line, and the basic principle of publishing pictural content, is – always use the resolution, format and compression quality that is *just sufficient* to represent what you want to convey. This is of course not easy to get right and requires testing, since it varies from case to case, but it’s the deal. There are heuristics that can help you to automate this, but there’s still a lot of progress to be made.

    Reageer ↓

    • I think this is a new approach. The jpg compression isn’t new off course, but the way heavy compression can be used to create sharper images who are smaller or the same size is. Especially in combination with high resolution screens. Other ‘common’ solutions are serving multiple images, or using high res images with normal compression who are huge in filesize.

      Reageer ↓

22. Sorry for being pedantic, but are the images not four times the size? We’re doubling each dimension after all, and there are two dimensions.

    Reageer ↓

    • 4 times the pixelsize, 2 times the resolution!

      Reageer ↓

23. Pingback: Michael Tsai - Blog - JPEG Compression and Retina Images

24. Pingback: Michael Barrett @ Abouthalf.com. : JPG is a compression format

25. Pingback: Things You’ll Find Interesting October 9, 2012 | Chuq Von Rospach, Photographer and Author

26. Pingback: Revision 91: Konferenzen und HiDPI Bilder | Working Draft

27. Somehow the same approach that 10bit video uses … as you have more material you can truncate more without the user noticing a difference, leading to better compression.
    http://x264.nl/x264/10bit_02-ateme-why_does_10bit_save_bandwidth.pdf

    Reageer ↓

28. Pingback: Designing for Retina - DesignersTalk

29. This is very VERY interesting, and i’m wondering isn’t it better then to ALWAYS use the retina compression? this way you have the best of two world and no need to get crazy to support both retina and unretina displays, simply put the image double sized, compress the jpeg and then half the pixel sizes. Any contraindications for this?

    Reageer ↓

    • i was going to post the exact same comment here.

      very nice discovery Daan!

      but why not using your “retina compression” method throughout the website, no matter what pixel-ratio the user has. i mean if it’s the same file size…

      Reageer ↓

30. Pingback: How to serve high-resolution website images for retina displays (new iPad/iPhone4+) - benfrain.com - blog of technology writer and web designer Ben Frain.

31. Hi Daan
    Thanks a lot for sharing. On my retina iPad, your trick works very well. I never thought to use the compression like you did on the retina image. Great

    Reageer ↓

32. We’ve done a fair bit of work on retina optimised pages and have come up with a useful scripted solution to handle images that prevents downloading *any* extra images –
    http://codex.web-engineer.co.uk/2012/11/the-end-of-points-long-live-the-pixel-and-getting-the-best-from-a-retina-display/

    There is a very simple project and demo on github here – we welcome any feedback and hope that your readers find it useful.

    https://github.com/web-engineer/retinize

    Reageer ↓

33. Pingback: Чудеса Retina — файлы меньше, качество лучше

34. Thanks Meer for this awesome article very helpful.

    Reageer ↓

35. Thanks for sharing.
    Compressing 80% JPEG for Retina Images would be huge bonus to save the file size. I could see the difference between normal and retina images. But Not a huge difference.

    The differences come in TYPES, i think.

    Reageer ↓

36. Interesting points… though I’m not entirely convinced yet… but it’s a good discussion starter.

    Quick tip: the logo on your site is not optimized for retina (even though you used it as an example in this article).

    Cheers,
    Jackson

    Reageer ↓

37. Pingback: “Compressive” Responsive Images | Swash Cap Blog

38. Pingback: Handling images on retina displays — functionalaesthetics

39. Pingback: Responsive and adaptive design resource - DesignersTalk

40. I think this is the best solution anyway!

    I hate it at Apple’s website, when I use a non-retina device and zoom in, the pictures are so blurry and no details. You only get the good quality images, when using a retina-device, which is no fun for the others.
    I guess they make it like this to push the sales of their retina-devices, but I hope the rest will offer hi-res pictures also for the rest of us!

    But I would go with the SAME file size as the original image. In some pics the 75% are enough, in others not. But if you use the same size in KB for the retina-image, it never looks worse than the original.

    It is fine, because I can also see the better images without a Retina-Device, when I zoom into the website. This is standard-use on every smartphone or tablet and it becomes more and more popular on normal computers too.

    It is fine, that I can zoom in here with my normal MBP 13″ (or any PC, Tablet, Non-Retina iPad, etc.) and see the good images too.
    I don’t need the Retina-Device to see the Retina pictures, which is the way to go!

    If it is a logo, etc. best use SVG or if not possible 2x bigger PNG or GIF (it won’t get much bigger at the higher resolution), if it is a more complex image or a photo use 2x bigger JPEGs with more compression to get the same filesize.
    And then scale it down on the website, so it is fine for every device! (also zoomed in on retina and non-retina displays)

    Reageer ↓

41. Pingback: Hands on the New Glif Plus for iPhone 5 and the Cosmonaout | Robin Plus

42. Pingback: Hands on the New Glif Plus for iPhone 5 and the Cosmonaut | Robin Plus

43. I made a similar finding; see http://dh.karelia.com/retina/ for a little tool to test out some different images with different compression settings.

    Reageer ↓

44. Pingback: Automatic Retina images for web sites

45. hello,

    tnx it was a great read. specially the examples. can you please tell me which soft you used to conduct this test?

    Reageer ↓

    • Just Photoshop

      Reageer ↓

46. Pingback: a good blog post | High Performance Web Sites

47. Pingback: Webtrends 2013 - Das volle Interview aus der Internet Intern

48. Pingback: Wishing You A Responsive and Retina-Friendly Xmas! | gonzoblog

49. Pingback: Polar – Pure inspiration - Dean Birkett | another web guy

50. Pingback: Optimize Images by Saving With Low Quality & Scaling Down | Tobias Ahlin

51. Pingback: « Retinafy your web sites & apps » : réduisez ce pixel que je ne saurais voir - Le Blog de LunaWeb

52. Pingback: Bilder von Teese - coldheat.de

53. Pingback: Web Contemporary | Easy Programs In Retina Display Clarified

54. Pingback: Bitmap Image Optimisation - Broken Links

55. Very interesting. I have one thought about how to evaluate your examples. If I am not mistaken, the Retina display will upscale the lower resolution images for the extra hardware pixels. This will result in a slight blurring of the image when view on a Retina display. Therefore it might be more accurate to compare the lower sized image on a standard display to the lower to the higher sized image on a Retina display. I’m sure the results would be as you have found, though not quite as much of a difference as when the result are all viewed on a Retina display.

    Reageer ↓

56. I did a test with a photo that contains text and details.

    http://124mercer.com/sizetest/index.html

    Reageer ↓

57. What I do find interesting is how irrelevant the actual memory-usage has become. An image, no matter how it is compressed to fit into a file, will always require a certain amount of memory once loaded.
    A very simplistic example:
    1024x768x24bits = 2,25MiB
    2880x1800x24bits = 14,83MiB
    Of course this is mostly not a topic anymore nowadays (and not for the dimensions mentioned in this article anyway) but it would not be wise to ignore the fact that slamming a device with dozens of ‘retina’ Images, even if it can’t display the resolution as such, will slow it down because the 64KiB File will be expanded considerably once within the device.
    Nice idea, though and interesting too.

    Reageer ↓

58. Pingback: Bruce Lawson’s personal site  : Reading List

59. How do you display inline images at 50% of their width? Max-width and width set at percentages are relative to their parent, the transform approach doesn’t change the rendered dom node size. Ideally, I would like to not have a css class for each image, for instance I want to avoid having to write .logo{ max-width: 200px; width: 100%; } where the .logo is on an img tag whose native size is 400px.

    Reageer ↓

60. Pingback: Tendencias en Diseño Web en 2013

61. Pingback: static-article | Bppl Cloud

62. Pingback: Optimize Images by Saving With Low Quality & Scaling Down - timsby

63. Pingback: jQuery Europe 2013, Tag 2 – Namics Weblog

64. Pingback: Improving UX Through Front-End Performance | Feeds

65. Useful information. But which tools is best for compression of images. Can you tell me.
    Thanks

    Reageer ↓

    • I used Photoshop CS5.5 Other people use sites like http://www.jpegmini.com/ or other desktop programs such as Fireworks. I can’t really say what program is best for you needs

      Reageer ↓

66. Pingback: Reportage fra WordCamp Copenhagen 2013

67. Pingback: Designing for high resolution Retina displays

68. This is a seminal piece of work. Well done Daan!

    Ignore the wally-dingo responses regarding .png compression for the graphics. Those chaps clearly missed the significance of what you were demonstrating. It was helpful to see how .jpg influenced images of this type. I would also like to see how this plays out for gradients such as a blue sky photo.

    Thanks for sharing.

    Reg

    Reageer ↓

69. Pingback: Improving UX Through Front-End Performance | Affordable Website Design - Wordpress Website Development

70. Pingback: Thias の blog » Blog Archive » High Resolution Graphics

71. Pingback: RT @matthbooth: Interesting article on JPG compres… > UX Blog

72. Pingback: Improve Mobile Support With Server-Side-Enhanced Responsive Design | PJExploration

73. Pingback: Retina Done Right: An Easier, Better Workflow | Deprecated.co

74. Pingback: Sicher ● Web & Design

75. Pingback: metascope | Improve Mobile Support With Server-Side-Enhanced Responsive Design

76. Pingback: » Responsive Design: Neem afscheid van pixel-perfect, denk proportioneel - Ferry den Dopper’s blog

77. Pingback: Open Source Plugin: Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) – BeeWorks Freelance Web Design and Digital Marketing Specialist based in Cagayan de Oro Philippines

78. Pingback: Open Source Plugin: Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) - Pittsburgh Web Design & Hosting

79. Pingback: Improving UX Through Front End Performance | Zip Stream

80. Pingback: Improving UX Through Front-End Performance | Bee Inspired

81. Pingback: Improving UX Through Front End Performance | DZNR

82. Pingback: Improving UX through front end performance | Rapid

83. Pingback: Improving UX Through Front End Performance | Design To Web

84. Pingback: Improve Mobile Support With Server-Side-Enhanced Responsive Design | Inspire Web Designs | Web Design Kansas City

85. Pingback: Open Source Plugin: Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) | Kleinburd News

86. Great article. I think this is the best workflow I found so far. Thanks!

    Reageer ↓

87. Pingback: Responsive Retina Ready Google Maps - Rob and Lauren

88. Pingback: Improving UX through front-end experience |

89. Pingback: Are Compressive Images A Good Solution For High Resolution Displays? - Vanseo Design

90. Pingback: Compressive Images

91. I am curious to find out what blog platform you’re using? I’m experiencing some minor security problems with my latest website and I would like to find something more risk-free.
    Do you have any suggestions?

    Reageer ↓

    • It’s WordPress, pretty reliable i guess

      Reageer ↓

92. Pingback: Tutorial: Compressed Textures in AIR (ATF Format) | TreeFortress

93. Pingback: Improve Mobile Support With Server-Side-Enhanced Responsive Design | Tuts – Infos++

94. Pingback: Are Compressive Images A Good Solution For High Resolution Displays? | Eduardo Joaquim Silva

95. Pingback: Open Source Plugin: Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) | Reme Le Hane - Front-end Web Developer

96. Pingback: The State Of Responsive Web Design | DCGraphics

97. Pingback: The State Of Responsive Web Design | DK Studio

98. Pingback: Responsive Image Resources - FRANCES INK

99. Pingback: Improving UX Through Front-End Performance | iBorg

100. Pingback: RWD und Retina Displays: Bilder mit hoher Qualität auf Kilobyte-Diät | haunschild.de

101. Pingback: Responsive Webdesign – présent et futur de l’adaptation mobile : Studio-ProWeb

102. Pingback: Tendencias en Diseño Web en 2013 | zonadeep.net™

103. Pingback: Improving UX Through Front End Performance |

104. Pingback: The State Of Responsive Web Design | Web Design by Sixteen Industries

105. Pingback: Notes about @brad_frost workshop: “Reasons to be Responsive” | Leo's Blog

106. Pingback: The State Of Responsive Web Design | TheSmartTech