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



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 can buy...

How to Remove jQuery Migrate in WordPress?

Learn how to remove jQuery Migrate from your WordPress site.

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,...

How to setup CloudFlare CDN for WordPress blog

In today's world website speed is a crucial element to getting good ranks on the web. Website speed also aids in indexing your site...

How to Properly Delete a WordPress Post or Page?

You sometimes want to delete a page from your site for many reasons. When you taking a step forward, you are going to remove...


Astra Theme

Looking for a WordPress theme that's fast, elegant & customizable? Meet Astra! It's customizer powered, SEO friendly and compatible with major page builders.