: How to optimize JPEGs for retina displays? I am trying to optimize a set of JPEGs photos (5120 x 2880 px) that will be used on the web for retina screens. The objective is to reduce file

@Sent7350415

There is a save-for-web plugin that gives you a more direct feedback on size and appearance when exporting images.

The chroma sub-sampling is indeed the setting that gives the strongest file size reduction for a given visible image alteration. On a dense display (or if the image is scaled by 50% or a regular display) the quartered chroma should not be noticeable.

As a general rule, for quality images I don't go below 85. Going further, compression artifacts start to appear on hard edges and fine detail becomes blurred.

Something you can do to save bandwidth is have images in two sizes, and have some Javascript in the HTML pages to switch the image URL according to the reported display size. But, speaking of JavaScript, keep in mind that in many web pages, you get more traffic from all the JavaScript than from the included images.

Using a CSS Media Query to serve different images to different screen sizes could be a better use of web resources in this example.

Vote Up Vote Down