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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 42

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


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 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