{"id":692,"date":"2019-12-13T08:37:32","date_gmt":"2019-12-13T08:37:32","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/websiteimproving-website-performance-using-progressive-jpeg-images\/"},"modified":"2023-05-02T11:10:43","modified_gmt":"2023-05-02T11:10:43","slug":"websiteimproving-website-performance-using-progressive-jpeg-images","status":"publish","type":"post","link":"\/my\/tutorials\/website\/improving-website-performance-using-progressive-jpeg-images","title":{"rendered":"Progressive JPEG images: What Is It and How It Can Improve Website Performance"},"content":{"rendered":"

A progressive JPEG image is encoded differently than a standard or baseline JPEG image. It loads in successive waves until a clear picture is formed. This can improve a website’s performance as the images seems to be loading faster.<\/p>

\"\"<\/a><\/figure>

\n\n\n\n\n\n\n<\/p>

The Difference Between Baseline JPEG and Progressive JPEG<\/h2>

Baseline JPEG and progressive JPEG differs in the way it compresses and displays images — especially if you have a slow internet connection<\/p>

The standard JPEG format loads images one line at a time, from top to bottom, and each line is already pixel perfect. Hence, it can take a while for the picture to load fully.<\/p>

\n
\"Baseline<\/figure>\n<\/div>

As for progressive JPEG, the image appears all at once as a whole, but it’ll be blurry and pixelated a first. Gradually, you will see a clear and fully loaded image.<\/p>

\n
\"Progressive<\/figure>\n<\/div>

Benefits of Progressive JPEG<\/h2>

On a website, progressive JPEG can improve user experience. Although blurry, visitors can already see the entire image at first sight. Plus, generally being smaller in size, progressive JPEG can also reduce resource usages like bandwidth and disk space — helping your website to load faster.<\/p>

Most popular browsers, like Firefox and Chrome, also support progressive images. But if you use an older version of Internet Explorer (before Windows 7), make sure to install the latest update to enable the feature.<\/p>

How to Use Progressive JPEG Images<\/h2>

Here are the steps to optimize your website<\/a> with progressive JPEG images:<\/p>

Step 1: Analyze JPEG Images<\/h3>

To check what type of JPEG images your website displays, you can do a simple analysis with WebPageTest<\/a>:<\/p>

    \n
  1. Paste your site’s URL to the Enter a Website URL<\/strong> box and press Start Test<\/strong>.
    \"Webtest.org<\/li>\n\n\n\n
  2. Once the test runs are complete, go to the Test Results<\/strong> page, then select the Performance Review<\/strong> tab. Scroll down until you find Use Progressive JPEGs<\/strong>. The results will show “FAILED” for Baseline JPEG images, as shown below:<\/li>\n<\/ol>
    \n
    \"Webtest.org's<\/a><\/figure>\n<\/div>

    You will then have to convert them to progressive JPEGs.<\/p>

    Step 2: Convert Images to Progressive JPEG<\/h3>

    There are free software and tools that can do the job. Our recommendations are:<\/p>

      \n
    1. Optimizilla<\/a>
      Other than converting baseline JPEG images to progressive ones, you can also reduce the image size with this tool. It uses the       lossy compression<\/a> technique. Simply go to Optimizila and upload your image — up to 20 images in one session. You can then set the image quality before downloading, but make sure to keep it at 85 or above for better quality.
      \"OptimizillaOnce processed, your image will be both progressive and smaller in size.<\/li>\n\n\n\n
    2. RIOT<\/a>
      RIOT is a free software that has a lot of features when it comes to       image optimization<\/a>. From creating progressive images, adjusting colors, and adding metadata information, everything can be done through its simple interface. You can also convert your image into other different formats<\/a> — JPEG, GIF, and PNG. What’s more, you can see the changes directly, side by side. However, keep in mind that this tool is only available for Windows.
      \"Riot<\/li>\n<\/ol>

      Step 3: Replace Old Images<\/h3>

      After converting, you’ll need to update the images within your site. You can access your hosting’s File Manager<\/a> or use an FTP<\/a> client to locate the existing baseline images. Remove and replace them with the progressive JPEG images.<\/p>

      To avoid technical issues, make sure to use the same file name for every image. Now, test your website again using WebPageTest. If you do the process correctly, you won’t find any baseline JPEG images in the performance result.<\/p>

      \n
      \"Webtest.org's<\/figure>\n<\/div>
      \"Hostinger<\/a><\/figure>

      Conclusion<\/h2>

      If you want the images on your website to load faster, it’s better to change them into progressive JPEG format. It works by loading images in successive waves. You’ll see a blurry or pixelated picture at first, but it’ll clear out.<\/p>

      To see if your website contains baseline JPEG images, you can use the WebPageTest tool. If it does, you can convert them to the progressive format using either Optimizilla or RIOT.<\/p>

      Tell us your thoughts about this tutorial on the comments below!<\/p>

      \n\n\n

      \n
      \n \n \n <\/svg>\n

      \n Learn more about website optimization <\/p>\n <\/div>\n

      How to Serve Scaled Images to Improve Website Performance<\/a>
      \n      What is SEO<\/a>
      \n      How to Perform a Website Speed Test<\/a><\/p>\n <\/div>\n \n<\/p>\n","protected":false},"excerpt":{"rendered":"

      A progressive JPEG image is encoded differently than a standard or baseline JPEG image. It loads in successive waves until a clear picture is formed. This can improve a website’s performance as the images seems to be loading faster. The Difference Between Baseline JPEG and Progressive JPEG Baseline JPEG and progressive JPEG differs in the […]<\/p>\n

      Read More…<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Progressive JPEG: What Is It & How It Can Improve Website Performance","rank_math_description":"Progressive JPEGs may sound foreign to some. Considering its benefit to increase your website performance, you should know more about it.","rank_math_focus_keyword":"progressive jpeg","footnotes":""},"categories":[],"tags":[],"class_list":["post-692","post","type-post","status-publish","format-standard","hentry"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":25,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/692\/revisions"}],"predecessor-version":[{"id":84633,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/692\/revisions\/84633"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/media?parent=692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/categories?post=692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/tags?post=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}