Images are an essential part of any website—but they’re also one of the biggest culprits when it comes to slow load times. For WordPress site owners, image optimization isn’t just a nice-to-have—it’s critical for performance, SEO, and user experience.
Modern image formats like WebP and AVIF, along with lazy loading, can dramatically reduce page load times, improve mobile experiences, and boost Core Web Vitals. WordPress has made great strides in supporting these features, but to get the most out of them, developers need to understand how and when to use each.
In this post, we’ll break down how modern image optimization works in WordPress, explore the benefits of new image formats, and show you how to implement these techniques for blazing-fast websites.
What Is Image Optimization?
Image optimization is the process of reducing image file sizes without compromising visible quality. Smaller image files mean:
- Faster load times
- Better SEO rankings
- Lower bounce rates
- Happier users
What Are WebP and AVIF?
WebP
Developed by Google, WebP provides superior compression compared to JPEG and PNG. It supports transparency and animation, making it a versatile replacement.
AVIF
AVIF is even newer and often outperforms WebP in file size and quality. It uses the same compression tech found in AV1 video, offering impressive gains.
What Is Lazy Loading?
Lazy loading defers loading images until they enter the viewport. Instead of loading all images at once, the browser waits until the user scrolls to each image. WordPress 5.5+ includes this behavior by default using the loading="lazy" attribute.
Browser Support and Fallbacks
- WebP: Supported by all major browsers.
- AVIF: Supported by Chrome, Firefox, and Opera; partial Safari support as of now.
- Fallbacks are still needed for maximum compatibility.
Use the <picture> element to serve modern formats and gracefully fall back:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>WordPress Support for WebP
As of WordPress 5.8, WebP is natively supported in the Media Library. You can upload .webp files just like JPEGs or PNGs.
For automatic conversion, use plugins like:
- ShortPixel
- EWWW Image Optimizer
- Imagify
AVIF Support in WordPress
AVIF is not yet natively supported in WordPress. To use AVIF:
- Convert images manually using tools like Squoosh
- Upload via FTP or custom uploader.
- Use
<picture>elements with proper fallbacks.
You can also enable AVIF support via plugin filters or by extending MIME types:
function enable_avif_upload($mime_types) {
$mime_types['avif'] = 'image/avif';
return $mime_types;
}
add_filter('upload_mimes', 'enable_avif_upload');Customizing Lazy Loading in WordPress
By default, all images inserted into content get the loading="lazy" attribute. To disable lazy loading for specific images:
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
if ($context === 'custom-logo') {
return false;
}
return $value;
}, 10, 3);You can also use JavaScript-based lazy loading libraries for more control, though native lazy loading is usually sufficient.
Converting JPEG to WebP Automatically (Plugin-Based)
With the ShortPixel plugin, you can convert JPEGs to WebP on upload:
- Install the plugin
- Enable “WebP Images” under settings
- Automatically serve WebP if browser supports it
Register AVIF Support via PHP
add_filter('upload_mimes', function($mimes) {
$mimes['avif'] = 'image/avif';
return $mimes;
});Manual Lazy Loading with <img> Tags
<img src="photo.jpg" alt="Beach" loading="lazy">This is automatically added by WordPress, but you can override it with a custom theme or plugin if needed.
Best Practices
Choose the Right Format
| Use Case | Recommended Format |
|---|---|
| Photographs | WebP or AVIF |
| Transparency | WebP or PNG |
| Icons/Vectors | SVG |
| Maximum Compression | AVIF |
Compress Before Upload
Even with format changes, compression is key. Use tools like:
Use Descriptive, SEO-Friendly Filenames
Good: blue-running-shoes-webp.webp
Bad: IMG_9834.webp
Test Performance Regularly
Use tools like:
- Google PageSpeed Insights
- WebPageTest.org
- Lighthouse in Chrome DevTools
Conclusion
Modern image optimization in WordPress isn’t just about shrinking file sizes—it’s about choosing the right formats, using lazy loading smartly, and delivering the best experience across devices and browsers.
By leveraging WebP, AVIF, and lazy loading, you can make your WordPress site faster, more efficient, and more competitive in search rankings.
How Sitebox Helps
Managing image formats, testing performance across environments, and deploying optimized assets can be tricky—especially across dev, staging, and production.
Sitebox simplifies modern image optimization by:
- Offering environment-based asset testing, so you can check how AVIF or WebP behaves across different scenarios before going live.
- Supporting Git-based configuration, letting you version control media settings like MIME types and lazy loading behaviors.
- Enabling containerized WordPress instances, so you can test optimization plugins or performance changes in isolation.
Whether you’re rolling out AVIF across a network or fine-tuning your lazy loading strategy, Sitebox gives you confidence and control.
👉 Try Sitebox free and build faster WordPress sites with modern optimization tools
