[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


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 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

650 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