Get Started
Get Started
September 25, 2023

How to Make Photos Load Faster on WordPress: 8 Key Tactics

Do you want to make photos load faster on your website? Good thinking! Image optimization is one of the first steps toward a blazing-fast web page. Images are an integral part of your branding, and they are useful to showcase a product, promote a destination, or even create a powerful ad banner. Images and media can also help to explain tough concepts and can be very appreciated on a blog. Sometimes, they are even more important than the text itself! 

The trap you shouldn’t fall into is to use images on your site without optimizing them for the web. In the figure below, you can see that images make up most of the total weight of pages: 

Page weight by content type - Source: httparchive.org
Page weight by content type – Source: httparchive.org

Too many websites still don’t optimize images, resulting in slower loading times. But if you are here, you want to know how to make a website load faster with pictures. And we have your back! We put together 8 applicable tips you can follow to make photos load faster on your site. 

8 Tips to Make Photos Load Faster on Your WordPress Website

To optimize photos for faster loading on WordPress, you can follow the 8 following techniques:

  1. Compress Your Images
  2. Choose The Correct Image Dimensions
  3. Serve Responsive Images
  4. Convert Images to the Best Format
  5. Implement Image Lazy Loading
  6. Enable Browser Caching 
  7. Replace Animated GIFs with Videos
  8. Use an Image CDN

Let’s go over each image optimization technique. For each of them, we will explain the concept and suggest some powerful tools you can use to make your photos load faster. 

1. Compress Your Images 

Image compression is the most efficient technique to reduce your file size and ensure your page loads quickly. There are two types of compression: lossy and lossless. Lossy is the best technique to load the photo on a web page faster. 

When choosing which compression mode you need, the tricky part is to ensure that your file is smaller without losing its quality

👉Let’s go over two different scenarios:

Scenario 1 

The file size is smaller, and even with the lossy compression, the quality remains unchanged. Mission accomplished! 

Compression with unaltered quality with Imagify – Source: Imagify

Scenario 2 

The file size is smaller, which is a good thing for web performance. However, the compression went too far, and the user experience is now impacted:

Overly compressed file with Photoshop - Source: Imagify
Overly compressed file with Photoshop – Source: Imagify
📖 Learn more about the types of compressions in our guide dedicated to lossy vs lossless compression.

Recommended Tools and Plugins to Compress Images 

  • A WordPress plugin like Imagify – one of the easiest image compression plugins on the market that offers Smart and bulk compression. The Smart mode is an algorithm that compresses the image to the maximum without impacting the quality.  If you are a WordPress user, this option is most convenient because the optimization process is made directly within WordPress by the plugin itself. You don’t need to do anything else. 
  • An online tool like Iloveimg or Optimizilla. These are both free online platforms to compress images. The only drawback is that you need to upload your images, download them, and re-upload them to the WordPress library. 
Online image compressor - Source: Optimizilla
Online image compressor – Source: Optimizilla
💡 How Can You Make Multiple Pictures Load Faster On Your Website?
Use an image optimization WordPress plugin like Imagify that offers bulk compression in one click. You can also opt for an online converter to drag-and-drop multiple photos at once. 

2. Choose The Correct Image Dimensions

Another efficient way to make photos load faster on a website is to size them properly for desktop, tablet, and mobile. Images uploaded on your site should be sized based on the screen dimensions they will be displayed on. For example, here are the recommended image dimensions for WordPress:

  • WordPress blog image: 1200×630 pixels
  • WordPress slider’s images: 800×600 pixels 
  • For a single WooCommerce product: 600px width
📖 Read our guide to learn more about the best image size to use on the web.

When you run a performance audit on PageSpeed Insights, you may get the “Properly size images” warning. In that case, you need to work on their dimension: e.g., avoid using the full-size file you have on your computer. 

Properly size images for performance - Source: PageSpeed Insights
Properly size images for performance – Source: PageSpeed Insights

Resizing images is the first step toward reducing the file size, which is important for performance and SEO. It’s not recommended to have the same image size for a logo and a blog post. 

Recommended Tools to Resize Images  

If you are an iOS user: 

  • Preview – the default image software. Select the images, go to Tools > Adjust Size > Image Dimensions
Resizing images with Preview on Mac - Source: Preview
Resizing images with Preview on Mac – Source: Preview
  • Sketch – a powerful design app that allows you to insert responsive web artboards.
Responsive design with Sketch - Source: Sketch
Responsive design with Sketch – Source: Sketch

If you are a Windows user: 

  • The Photos app – the default Windows app to resize images. Click on Resize and add the new width and height.
Resizing images on Windows - Source: XDA
Resizing images on Windows – Source: XDA

Serving images at the right size is crucial for page speed and performance. That is why we have dedicated the next section to responsive images. 

3. Serve Responsive Images

Using responsive images is another optimization technique to serve images faster to the users. Images are responsive when they are optimized for the user’s screen size. In that case, the image will be downloaded at the correct size and quality for the user’s device. As a result, the amount of data downloaded will be reduced, and your performance significantly boosted.  

The best way to make responsive images is to use the “src”, “srcset” and “size” attributes, as shown in the example below:

Responsive images code snippet – Source: Imagify
Responsive images code snippet – Source: Imagify
📖 Want to go further? Check our full guide about how to create and serve responsive images.

4. Convert Images to the Best Format

The best image formats for website speed are next-gen formats like WebP and AVIF. They both provide better compression than the traditional PNG or JPEG, which means faster downloads and less data consumption.

WebP vs Png vs JPEG - Source: Imagify
WebP vs Png vs JPEG – Source: Imagify

Let’s see an example: could you tell which one is WebP and which one is JPEG?

JPEG vs WebP: similar quality but a smaller file size for webP - Source: Imagify
JPEG vs WebP: similar quality but a smaller file size for webP – Source: Imagify

Thanks to the WebP format, the image went from 438 KB down to 202 KB, with the same quality. 

Additionally, if you run a performance audit on PageSpeed Insights, you may come across the following warning: “Serve images in next-gen formats”. 

“Serve images in next-gen formats” to boost performance - Source: PageSpeed Insights
“Serve images in next-gen formats” to boost performance – Source: PageSpeed Insights

You can use the tools below to solve this warning and move it to the passed audit section of PageSpeed Insights:

The Best WebP Converter Tools

  • An image optimization plugin: Imagify – one of the easiest image optimization plugins for WordPress that can compress images and convert them to WebP automatically.
Converting images to WebP in one click - Source: Imagify
Converting images to WebP in one click – Source: Imagify
  • Converter for Media – another converter plugin that can turn your JPEG, PNG, and GIF into WebP. 
Easy WebP conversion - Source: Convertor for media
Easy WebP conversion – Source: Convertor for media

5. Implement Image Lazy Loading

Lazy loading is a technique that loads only images needed in the user’s viewport. Instead of loading everything, the browser does not request the resources located below the fold. 

Lazy-loading to make photos load faster - Source: Imagify
Lazy-loading to make photos load faster – Source: Imagify

Note that applying lazy loading on images solves one of the PageSpeed Insights recommendations named “Defer offscreen images”:

“Defer offscreen images” to boost performance - Source: PageSpeed Insights
“Defer offscreen images” to boost performance – Source: PageSpeed Insights

The Best Lazy Loading Tools

  • Manually – using the <loading=lazy> script on your images
  • a3 Lazy Load – applies lazy loading on images, iframes and also videos.
Lazy loading with the a3 Lazy Load plugin - Source: a3 Lazy Load
Lazy loading with the a3 Lazy Load plugin – Source: a3 Lazy Load 
Lazy loading feature with WP Rocket - Source: WP Rocket
Lazy loading feature with WP Rocket – Source: WP Rocket
Good to know: WP Rocket is also one of the best WordPress cache plugins that optimize your code, your database and boost your Core Web Vitals. Caching is crucial to make photos load faster on WordPress, we go over it in the next section.

6. Enable Browser Caching 

Image caching is one of the most efficient optimization techniques to ensure a fast-loading page with multiple photos. Caching means storing copies of frequently used or static resources on the browser, such as images, scripts, stylesheets, or fonts. As a result, when a user visits your website, they don’t have to download the same resources over again every time. This saves bandwidth and improves the overall loading speed.

Browser caching explained - Source: WP Rocket
Browser caching explained – Source: WP Rocket

Example of Best Plugins to Implement Caching

  • WP Rocket – a cache plugin that implements caching and GZIP compression right upon its activation. No technical settings are ever needed from your side. 
Cache and file optimization with WP Rocket - Source: WP Rocket
Cache and file optimization with WP Rocket – Source: WP Rocket
  • WP Super Cache – created by Automattic themselves, this plugin generates static html files from your dynamic WordPress blog.
Caching options - Source: WP Super Cache
Caching options – Source: WP Super Cache

7. Replace Animated GIFs with Videos

If you convert an animated GIF into a video, you increase your chance of making your site load faster. Why? It’s simple: an .mp4 video file is much lighter than a GIF.

  • GIF file size: 2.6 MB
  • MP4 file size: 749 KB (much lighter)
GIF vs MP4 file size (converted with Convertio) - Source: Imagify
GIF vs MP4 file size (converted with Convertio) – Source: Imagify

The Best Tools to Convert GIF to MP4 

  • Convertio – a free online converter that allows you to convert your GIF to mp4 for free. 
    • Drag-and-drop your GIF
    • Hit the Convert button
Step 1: drag-and-drop your GIF and hit Convert - Source: Convertio
Step 1: drag-and-drop your GIF and hit Convert – Source: Convertio
  • You get the same file in mp4 and much lighter:
Step 2: Converted file to mp4 much lighter- Source: Convertio
Step 2: Converted file to mp4 much lighter- Source: Convertio

8. Use an Image CDN

Another thing that makes photos load faster is using a reliable CDN provider. A CDN aims at serving your images faster to international users and helps fix many PageSpeed Insights issues. It caches your images in proxy servers near your location (Points of Presence). In other words, images will be optimized and served to you faster because they don’t need to be downloaded from the origin server. 

Using a CDN: Images are served through local points of presence to boost performance - Source: Imagify
Using a CDN: Images are served through local points of presence to boost performance – Source: Imagify

An image CDN allows you to resize your images for each type of device (responsiveness), reducing bandwidth consumption and boosting your site’s performance.

Image CDN serving responsive images to boost performance - Source: Imagify
Image CDN serving responsive images to boost performance – Source: Imagify

The Best CDNs You Can Use on WordPress

  • RocketCDN – the easiest CDN to use on the market, which comes with a free plugin that does all the technical settings for you.
+50 PoP locations to deliver your images faster - Source: RocketCDN
+50 PoP locations to deliver your images faster – Source: RocketCDN
  • Cloudflare – one of the most popular CDNs on the market that also helps optimize the latency between the users and the server of the website.

Now that we’ve shared 8 easy tips to optimize your photos for faster loading, we can go over Imagify, an image optimization plugin that is also very easy to use. Let’s see how this tool can help you to improve performance and serve optimized images to your visitors.

How to Optimize Photos for Faster Loading with Imagify (+ Data)

Imagify is an easy-to-use image optimization plugin with powerful optimization features, meaning an improved performance and a better score in the Page Speed Insights (PSI) report. Here’s how Imagify can help to optimize images for a faster loading page:

  1. Smart compression mode: significantly reduced image file while preserving quality
  2. Bulk compression in one click: ideal to compress multiple images at the same time
  3. WebP conversion: easily convert your media to the next-gen format (recommended by Google to boost performance)
  4. Improve the Core Web Vitals and fix the image-related issues on PageSpeed Insights
  5. Bonus: compression tests with Imagify and impact on loading speed

Let’s go over each point so you can see how easy-to-use Imagify is, and the impact image optimization has on performance. And you’ll see a little bonus: we conducted two testing scenarios “before and after” the optimization process.

✅ 1. Smart Compression Mode

Imagify comes with a Smart Compression mode that compresses the image to its maximum and scales back up the compression level until it finds the perfect balance between file size and quality.

Original vs compressed image using smart compression mode: quality of the image is not impacted  - Source: Imagify
Original vs compressed image using smart compression mode: quality of the image is not impacted  – Source: Imagify

✅ 2. Automatic Compression Process: Bulk Optimization in One Click

To compress images with Imagify you can press the bulk compression button (1) from Imagify’s WordPress admin or optimize them one by one from the WordPress library (2).  So, if you are wondering how to make multiple pictures load faster on your website, the bulk feature is perfect for you!

Bulk compression and single image compression with Imagify - Source: Imagify
Bulk compression and single image compression with Imagify – Source: Imagify

✅ 3. WebP Conversion to Boost Performance

Imagify also converts your images to WebP, making them smaller without compromising quality.

Converting images to WebP to boost performance - Source: Imagify
Converting images to WebP to boost performance – Source: Imagify

✅ 4. Improve the Core Web Vitals and Fix the Images-related Issues on PageSpeed Insights

Imagify can also fix the following images-related issues on the PageSpeed Insights audits:

Passed audits - Source: Imagify
Passed audits – Source: Imagify

✅ 5. Bonus: Compression Tests With Imagify and Impact on Loading Speed

Image Compression Test with Imagify
In the example below, the image file size went from 1.6MB to 87KB, which is almost a 90% savings! Imagify also generated the WebP format.

Compressed image - Source: Imagify (source of the image: National Geographic)
Compressed image – Source: Imagify (source of the image: National Geographic)

On top of that, here’s another compression result with a PNG image that was also converted to WebP. Imagify saved 95.94% on the original file size (from 1.90MB to 79.15KB): 

Compressed image (and WebP conversion) at 95.94% - Source: Imagify
Compressed image (and WebP conversion) at 95.94% – Source: Imagify

Important! The file size is much smaller, but the quality has been preserved:

Original vs compressed image with Imagify: same quality - Source: Imagify
Original vs compressed image with Imagify: same quality – Source: Imagify

Page Loading Speed Test

Regarding the page loading speed, here’s a “before and then” comparison from GTMetrix on a test page with 8 images.

Results before Imagify and image optimization:

  • Page speed before Imagify and image optimization: 4.5s
  • Total page size: 3.93MB
  • Images occupied 2.06MB of the total weight
Before compressing images with Imagify - Source: GTmetrix
Before compressing images with Imagify – Source: GTmetrix

Results after Imagify and image optimization:

  • Page speed before Imagify and image optimization: 2.1s
  • Total page size: 822 KB
  • Images occupied 732 KB of the total weight
Total Page Size reduced after compressing images with Imagify - Source: GTmetrix
Total Page Size reduced after compressing images with Imagify – Source: GTmetrix

When we optimized our images using Imagify, we could see the three following benefits on performance:

  1. Faster loading speed (4.5 s → 2.1 s)
  2. Fewer page requests (67 → 15)
  3. Smaller page size (3.93MB → 822 KB) 

Wrapping Up

To make photos load faster on your WordPress site you need to size them properly, serve them in the right format, compress them, apply lazy loading, and use a CDN. Optimizing images is crucial to loading your website faster and improving the user experience. If you don’t know where to begin, you can start this image optimization journey with Imagify. And before installing the plugin on your WordPress site, you can even try the web app for free

Imagify, decrease the size of your images, increase the speed of your website: try it for free
Comments 5
Add Comment

Ready to optimize
your image?
Sign up for free in few seconds