The last time progressive JPEG images were popular was in the 1990s when dialup Internet connections were still prevalent and developers were desperate to find ways to shorten page loading times.
For website users, progressive JPEGs have a speed advantage over conventional "baseline" JPEGs for 2 reasons:
- Actual faster loading, because better compression gives progressive JPEGs smaller file size, and
- Perceived faster loading, because progressive JPEGs begin to load at once at full pixel dimensions, making the image identifiable earlier, whereas baseline JPEGs begin loading pixels from the top of the image on down, so take longer to become recognizable.
Although progressive JPEGs are "fuzzy" when they begin to load, on today's broadband Internet connections the progression generally happens so fast that it's not noticeable to the user.
Progressive JPEGs are seeing a resurgence now because of Google's "mobile first" indexing policy, described this way in Google's developer documentation:
"Mobile-first indexing means Google predominantly uses the mobile version of the content for indexing and ranking. Historically, the index primarily used the desktop version of a page's content when evaluating the relevance of a page to a user's query. Since the majority of users now access Google Search with a mobile device, Googlebot primarily crawls and indexes pages with the smartphone agent going forward."
The easiest way I've found to create progressive JPEGs is with the free RIOT Radical Image Optimization Tool, which you can download from https://riot-optimizer.com/download/ .
Just download and run the setup file and you should see the RIOT interface, which looks like this:
At bottom left, set the file type to JPEG, then click OPEN at top left, and navigate to any existing baseline JPEG file on your computer.
The image I chose for this example is this one, which at full size is 5760 x 3840 pixels with 300 pixels/inch resolution:
RIOT will quickly produce a progressive version that it displays alongside your original, like this:
Notice the reduction in file size that's occured: from the 9.86 MB of the baseline version to 1.96 MB for the progressive version - a reduction of more than 80%. (Admittedly this is an extreme example. But for me the tool has consistently produced double-digit reductions in file size.)
RIOT has plenty of bells and whistles I haven't gotten into here. It can open many file types including PSD and RAW; optimize them and save as JPEG, GIF or PNG; do batch processing; change color depth, brightness, contrast, gamma; pan, zoom, rotate, flip; etc., etc.
And RIOT can be installed as a plug-in to image editors IrfanView, XnView and GIMP.
Make Google and your users happy - start creating progressive versions of your heaviest image files.
Follow this link for more information about - and an opportunity to get a free consultation on - optimizing your website for Google organic search (SEO).