I ran into an image performance problem as soon as I started loading my blog with copious number of images. In picture, this is what I encountered:

This is not a look that is acceptable to my experience designer’s eyes. I had known the phrase “web optimizing images” from working on different websites, but never really dug into what it meant and how to achieve that.

After spending hours going through tutorials on how to make image loading performative involving preloading with Javascript, or hacking the css image tags, I found progressive JPEG to be the single most effective and easily implemented solution to my problem. So here is a step by step tutorial on how to web optimize your images.

• Jump to Step 1: Resize Your Images

• Jump to Step 2: Save as Progressive JPEG

• Jump to Bonus

Tutorial

Let’s start with this delicious looking (if I can say so myself!) adzuki mochi brownie picture I took on my iPhone. It is 1.1 MB, which is too big to be displayed quickly.

Step 1: Resize Your Images

For a blog post image, I resize my images to 1500px in width or 800px in height while maintaining aspect ratio. So for the image above, since the width < height, and width is already less than 1500px, I will constrain the image by the height instead. I perform this step in Adobe Photoshop. If you have photoshop, here are the steps:

Image > Image Size > Set Height to 800px (or Width to 1500px)> OK

Remember that the chain symbol is linked to preserve the aspect ratio of photo as you change the size.

Step 2: Save as Progressive JPEG

First of all, if your image was in the PNG format, converting to JPEG will save you some image size already. After I converted my PNGs to JPEGs, my images were a lot smaller, yet they were still displaying like window blinds :(

The next level of image size saving is progressive JPEG.

Here is a picture of the kitty you saw at the beginning of the article. In progressive encoding, the browser displays a blurred preview of the picture as the picture loads, instead of showing section after section once the picture is completely loaded. For me this is a much more pleasant experience than looking at a blank page loading section by section. In terms of usability, if you are fast scrolling through a blog, you are going to get absolutely NO information from a picture that is mostly white space, whereas you might get just the idea looking at a blurred photo of a kitten. Following image courtesy to Liquid Web's Dan Pock.

Non-Progressive Encoding:

Progressive Encoding:

To achieve progressive encoding, let’s open up the trusty photoshop, and we will be saving the image as a progressive JPEG.

File > Save As > Click Save in the Pop Up Window > Format Options Choose “Progressive” > OK

That’s it! Upload these optimized image onto your website and see how quickly and nicely your images are rendering on your website!

Bonus:

Jon Sneyers from Cloudinary wrote an excellent article on Progressive JPG back in 2016. I still find it highly relevant to my own blogging endeavor. Definitely check out this article to learn more about progressive encoding of jpgs work. In particular, Jon talks about how to “get the best of both worlds” (both worlds being progressive and non-progressive encoding) in the article, and shows you how to implement semi-progressive encoding with open source encoders libjpeg or mozjpeg.