Solved

Recommended largest retina image size?

Posted on 2016-09-08
4
50 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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now