Recommended largest retina image size?

Posted on 2016-09-08
Medium Priority
Last Modified: 2016-09-09
I am using CSS media queries to change my background images for retina screens.

I have a image which stretches the full width on the screen so if I allowed for large screen sizes with a pixel resolution of say 2500px it would mean my retina image width resolution would be 5000px. Even with reducing the quality and compression this creates a big file.

My question is what is the largest image size you should allow for? Any advice on this appreciated.
Question by:petewinter
  • 2
LVL 10

Assisted Solution

ecarbone earned 800 total points
ID: 41791245
While it's true that with retina (and other high res) displays, you'd want to serve up sharper images, it doesn't necessarily mean the file size needs to be 4x larger. What I mean is, optimize the large image. You can get away with compressing it more than you normally would, and still get a sharp image.

There's a popular technique where you make two versions of every image (one 'standard' and one for retina), and then use one of several JS or jQ libraries that will automatically serve up the appropriate version based on the visitor's screen resolution. One of the more popular ones is retina.js (http://imulus.github.io/retinajs/). There are others.

Don't get hung up specifically on "retina" displays because as technology improves, resolutions will get even higher. (There are already 4k and 5k displays).

My personal preference is to just have one large version of your image - make it big for high def displays, and then use Photoshop to optimize/compress the image as much as you can stand. But you should take your audience into consideration. Is it likely that almost everyone who visits your site will have a broadband connection?
LVL 43

Accepted Solution

David S. earned 1200 total points
ID: 41791440
The largest display Apple (and HP and Dell) currently offers seems to be 5120x2880. The question then becomes do you really want to use an image that large (for full viewport width images) or is something less extreme, e.g. 4096x2304 or 3200x1800, large enough? Keep in mind that people with high resolution displays won't necessarily have their browser windows maximized/fullscreen. I say that there is no definitive answer to this question, since there is a substantial trade-off to be made for fast loading versus image clarity, not to mention ease of development and maintenance.

I would like to point out that you can use more than just two sizes of an image (especially when using the sizes attribute and srcset attributes together or the <picture> element). I say that because there's more to this question than just pixel density. There's also the issue of mobile devices. The Retina display of an iPhone 5s is 640x1136. (And some people use mobile devices that have "normal" pixel density, instead of double or triple density.)

Using media queries to handle more than two sizes can result in a lot of code though, especially since it's still a good idea to avoid using nested media queries (specifically "@media" blocks). The nesting issue won't be encountered as easily though if you have your styles for larger screens (or smaller, if you're not using the mobile first approach) in a stylesheet which is conditionally loaded via a media query, e.g. a <link> element with a media attribute. (It's probably worth mentioning that the number of users of Opera versions before 12.1 is insignificant, so "-o-min-device-pixel-ratio" is not needed any more.)

Ecarbone, while I've used JS to handle this on many projects, is it still really needed? Won't most people with high DPI devices, e.g. with Retina displays, be using a browser that supports the srcset attribute at this point?
LVL 10

Expert Comment

ID: 41791464
Good point. As long as the device is using a browser that support srcset then you're good to go. With most polyfills/shims, eventually the browser's capabilities catch up with what we want.


Author Closing Comment

ID: 41791527
Many thanks for the advice

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question