InfoPhilic How to How to make progressive images to increase site speed

How to make progressive images to increase site speed

A picture says thousands of words. A well-constructed image shows that the product is best in it by influencing users. In other words, images bring life, emotions to your website.

The first and most apparent purpose of images in web design is to make the website look good. In my opinion, a website with no pictures just doesn’t look right.

The science behind using images on your site:

Our minds react differently to visual stimuli because the human brain deciphers image elements instantly, while language is decoded in a linear, sequential manner taking more time to process. Studies tell us that 90% of information transmitted to the brain is visual, and visuals are processed 60,000 times faster in the brain than text.

While using images, it is also essential to maintain image SEO. Google likes it when you optimize your images. That’s why optimizing your images with SEO is essential.

There’s almost nothing better than an ideal image to draw the eye to where you want it to go. That’s why more than two-thirds of the web’s data is comprised of images.

But using images is also a challenge. It requires significant processing power for large images for small devices. In this situation, making images progressive is the only solution that comes in handy.

Hey! Hey! Hey! Wait!

What is mean by Progressive images?

You might have seen a beautiful image loading effect. First, load a small blurry image, then small black n white, and then transition to the color image. Such images are progressive images.

A “progressive” image starts off low-resolution and progressively enhances itself over time.

It is a method to smartly load the images using small placeholders while the original image is being lazy-loaded. When it finishes, do a soft transition from the placeholder to the original picture.

How Progressive images help to maintain site speed?

Using progressive images on your site makes the page load faster and using fewer resources, as you load images with original size only after the first render and only what the images which the user can see at the moment.

Along with better visual experience, progressive images are 2% to 10% smaller in size compared to standard images. Using such images means:

  • Your requests to the server will be shorter and more efficient.
  • Progressive images reduce server bandwidth and disk space usages.
  • An overall better visual experience and faster load times even on small devices.

There are different methods to make image progressive. But, in this guide, I will share only the one most comfortable way, and that is using Adobe Photoshop.

Here are a few steps you have to follow:

  • Open Adobe Photoshop.
  • Open an image.
  • Go to File >> Save for web or hit Alt+Shift+Ctrl+S
Save for web option in Adobe Photoshop
Save for web option in Adobe Photoshop.
  • Choose JPEG from the optimization format menu.
  • Select compression level by choosing a quality option (low, medium, or high); I will recommend to keep it high for a more detailed preserved optimized image.
  • Select Progressive to display the image progressively in a web browser.
Progressive Image configuration in Adobe Photoshop
Progressive Image configuration in Adobe Photoshop
  • To save your optimized image, click OK. In the Save Optimized As dialog box, type a filename and click Save.


Undoubtedly, you can go via coding or image optimization plugins also. But, I believe that your creativity means putting your imagination in your work. If you can think it, then you can make it. Also, check these tips to Speed Up WordPress Performance.

I hope you found this article excellent. Share your views with me in the comment section below.

Amit Malewar
Amit Malewar has been the tutorial writer since 2013. His passion for helping people in all aspects of technology flow through the expert coverage he provides. In addition to writing for InfoPhilic, Amit loves to read and try new things.

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.


Please enter your comment!
Please enter your name here

Join InfoPhilic Community!

Let's build a community (Facebook Group) to help & encourage each other to grow!


Get almost 100% PageSpeed on Newspaper theme

The newspaper theme is the most popular premium theme for a self-hosted WordPress blog. The theme is developed by team tagDiv. You...

How to Remove jQuery Migrate in WordPress?

Learn how to remove jQuery Migrate from your WordPress site.

How to configure WP-Rocket plugin for WordPress site

When it comes to optimizing your website, the role of caching in WordPress can never be underestimated. What exactly is caching all about?...

Xperia Home Launcher: Install on any Android Device (No Root)

Hey, guys today through this tutorial you are going to learn how to install Xperia Home Launcher on any Android device without any root. Also...

How to Delete Multiple Images in WordPress Media Gallery

Hey, guys today one of my friends asked me a question, How can I delete Multiple Images in WordPress? I replied, "It's very simple." Yeah,...


Start your blog or website with Dreamhost

Learn how to start your WordPress blog with Dreamhost hosting. Discover the steps it takes to create a blog in 2020.

Start WordPress Blog: Ultimate Guide For Beginners

Here is our step by step guide for beginners to start a WordPress blog.

Top 6 Best WordPress Theme Frameworks

There are many websites themes which are created by using a framework. Likewise, WordPress Theme frameworks also becoming so popular. The framework allows you...

The Most Essential WordPress Plugins

Here, I have listed some excellent plugins which will surely add more features and new functionality to your WordPress blog.

Tips to Speed Up WordPress Performance

Here, I am sharing some tips to speed up WordPress performance. All you need to modify .htaccess file on your server and add some plugins.

The Ultimate Guide to Harden WordPress Security

Learn how to improve WordPress security. Here are some basic security concepts that will help you to harden WordPress security.

How to Setup CloudFlare Free SSL for WordPress Blog

Google has announced that they will count HTTPS as a ranking factor which means if you using HTTPS you will get a higher position...