Solved

Recommended largest retina image size?

Posted on 2016-09-08
4
80 Views
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.
0
Comment
Question by:petewinter
  • 2
4 Comments
 
LVL 10

Assisted Solution

by:ecarbone
ecarbone earned 200 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?
0
 
LVL 42

Accepted Solution

by:
David S. earned 300 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?
0
 
LVL 10

Expert Comment

by:ecarbone
ID: 41791464
David,
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.

http://caniuse.com/#search=srcset
0
 

Author Closing Comment

by:petewinter
ID: 41791527
Many thanks for the advice
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 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