Use progressive JPEGs to reduce loading times of your web pages
By
23 July 2019 (Edited 23 July 2019)

Subscribe to my blog

Share This Article


Source: David|23 July 2019

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:

  1. Actual faster loading, because better compression gives progressive JPEGs smaller file size, and
  2. 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.


If you found this article helpful and would like to see more like it, please share it via the Share This Article link at the top of the page.

And if you have questions or comments, you can easily send them to me with the Quick Reply form, below.


David Boggs    - David
View David Boggs's profile on LinkedIn

Google Certifications - David H Boggs
Subscribe to my blog

   
Subhead Progressive JPEGs improve speed and usability especially on mobile devices
Rating
4/5 based on 1 votes.
Show Individual Votes
Tags , , , , , ,
Related Listings
External Article: https://riot-optimizer.com/


E-mail:
Quick Reply
Name:
E-mail:
Subscribe to my blog:
Your Comment:


You may use BB Codes in your message.
Spam Prevention:


Members currently reading this thread:

Previous Article | Next Article