Optimize your responsive images

If you haven’t already implemented a responsive images solution for your sites that target mobile devices. Go ahead and do it, now.

Scaling images and saving the different sizes is the first problem you should focus on solving. This will save you alot of bytes when serving them to small viewports. When you do have your responsive images in place, it’s time to go the extra mile and optimize the compression.

Keep originals at maximum quality

Remember to always save/upload the originals without any compression at all, eg. at 100 % quality. Otherwise you will loose quality when scaling them down later.

Optimize compression for each size & image

For this task I like to use imgmin to determine the optimal quality setting for any given image. Small file sizes and minimal quality loss sure is a pleasure.