7

Ask DN: How do you handle retina images?

4 years ago from , Position @ Company

Curious as to how everyone is handling retina images these days

I usually just export images at a 2x resolution and use this asset as the only image reference rather than producing multiple images and using a script to decide which to serve

Is this bad practice?

Should we still be exporting one image for regular displays and one for retina ones?

What's more detrimental to website size / speed, one larger image or multiple ones that require a script to make the right call?

I've never had any issues with this and it seems redundant to have 2 of every image, but I'm also always working locally or with a fast enough internet connection that I don't notice any major difference

6 comments

  • Dan BurzoDan Burzo, 4 years ago

    Take a look at the <picture> HTML element, it's supported in most modern browsers (and there's a fallback for older versions of IE), it's a clean syntax, and it avoids downloading multiple versions of the same image.

    It also allows you to art-direct for different media queries, so you could have totally different images based on the viewport size.

    Some references: http://alistapart.com/article/using-responsive-images-nowhttps://developer.mozilla.org/en/docs/Web/HTML/Element/picture

    This is, of course, for content images. For decorative graphics that might be in your CSS, as background-image for example, media queries will do the trick, and I'm not aware of any particular methodology for handling these.

    Now, for creating two versions of the same image, most design tools nowadays have the ability to export @1x and @2x versions at the same time, so that's not too painful to manage.

    That being said, as mentioned in a previous comment, you can offload some of the work to SVG, which is a vector format that's perfect for logos, UI icons, and the such.

    Hope this helps.

    2 points
    • , 4 years ago

      This is great. The 'A List Apart' article is one I've stumbled across in the past, but never gave much attention to. Definitely going to give this a good read through and put into practice. Thanks

      0 points
  • Chip Dong Lim, 4 years ago

    Hi Adam, I found Ivo Mynttinen's tutorial to be helpful in the past when I was building my portfolio site. Have you tried his approach?

    http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web

    2 points
    • Ivo MynttinenIvo Mynttinen, 4 years ago

      Hey Chip, while it's great to see you mentioning my article here I have to warn you and others that some of the techniques I'm describing there are kinda outdated today (the article is from 2013).

      Responsive images via srcset are relatively safe to use today and a far better idea than using replacement technologies (server or client side) or just using larger images.

      However, the sections about icon fonts, svg's and css background images do still apply today.

      1 point
  • Mike HeitzkeMike Heitzke, 4 years ago (edited 4 years ago )

    Like others noted, I try to use as many SVGs as possible, etc, etc.

    This isn't a perfect solution, but works well enough for a lot of cases. It saddles that line of punishing non-retina a bit, and also retina a tiny bit. It takes a little bit of playing with the compression and sizing, but it still yields good results without any extra complexity

    https://www.netvlies.nl/tips-updates/design-interactie/retina-revolution

    tldr: double your jpg size and compress the shit out of them. They'll end up being smaller than a higher-quality half-sized jpg.

    Also, you'd be surprised about the amount of weight you save in actually optimizing your images in using with tools like ImageOptim, ImageAlpha, svgo (and svgo-gui)

    0 points
  • René Stalder, 4 years ago

    Using SVG all the way whenever possible. For the rest e.g. jpgs, I let the CMS handle all the things. The user just uploads the full size image and the CMS delivers the best size for the users screen. It may even generate new sizes if needed.

    0 points