Update 8/19: also investigated 1.5x with interesting results!

I've recently been tasked with optimizing load times on our sites. Most of our pages are pretty image heavy, so image optimization is naturally the quickest and cheapest way to get a performance boost. I noticed some of our larger images were coming in around 300 - 500k... uhf-dah.

I spoke with the image production team and they said for large screen images their target file size was 400k, since "that was the number that the largest images didn't lose too much quality". For the record, I am not an image optimization expert. I know there are many factors that go into optimizing an image, but 400k seemed pretty high for a benchmark.

So, I started looking into other tactics we could take. Somehow I ended up on articles about retina and 2x images and the tactic used to optimize 2x images intrigued me. Doubling the dimensions of the image would allow me to crank the image quality way down, then use CSS to dictate the image dimensions. I did this to some images and found that I could save around 100k with large images. Here's a demo of one of those images:

Both images appear to have comparable quality at 1920px wide and we saved 107k - woohoo!

My question is: are there any drawbacks to using 2x images by default?

Sure we have to specify the width in code, but that's usually good for browser rendering anyway - right? Are there other browser layout/paint/composite concerns with this tactic? Am I missing something? Is this already a thing and I don't know it? I talked to the designers on our team and no one knew anything about using 2x by default.

I'm not saying "2x all the things!!!", but especially for large hero images, it seems to make a lot of sense.

Another Plus On Mobile

I also applied this tactic to mobile images and I noticed that when at max zoom, the 2x version was less pixelated. It was also about 20k smaller. Feels like another win...

Mobile 1x Max Zoom

1x zoom

Mobile 2x Max Zoom

2x zoom

Please let me know your thoughts!

Update: 1.5x

I sent this post to CSS Tricks and they referred me to an article from a few years ago and recommended looking at 1.5x. So I took a crack at it with the demo above and found that 1.5x and 10% quality I saved 194k! (87k more than 2x). Perceived quality appears to be pretty close to 1x and 2x.

I also did this with a more complex image with less blur and found that the 1.5x also saved the most weight and still looked good. (Thanks to Mike Lothar for calling out blur and image complexity)

I'm still feeling like this tactic is pretty decent, whether it's 2x or 1.5x. Any other thoughts/concerns from anyone?

1,387 4 17