How to make progressive images to increase site speed

A picture says thousand 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 obvious purpose of images in web design is to make the website look good. In my opinion, a website with no images 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 when you optimize your images. That’s why optimizing your images with SEO is important.

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 large 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 nice 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.

Originally, 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 helps 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 normal images. Using such images means:

  • Your requests to the server will be shorter and more efficient.
  • Reduced usage of bandwidth, disk space.
  • 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 easy method 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 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 great. Share your views with me in the comment section below.

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


WP Coupons

The #1 WordPress coupon plugin for affiliate marketers to increase your CTR and conversions!


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


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

How To Edit WordPress .htaccess File

Hello, in my recent tutorials you have learned to tighten blog security and to enable a gzip compression using a .htaccess file on your...

How to Fix Failed to Open Stream Error in WordPress

When WordPress.Org releases a new update to it’s WordPress standalone CMS (Content Management System) for that you may have set your website to get...