Advanced Search

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

Progressive JPEGs improve speed and usability especially on mobile devices

Find out how an SEO Audit can help your website load faster to get more traffic, new customers and bigger sales.

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.

Follow this link for more information about - and an opportunity to get a free consultation on - optimizing your website for Google organic search (SEO).

Share this article:

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


David Boggs MS    - David
David@DavidHBoggs.com
View David Boggs's profile on LinkedIn

Google Certifications - David H Boggs
View my profile on Quora
Subscribe to my blog

External Article: https://riot-optimizer.com/


Subhead Progressive JPEGs improve speed and usability especially on mobile devices
Rating
4/5 based on 1 vote.
Show Individual Votes
Related Listings

Sorry, you don't have permission to post comments. Log in, or register if you haven't yet.

Please login or register.

Members currently reading this thread: