I originally wrote the first version of this article in 2020, when Lighthouse and Google PageSpeed Insights were aggressively encouraging websites to “serve images in next-gen formats.” At the time, WebP support was still uneven across browsers and WordPress did not yet support WebP uploads natively.
Today, image optimization has become even more important because websites are now evaluated through performance systems like Core Web Vitals, mobile rendering metrics, responsive loading behavior, accessibility, and real-world user experience.
Images are no longer just decoration. They are part of website performance architecture.
What Is WebP?
WebP is an image format developed by Google that supports both lossy and lossless compression. The goal of WebP is simple: reduce file sizes while maintaining visual quality.
Smaller images generally load faster, consume less bandwidth, and reduce the amount of work required by browsers and devices to render a webpage.
Compared to older image formats:
- WebP lossless images are often significantly smaller than PNG files.
- WebP lossy images are often smaller than comparable JPEG files while maintaining similar visual quality.
When I originally wrote this article in 2020, Lighthouse and PageSpeed Insights were constantly flagging websites that were not using next-generation image formats.
The recommendation mattered then and it still matters now, although the broader conversation has evolved beyond “just use WebP.”
Why Image Formats Matter
Image formats affect:
- Page load speed
- Mobile usability
- Bandwidth usage
- Core Web Vitals
- Rendering stability
- Battery consumption on mobile devices
- User perception of responsiveness
- Accessibility and readability
Large unoptimized images are one of the most common reasons websites feel slow.
And the problem is often not just “internet speed.”
Modern websites must also account for:
- CPU limitations on mobile devices
- Memory limitations
- Mobile network instability
- Image decoding costs
- Layout shifts during rendering
That is why image optimization is not just an SEO discussion anymore. It is a usability discussion.
Lossy vs. Lossless Compression
Lossy and lossless compression describe whether image data is permanently removed during compression.
Lossless Compression
Lossless compression reduces file size without permanently discarding image data. When decompressed, the original image can theoretically be reconstructed exactly.
Lossless formats are useful for:
- Logos
- Interface elements
- Graphics with sharp edges
- Images requiring transparency
- Artwork where detail preservation matters
Lossy Compression
Lossy compression permanently removes some image data in exchange for much smaller file sizes.
When done carefully, the quality loss may be difficult to notice visually while dramatically reducing file size.
Lossy compression is often useful for:
- Photographs
- Large hero images
- Blog images
- General content imagery
The challenge is balance. Overcompression can introduce:
- Blur
- Artifacts
- Banding
- Texture loss
- Color degradation
- Posterization
Good optimization reduces unnecessary data without destroying the visual experience.
WebP & SEO
Why does image optimization matter for SEO?
Because faster websites generally create better user experiences.
Search engines increasingly evaluate websites using signals tied to usability and performance. Slow-loading media can negatively affect:
- Largest Contentful Paint (LCP)
- Interaction responsiveness
- Mobile experience
- Crawl efficiency
- User retention
Image optimization alone will not make a weak website rank well, but large unoptimized images can absolutely hold a strong website back.
This becomes especially important on mobile devices, where:
- network quality may fluctuate,
- processing power is lower,
- and rendering resources are more limited.
Years ago, many websites were still serving giant desktop-sized images directly to phones. Some still are.
Modern SEO requires thinking about real-world rendering conditions, not just desktop internet connections.
Images & Core Web Vitals
Images directly affect Core Web Vitals.
Largest Contentful Paint (LCP)
Large hero images are frequently the largest visible element on a page. If those images are oversized or poorly compressed, LCP can suffer significantly.
Cumulative Layout Shift (CLS)
Images without defined width and height attributes can cause layout shifting during page load.
This creates visual instability as the browser recalculates layout space while the page renders.
Always define image dimensions whenever possible.
Interaction & Rendering
Heavy image payloads can increase rendering and decoding costs, especially on lower-powered devices.
This is one reason optimization matters beyond raw file size.
Modern Image Formats
Modern websites typically use several image formats together depending on the use case.
JPEG
- Still widely used
- Good for photographs
- Excellent compatibility
- Larger files compared to newer formats
PNG
- Useful for transparency
- Sharp graphics and interface elements
- Can become extremely large for photographs
WebP
- Strong all-around modern format
- Smaller files than JPEG/PNG in many cases
- Supports transparency
- Excellent browser support today
AVIF
- Often even smaller than WebP
- Very efficient compression
- Increasingly important for high-performance sites
- Can require more processing power to decode
SVG
- Vector-based
- Excellent for icons, logos, diagrams, and UI graphics
- Scales perfectly at any size
GIF
GIFs are increasingly being replaced by lightweight video formats for animation because video compression is often far more efficient.
Responsive Images & Mobile Devices
Modern websites should not serve the exact same image to every device.
A properly responsive image system can deliver:
- smaller images to phones,
- larger images to desktops,
- and optimized resolutions based on screen density.
This is one reason WordPress image handling improved significantly over time. Modern WordPress installations automatically generate multiple image sizes and use responsive image attributes behind the scenes.
That matters because a mobile device usually does not need a gigantic desktop-resolution image.
Lazy Loading & Rendering
Lazy loading delays image loading until an image approaches the visible viewport.
This can dramatically improve:
- initial page load speed,
- bandwidth usage,
- and rendering performance.
But lazy loading should be used carefully.
For example, critical above-the-fold hero images often should not be lazy loaded because doing so can delay Largest Contentful Paint.
Optimization is always contextual.
Accessibility & Image SEO
Image optimization is not only about speed.
Accessibility matters too.
Useful image practices include:
- descriptive alt text,
- logical image placement,
- proper contrast,
- responsive sizing,
- and avoiding unnecessary visual clutter.
Alt text should describe the purpose of the image honestly and clearly.
Good alt text helps:
- screen reader users,
- search engines,
- image indexing systems,
- and situations where images fail to load.
Related reading: WordPress Media SEO: How to Optimize Images and Videos.
Compression vs. Visual Integrity
This is the part many image optimization articles ignore.
Compression should not destroy the emotional or visual quality of meaningful imagery.
There is a difference between compressing:
- a UI icon,
- a product thumbnail,
- and expressive artwork or photography.
Overcompression can flatten gradients, destroy texture, damage subtle lighting, and reduce the emotional quality of an image.
Optimization should support presentation, not erase it.
That balance matters especially for:
- artists,
- photographers,
- designers,
- and visually expressive websites.
The best image optimization workflows preserve visual integrity while reducing unnecessary payload.
WordPress & WebP Support
When I originally wrote this article, WordPress did not yet support WebP uploads natively.
That has changed.
Modern WordPress installations now support WebP directly, and many hosting providers, caching systems, CDNs, and optimization plugins automatically generate optimized image formats.
Common optimization systems now include:
- Cloudflare image optimization
- WordPress caching plugins
- CDN image rewriting
- responsive image generation
- automatic compression pipelines
Most modern websites no longer need complicated browser-specific image delivery logic just to support WebP.
Browser support is now excellent across modern browsers, including Safari.
Modern Recommendations
For most websites today:
- Use WebP or AVIF where practical.
- Keep original high-quality source files archived.
- Resize images before uploading whenever possible.
- Define width and height attributes.
- Use responsive image sizing.
- Compress intelligently instead of aggressively.
- Use SVG for logos and simple graphics.
- Avoid giant PNG photographs.
- Use lazy loading thoughtfully.
- Write meaningful alt text.
- Test real pages using Lighthouse and PageSpeed Insights.
You can test websites using:
Final Thoughts
When Lighthouse first started heavily encouraging “next-gen image formats,” many people treated it like another technical SEO checkbox.
But image optimization is larger than that.
Images affect:
- speed,
- clarity,
- accessibility,
- rendering stability,
- mobile usability,
- and how a website feels to real people.
Good image optimization is not about squeezing every file into the smallest possible size regardless of quality.
It is about balancing:
- performance,
- visual integrity,
- usability,
- accessibility,
- and presentation.
Modern SEO increasingly rewards websites that are understandable, usable, stable, and respectful of the user’s device and bandwidth.
Image optimization is part of that larger philosophy.
Originally published in 2020. Expanded and updated for modern image delivery, Core Web Vitals, responsive rendering, accessibility, and modern browser support.
Author: Stephen AND Lucent