Optimize WordPress images – in 15 steps

Optimized images are crucial to the performance of your WordPress website.

But image optimization doesn't end with Photoshop. In this guide, you'll learn how to effectively optimize your images for WordPress to reduce loading times and improve your SEO.

1. Choose an image optimization service

Choosing the right image optimization service is crucial to ensuring all possible image optimizations. Different services offer different features such as caching, image compression, and content delivery networks (CDNs).

Recommended combinations:

• FlyingPress + FlyingCDN: Easy to use, supports preloading of above-the-fold images and lazy loading of background images.
• FlyingPress + Cloudflare Pro: Includes Mirage, Polish and APO for comprehensive image optimization.
• FlyingPress + Cloudflare Enterprise on Rocket.net: Offers robust image optimization features and fast servers.

Advantages of image CDNs over plugins:

• Fewer plugins required, keeping the website leaner.
• No additional memory load.
• Automatic resizing for mobile devices.
• Avoid increased memory consumption.

Examples of good image CDNs:

• BunnyCDN's Bunny Optimizer
• Imagify
• Cloudflare Mirage/Polish
• QUIC.cloud
• ShortPixel + Adaptive Images

2. Scale images to correct dimensions

Make sure your images have the correct dimensions to avoid unnecessary loading times.

Example of a dimension table:

Resizing tools:

• Canva: Easily scale images to suit your needs.
• Zoom Chrome Extension: Precisely capture screenshots in the required dimensions.
• GIMP: Crop and edit images as needed.

3. Scale images for mobile devices

Optimization for mobile devices is essential to ensure good loading speed and user experience.

Recommendations:

• Use image CDNs like Cloudflare Image Resizing or Bunny Optimizerthat offer automatic resizing for mobile devices.
• Alternatively, you can ShortPixel Adaptive Images that also supports mobile resizing.

4. Compression to 85%

Compressing images reduces file size without significant loss of quality.

Why 85%?

• Lighthouse tests images at 85% compression, so this is the recommended value.
• Reduces server load and improves loading times.

Tip: Compress your images before uploading to reduce the load on the server.

5. Use WebP or convert it manually

WebP is a modern image format that offers up to 50% smaller file sizes compared to PNG.

Advantages of WebP:

• Faster loading times.
• Better compression without loss of quality.

Implementation:

• Automatically: Many image CDNs and plugins automatically convert images to WebP.
• Manually: Use tools like WebP Converter For Media or WebP Express for manual conversion of important images.

Examination:

• Open your website in the Chrome Dev Tools and check the image type in the Network tab.

Example:

6. Preload above-the-fold images

Above-the-fold images are the first images a visitor sees. These should be preloaded to improve the Largest Contentful Paint (LCP).

Methods:

• Manually: Add preload-Instructions for these images.
• Automatically: Use the “Preload Critical Images” setting in plugins like FlyingPress or Performance Matters.

7. Exclude above-the-fold images from lazy loading

Since above-the-fold images are immediately visible, they should not be delayed in loading.

Implementation:

• FlyingPress and Performance Matters offer settings to exclude a specific number of images.
• WP Rocket: Requires additional steps to exclude specific images from lazy loading.

8. Lazy load wallpapers (or exclude them)

Background images aren't lazy loaded by default because they're loaded via CSS. However, you can lazy load them using special classes.

Solutions:

• Use the lazy-bg-Class in plugins like FlyingPress, Elementor, SG Optimizer or Optimole.
• If not supported, add your own CSS classes.

Example:

.lazy-bg {
  /* CSS for lazy loading of background images */
}

9. Specify dimensions

Setting widths and heights for images prevents layout shifts and improves loading speed.

Example:

A notice: Most cache plugins like Performance Matters automatically add missing image dimensions.

10. Set cache expiration to 1 year

Since images rarely change, Google recommends setting the browser caching duration to one year (31536000 seconds).

Implementation:

• Cloudflare: Configure the cache settings accordingly.
• Hosting Control Panel: Look for “Cache Expiration” or similar settings and set it to 1 year.

Example for Nginx:

location ~* .(jpg|jpeg|png|gif|webp|svg)$ {
    expires 365d;
    add_header cache control "public, max-age=31536000, immutable";
}

11. Disable hotlinking

Hotlinking prevents other websites from loading your images directly from your server, saving your server resources.

Implementation:

• Cloudflare: Enable hotlink protection in the settings.
• Hosting Dashboard: Many hosting providers offer options to disable hotlinking.

12. Use local YouTube thumbnails

When embedding videos, external requests to i.ytimg.com affect loading speed. Use local placeholder images.

Solution:

• FlyingPress: Allows local hosting of YouTube placeholder images.

13. Use local avatars

Comments may contain external requests for gravatar.com Local avatars reduce these requests.

Implementation:

• Use plugins like Simple Local Avatarsto host avatars locally.
• Delay the comments section or use native CSS comments for better performance.

14. Remove EXIF data

EXIF data contains metadata such as the time a photo was taken. This data can be removed to reduce file size.

Tools:

• ShortPixel: Automatically removes EXIF data during image optimization.

15. Reduce quality on slow connections

For visitors with slow internet connections, the image quality may be reduced to improve loading times.

Solutions:

• Optimole and Cloudflare Mirage offer network-based optimizations that adjust image quality depending on connection speed.

Frequently Asked Questions (FAQs)

How do I optimize images for WordPress?

Effective image optimization combines image CDNs or image optimization plugins with caching plugins. Pay attention to image compression, modern formats (like WebP), mobile resizing, and preloading above-the-fold images.

How do I compress images in WordPress?

Image compression can be achieved with plugins, but image CDNs are preferable as they don't place additional load on the server. The recommended compression level is 851 ppi.

What is the best free image optimization plugin?

Optimole and ShortPixel are two of the best free image optimization plugins that offer advanced features like lazy loading of background images.

Which CDN should I use to optimize images?

Cloudflare with Mirage and Polish as well as BunnyCDN's Bunny Optimizer offers excellent image optimization features and a large, fast network.

How do I preload LCP images in WordPress?

Use the “Preload Critical Images” setting in plugins like FlyingPress or Performance MattersSpecify the number of typically above-the-fold images to preload.

How do I optimize images for mobile devices?

Use image CDNs like Cloudflare Image Resizing or Bunny Optimizerthat offer automatic resizing for mobile devices.

How do I serve images in WebP format?

Use image CDNs or plugins like WebP Converter For Media or WebP Expressto automatically convert images to WebP. Alternatively, you can manually convert and upload important images.

How do I optimize background images?

Background images loaded via CSS should be created using special classes such as lazy-bg lazy loading or excluded from lazy loading. Use settings in plugins like Performance Matters or FlyingPress.

Is Photoshop enough to optimize images?

No, Photoshop can adjust the size and compression of images, but it cannot perform further optimizations such as lazy loading, preloading, or mobile resizing.

How do I optimize images without WordPress plugins?

Use image CDNs that offer image compression, modern formats, and mobile resizing without additional plugins.

How do I host external images locally?

Use plugins like FlyingPress for YouTube thumbnails or Simple Local Avatars for avatars to host external images locally.

By implementing these image optimization strategies, you can significantly improve the performance of your WordPress website, reduce loading times, and provide a better user experience.