November 7, 2022

What is a progressive JPEG and how can it be useful for websites?

Let's see what are the advantages of a progressive JPEG and the difference between a normal JPEG.

Did you know that slow loading times are one of the most common challenges for having a good User Experience? Here are some techniques to speed up load times and make your website much more intuitive.

The JPEG image format is one of the image formats most commonly used on the Web. The format is often used for colorful and complex images such as photographs. The JPEG specification includes a range of valid file extensions, however the most common are .jpg and .jpeg.

JPEG stands for Joint Photographic Experts Group and was developed especially for photos. JPEG will compress a photo or image with gradations more efficiently than PNGS. When saving JPEG files, you can save the image with different quality levels to reduce the file size. As mentioned, you can save the photo as a JPEG or progressive JPEG depending on your audience and goal. You may also see references to JPEG2000, although this format has better compression, it is not supported by all browsers.

Regardless of the extension used, all JPEG images will be treated in much the same way. Although not all JPEG images are created equally. There is a lesser known setting in specifying image formats. This setting, called Progressive Mode, can dramatically improve the experience of using JPEG files on the web.

Normal JPEG vs Progressive JPEG

The biggest defining factor of an image format is generally compression - methods vary widely. In fact it is what makes some formats more suitable than others depending on how the image is used. Even within the JPEG format you can get extremely variable results depending on the export settings used.

In most imaging programs, the type of JPEG created when saving would be considered “Baseline”. To be brief, the best way to imagine baseline or baseline mode is for the image to start from the top and be interpreted line by line. Moving the image down each line of pixels at a time as it compresses and / or displays the image.

For those who still remember the fundamentals of old GIFs. Progressive JPEG format can be understood as the equivalent of Intelaced GIF format.

An interlaced GIF does not show its scan line linearly from top to bottom, but instead rearranges it so that the content of the GIF becomes clear even before it finishes loading. For example, the GIF viewer can display lines at the top of the image, then in the center, then at the end, and will continue to fill in the blanks until the image is fully loaded.

 

Progressive JPEGs are similar to interlaced GIFs, but their rendering scheme is generally superior to that used with GIFs. With some applications it is also possible to change the order in which scanlines are displayed. Unlike interlaced GIFs, progressive JPEGs are often smaller than their basic counterparts.

The trade-off here is that it only loads some of the image data at a time. This means that the image will load at full size with a pixelated appearance and will become clearer as it loads.

See it in action

Sometimes the best way to understand something is to see it in action. So that's exactly what we're going to do here, we'll have the exact same image saved as both types of JPEGs to compare.

So let's start by taking a high quality image to test with; in our case we will use a Pexels photo of some sleeping kittens. Since this is a high resolution image, we will resize it a bit before our test, so we will resize it by about half. Now that it has been resized, we will export two versions of the image, one in baseline and one progressive. (Both images will use the exact same settings other than this option, and we're using GIMP to create the images.)

NORMAL JPEG

PROGRESSIVE JPEG

So even though these images are quite large, it is sometimes difficult to see the difference in their upload process. Below each image is a “timeline” view of how the image is loaded over time. Keep in mind that the timeline visualization provided is heavily dramatized to illustrate the idea. If you were to load the page without  no local cache, you may actually see this behavior when loading images!

Advantages of progressive JPEG

On a website, progressive JPEG can improve the user experience. Although blurry, visitors can already see the entire image at first glance. Additionally, being generally smaller in size, progressive JPEG can also reduce the use of resources such as bandwidth and disk space, helping your website load faster.

Popular browsers, such as Firefox and Chrome, also support progressive images. But if you are using an older version of Internet Explorer (before Windows 7), be sure to install the latest update to enable the feature.

Conclusion

If you want the images on your website to load faster, it is best to change them to the progressive JPEG format even if you use modern formats like webp or AVIF you'll always have to serve old JPEG formats as fallbacks for browsers that don't yet support them.

 

Do you have doubts? Don't know where to start? Contact us!

We have all the answers to your questions to help you make the right choice.

Chat with us

Chat directly with our presales support.

0256569681

Contact us by phone during office hours 9:30 - 19:30

Contact us online

Open a request directly in the contact area.

INFORMATION

Managed Server Srl is a leading Italian player in providing advanced GNU/Linux system solutions oriented towards high performance. With a low-cost and predictable subscription model, we ensure that our customers have access to advanced technologies in hosting, dedicated servers and cloud services. In addition to this, we offer systems consultancy on Linux systems and specialized maintenance in DBMS, IT Security, Cloud and much more. We stand out for our expertise in hosting leading Open Source CMS such as WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart and Magento, supported by a high-level support and consultancy service suitable for Public Administration, SMEs and any size.

Red Hat, Inc. owns the rights to Red Hat®, RHEL®, RedHat Linux®, and CentOS®; AlmaLinux™ is a trademark of AlmaLinux OS Foundation; Rocky Linux® is a registered trademark of the Rocky Linux Foundation; SUSE® is a registered trademark of SUSE LLC; Canonical Ltd. owns the rights to Ubuntu®; Software in the Public Interest, Inc. holds the rights to Debian®; Linus Torvalds holds the rights to Linux®; FreeBSD® is a registered trademark of The FreeBSD Foundation; NetBSD® is a registered trademark of The NetBSD Foundation; OpenBSD® is a registered trademark of Theo de Raadt. Oracle Corporation owns the rights to Oracle®, MySQL®, and MyRocks®; Percona® is a registered trademark of Percona LLC; MariaDB® is a registered trademark of MariaDB Corporation Ab; REDIS® is a registered trademark of Redis Labs Ltd. F5 Networks, Inc. owns the rights to NGINX® and NGINX Plus®; Varnish® is a registered trademark of Varnish Software AB. Adobe Inc. holds the rights to Magento®; PrestaShop® is a registered trademark of PrestaShop SA; OpenCart® is a registered trademark of OpenCart Limited. Automattic Inc. owns the rights to WordPress®, WooCommerce®, and JetPack®; Open Source Matters, Inc. owns the rights to Joomla®; Dries Buytaert holds the rights to Drupal®. Amazon Web Services, Inc. holds the rights to AWS®; Google LLC holds the rights to Google Cloud™ and Chrome™; Microsoft Corporation holds the rights to Microsoft®, Azure®, and Internet Explorer®; Mozilla Foundation owns the rights to Firefox®. Apache® is a registered trademark of The Apache Software Foundation; PHP® is a registered trademark of the PHP Group. CloudFlare® is a registered trademark of Cloudflare, Inc.; NETSCOUT® is a registered trademark of NETSCOUT Systems Inc.; ElasticSearch®, LogStash®, and Kibana® are registered trademarks of Elastic NV Hetzner Online GmbH owns the rights to Hetzner®; OVHcloud is a registered trademark of OVH Groupe SAS; cPanel®, LLC owns the rights to cPanel®; Plesk® is a registered trademark of Plesk International GmbH; Facebook, Inc. owns the rights to Facebook®. This site is not affiliated, sponsored or otherwise associated with any of the entities mentioned above and does not represent any of these entities in any way. All rights to the brands and product names mentioned are the property of their respective copyright holders. Any other trademarks mentioned belong to their registrants. MANAGED SERVER® is a trademark registered at European level by MANAGED SERVER SRL, Via Enzo Ferrari, 9, 62012 Civitanova Marche (MC), Italy.

JUST A MOMENT !

Would you like to see how your WooCommerce runs on our systems without having to migrate anything? 

Enter the address of your WooCommerce site and you will get a navigable demonstration, without having to do absolutely anything and completely free.

No thanks, my customers prefer the slow site.
Back to top