If you’ve ever uploaded a sharp image to WordPress, compressed it to make the page faster, and then noticed that it looks soft, you’re not alone. The problem usually isn’t that you need to choose between speed and quality. It’s that the image may be larger than the page needs, or that the wrong format or compression setting was used for that particular image.
I tested the same image as PNG, JPEG, and WebP to see what changed. Here’s what the numbers tell us—and where they don’t tell the whole story.
A real file-size comparison
I started with one original, digitally created image of a laptop displaying a mountain landscape. I kept its dimensions at 1672 × 941 pixels for every export. The PNG was saved with lossless optimization; the JPEG was progressive and optimized at quality 85; the WebP was saved at quality 85. These are encoding settings, not identical measures of visual quality across formats.
| Format | File size | What I noticed |
|---|---|---|
| Optimized PNG | 1,934 KiB | Keeps the pixels intact, but is much larger for this image. |
| JPEG | 251 KiB | A sensible photographic option at this setting. |
| WebP | 182 KiB | About 28% smaller than this JPEG export. |
The WebP was also about 91% smaller than this PNG. That doesn’t mean WebP always wins by those margins. Our source is a photographic-style illustration; a screenshot with small text, a simple logo, or a different photo may behave differently. The useful lesson is to compare your own images at their actual display size rather than trust a universal “best quality” number. Google’s image-performance guide also recommends checking the visual result instead of relying on one compression setting.
You can inspect the PNG, JPEG, and WebP exports used in this test.
When I would use WebP
For a post’s featured image or a regular photograph, WebP is a strong first choice. It supports both lossy and lossless compression, and WordPress accepts WebP uploads. It often saves bytes compared with an equivalent JPEG, although the exact saving depends on the picture and encoder. WordPress has supported WebP since version 5.8.
I would start with the best original available, resize a copy to a sensible maximum width, export a WebP, then view it at full size and at the size readers will actually see. If fine detail or faces look smeared, raise the quality and compare again. Repeatedly re-encoding an already compressed JPEG won’t recover detail it lost earlier.
When JPEG or PNG still makes sense
JPEG remains perfectly usable for photos. If your existing JPEG looks good and is already reasonably sized, converting it solely to change the extension may bring little benefit. Keep your original, and compare actual file sizes and appearance before replacing anything.
PNG makes sense when preserving exact pixels matters—for example, a screenshot with tiny interface text, a simple graphic with sharp edges, or an image that needs transparency. Lossless WebP can also work for those cases, so try both. For a full-width photographic image, a PNG can be unnecessarily heavy, as the test above illustrates. WebP can handle transparency too; JPEG cannot. Image-format guidance from web.dev explains those trade-offs.
A useful rule is: photos and featured images → try WebP first; screenshots and small text → compare lossless WebP with PNG. Keep JPEG when it already does the job well.
File size isn’t only about format
Before changing formats, check the image’s dimensions. A 4000-pixel-wide upload still contains far more image data than a 1200-pixel-wide article column needs. Exporting an appropriately sized copy can save more than changing the file type alone. WordPress also creates intermediate image sizes when you upload media, which can help it serve a size suited to the layout. WordPress image documentation
For a featured image, choose a large enough source to remain clear on desktop and in social previews, but don’t upload a giant camera original unless your design needs that resolution. Check the homepage card, the full article, and a phone after publishing; each crop can make an image feel different.
Is WebP good for image SEO?
Yes, Google supports WebP in Image Search. Using it doesn’t award a special ranking bonus, though. What matters more is that the image loads well, is relevant to the page, and can be discovered. Google recommends using a normal <img> element with the image URL in src, a short descriptive filename, and alt text that explains the image in context. WordPress’s Image and Featured Image blocks handle the standard image markup for you. Google Image SEO best practices
For example, webp-vs-jpeg-png-wordpress.webp tells you more than IMG_4827.webp. Useful alt text for the image in this article would be: “Laptop displaying a mountain photo beside three image previews.” It describes what a reader who cannot see the image would need to know; it doesn’t repeat “WebP SEO WordPress” over and over.
If an important image is at the top of a page, don’t force it to lazy-load just because it is a WebP. Delaying an image already visible to the visitor can slow the page’s main visual. Google’s lazy-loading guidance
My practical WordPress workflow
- Keep the original photo or design file as your master copy.
- Export a copy close to the largest size your layout actually displays.
- Try WebP for photos and featured images. For screenshots, compare PNG with lossless WebP.
- Open the exported image at 100% and check text, faces, gradients, and fine edges.
- Give it a descriptive filename and write natural alt text in the Media Library.
- Upload it, then check the homepage card, article and mobile crop. Measure the live page if speed is your goal.
For most of my future WordPress posts, that means starting with WebP, not mass-converting every image already published. Existing image URLs may already be linked, shared, or indexed. A new upload workflow is easier to evaluate and less likely to break a post that is working fine.
The takeaway
WebP can make a good-looking blog image smaller, and Google has no problem indexing it. The best result still comes from the right dimensions, a sensible quality setting, and a visual check. Use the format that serves the image well—not the one with the most impressive compression claim.
Leave a Reply