0

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 size as much as possible while keeping image quality high (no really bad compression artifacts). The challenge is that I don't own a retina display myself and I am unsure about the best tools (online vs software) to perform compression.

As I am running on Linux, I tried Gimp with the following settings (50% quality compression, 4:2:0 (chroma quartered)), but I am having a hard time to figure out when the image quality turns bad:

enter image description here

Are there any objective criteria or automated processes to find optimal values for smallest possible sizes?

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.