Optimal image size for retina - beauty image

Question

We are supporting hi-res displays on our website. We also have large header/beauty images on each page, so I made them 1400px wide - under 350KB - JPGs. I think it's a good balance between quality and size. Our programmers are asking me to downsize them even more. What would be your optimal size for a header image for retina?

Answer 1

Seems about right

As long as the programmers know how to deal with high-density retina displays, this size (or even slightly bigger) shouldn't be an issue. Of course, as long as we're talking about JPG files like photos with fine details. Otherwise, if your images are vector based, you could (should) use SVG files.

What your programmers seem to be missing is that they need to serve images based on different screen densities. And the whole point of retina screens is to have high quality images with crisp quality, not to save bandwidth.

For example, Apple serves the image below:

Size is 381,47 KB (390.626 bytes)

TheRenovatorHQ doesn't have a differentiation for Retina, so it serves this one for everybody (a retina quality image):

Size is 397,45 KB (406.988 bytes)

And I could go for hours, just 2 quick examples. Please keep in mind THESE AREN'T EVEN THE RETINA VERSIONS (2x the size). However, the second site is an example of what NOT to do: serve high density images to everyone instead of displaying images as needed.

Bottom line is that if you support retina, you're going after quality and bandwidth should be the lesser of your concerns. Showing ultra-compressed images in retina... well, test it by yourself and see what happens. And yes, I fully understand what it means to deal with programmers who can't even grasp the need for high quality images or design or usability or whatever, so you'll need to instill that culture in your organization or you'll have to go through this time and time and time again

Additional Reading

Just as a reference, take a look to the links below and show them to your programmers:

• A guide for creating a better retina web
• 5 Things I learned designing for high-resolution retina displays
• Optimize Images for Retina Display
• The Right Way to Retinafy Your Websites

Answer 2

350KB is too much for a single image and it is not good ballance. As a rule of thumb you should not exceed 100Kb per image (think about people with really slow internet). Suggested density of the pictures for the web is 72 DPI.

Majority of users have laptop resolutions, such as 1366x768. Most used desktop resolution is 1920x1080 which means that picture that is wider more than 1080 pixels is serving not more that 2-3% of users.

Maybe you can do the following: use a 100Kb picture as default, but if you detect user with resolution higher than 1080 pixels wide than use your bigger picture.

Another alternative is to use SVG images which are much more lighter - 1-2KBs at most. They also have perfect clarity in any resolution because they are vector based but eventually they can look pretty cool. The only downside is that someone has to draw them.

To summarize:

Use images that don't exceed 100Kb, not wider that 1080px, with not more than 72DPI. As an alternative use SVG images which are much better than jpg for retina displays.