Page speed shapes how visitors experience your site, and slow pages tend to lose people before they read a word. Google's ranking systems also use Core Web Vitals, although Google is clear that relevant content still comes first, so fixing images helps but won't rescue weak content. Most of the time, a slow page is caused by heavy images, and you'll see this in the report of a PageSpeed Insights audit. For a long time, most bloggers and developers used PNG as the default image format. I did that too, and eventually I switched to using WebP for most images on my site. Using PNG isn't a problem by itself. The problem is using it everywhere, because it adds a lot of weight to every page.
To solve this exact problem, Google created WebP, a modern image format built for the web. WebP supports both lossy and lossless compression and keeps transparent backgrounds, and in Google's own testing, lossless WebP images come out 26% smaller than PNGs.
Hey, welcome to BytebaseX. I'm Suptojit Modak, and in this post, I'm going to break down WebP vs PNG for website speed: which format is actually better for your site's loading time and performance. This is the first post in the Image Optimization series on BytebaseX. For the full roadmap of the series, see The Complete Guide to Image Optimization.
WebP vs PNG at a Glance
If you only have a minute, here's the whole comparison:
- File size: lossless WebP averages 26% smaller than PNG, and lossy WebP can be several times smaller, depending on the image and the quality you choose.
- Quality: lossless WebP keeps every pixel identical to the source. Lossy WebP trades a small, adjustable amount of detail for a much smaller file.
- Support: WebP works for about 97% of global browser traffic.
- Where each belongs: PNG for master files, print, and favicons. WebP for everything visitors actually load on a live page.
What Is PNG and Why Do People Still Use It?
PNG stands for Portable Network Graphics, and it's a format that keeps your design's quality 100% intact. PNG is lossless: it compresses the file without throwing away any pixel data, so the image you open is identical to the image you saved. Before WebP existed, if you wanted a sharp screenshot or a logo with a clean transparent background, PNG was the only real option. That's why it became the default for so many of us in the first place. It wasn't fast, but it never let you down on quality.
Good Sides of PNG
- No quality drop: images in PNG format stay clear every time you save or share them anywhere.
- Clear background: good for logos and cutouts, because you can make the background fully transparent.
- Sharp text: words and lines stay sharp and don't look blurry even when zoomed in.
The Problem With PNG
Because PNG keeps every detail, the file size becomes very big. A single high-resolution screenshot in PNG format can easily reach a megabyte or more. If your article has four or five of them, your page will load very slowly on mobile phones. This is exactly the gap WebP was built to close.
What Is WebP and How Does It Fix This?
WebP is a modern image format built by Google to make the web faster. Its big advantage is that it offers two modes, so you can choose between perfect quality and the smallest possible file.
Lossy vs Lossless: The Choice That Decides Your File Size
- Lossless WebP reproduces the source exactly, like PNG. According to Google's WebP documentation, lossless WebP files are 26% smaller than PNGs, and adding transparency costs only about 22% more bytes.
- Lossy WebP discards detail the eye barely notices. Google reports that lossy WebP is 25-34% smaller than comparable JPEG, and that lossy WebP with transparency is typically about 3× smaller than PNG.
That second point is the one most PNG users miss. A PNG with a transparent background (a product cutout, for example) can often become dramatically smaller as lossy WebP, while keeping its transparency.
Good Sides of WebP
- Smaller files: lossless WebP averages 26% smaller than PNG, and lossy WebP can go much further.
- Adjustable compression: you pick the quality, so you can shrink an image until the loss just starts to show, then step back.
- Best of both worlds: it supports transparent backgrounds like PNG, and animation like GIF, while keeping files closer to JPEG size.
PageSpeed Insights often flags PNG-heavy pages because modern formats load faster. In older reports, this shows up as the "Serve images in next-gen formats" audit. Newer reports (Lighthouse 13, released in October 2025) fold it into a broader "Improve image delivery" insight. Either way, the advice is the same, and we cover fixing that warning specifically here. To see the differences side by side, look at the table below.
| Feature | PNG | WebP | What It Means for Your Site |
|---|---|---|---|
| Compression | Lossless only | Lossless or lossy, your choice | WebP gives you a size dial that PNG doesn't have. |
| Typical file size | Baseline | Lossless: about 26% smaller. Lossy: often much smaller (Google's figures) | Lighter pages, especially on mobile data. |
| Transparency | Yes | Yes, in both lossless and lossy modes | Logos and cutouts work in either format. |
| Animation | No (APNG is a separate extension) | Yes | Animated WebP can replace heavy GIFs. |
| Image quality | Pixel-perfect | Pixel-perfect (lossless) or very good (lossy) | At sensible settings, the difference is hard to see. |
| Browser support | Universal | About 97% of global traffic (Can I use, September 2026) | Safe for nearly all visitors. |
| Best for | Master files, print, favicons, edge cases | Featured images, screenshots, thumbnails, product photos | Use each where it fits. |
WebP vs PNG: Impact on Core Web Vitals and Page Speed
The table shows WebP wins on file size, but the real reason this matters for website speed is Core Web Vitals. The metric most affected by images is Largest Contentful Paint (LCP), which measures how long it takes for the largest visible element, usually a featured image or hero banner, to finish loading. Google considers an LCP of 2.5 seconds or less good, measured at the 75th percentile of real visits, and anything over 4 seconds poor. You can read the full definition in web.dev's LCP guide.
Here's the part most articles skip: LCP isn't only download time. It's split into four phases: time to first byte, resource load delay, resource load duration, and element render delay. A smaller file shortens only the load duration phase. Still, that phase is often the biggest one for an image-based LCP.
To make that concrete, take a 1.5 MB PNG featured image on a modest 5 Mbps mobile connection. That's 12 megabits of data, so the transfer alone takes about 2.4 seconds. A 150 KB lossy WebP version is 1.2 megabits, about 0.24 seconds. These are illustrative numbers, not a benchmark, and a 90% reduction needs lossy compression. But they show why swapping the format can move an LCP from "needs improvement" to "good" on slow connections.
Three Habits That Matter as Much as the Format
Converting to WebP is only part of the job. These three habits decide whether the smaller file actually helps:
- Set width and height. The browser can then reserve space before the image loads, which prevents layout shifts (CLS).
- Never lazy-load the LCP image. Add
fetchpriority="high"to your featured image so the browser fetches it first. Useloading="lazy"only for images below the fold. - Serve the right size. A 3000-pixel-wide WebP shown at 800 pixels still wastes bytes, so use
srcsetto offer smaller versions.
<!-- Featured image: load it early -->
<img src="featured.webp" width="1200" height="630"
alt="Describe the image" fetchpriority="high">
<!-- Below the fold: load it later -->
<img src="chart.webp" width="800" height="450"
alt="Describe the chart" loading="lazy">
<!-- Offer smaller versions to small screens -->
<img src="photo-800.webp"
srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 800px) 100vw, 800px"
width="800" height="450" alt="Describe the photo">For the full list of fixes, see web.dev's guide to optimizing LCP.
How to Convert PNG to WebP for Your Website
Knowing WebP is better doesn't help much if you don't know how to actually switch. You have three practical options, depending on how many images you're dealing with.
Online Converters
Tools like Squoosh (from Google Chrome Labs) or CloudConvert let you drag and drop a PNG and download a WebP version in seconds. Squoosh also shows the original and the result side by side with live file sizes, which is the best way to learn what quality setting your images can tolerate. This works well for one-off images or a handful of screenshots.
Bulk Conversion
If you already have hundreds of PNG images, converting them one by one isn't realistic. Google's own cwebp tool (documented here) handles one file or a whole folder, and plugins like ShortPixel can do the same inside WordPress.
# Lossless: pixel-identical to the PNG
cwebp -lossless -z 6 input.png -o output.webp
# Lossy: smaller, quality 0-100 (default is 75)
cwebp -q 80 input.png -o output.webp
# Convert every PNG in a folder (macOS, Linux, Git Bash)
for f in *.png; do cwebp -lossless -z 6 "$f" -o "${f%.png}.webp"; done
# Same idea in Windows PowerShell
Get-ChildItem *.png | ForEach-Object { cwebp -lossless -z 6 $_.FullName -o ($_.BaseName + ".webp") }ImageMagick 7 can do it too: magick input.png -quality 80 output.webp for lossy, or magick input.png -define webp:lossless=true output.webp for lossless.
Export Directly as WebP
Many design tools, including recent versions of Photoshop and GIMP, can export WebP directly, so you skip the PNG step entirely for new images. Check your tool's export menu.
For Blogger specifically, there's no built-in bulk converter. The practical approach is to convert images before uploading, using Squoosh or a similar tool, instead of uploading PNG and converting later.
Which Settings Should You Use?
- Screenshots with text or code: use lossless, or near-lossless (
-near_lossless 60). Text edges are the first place lossy compression shows. - Photos: use lossy, and start around quality 75 to 85. Raise it only if you can see damage.
- Transparent graphics: try lossless first. If the file is still large and the graphic isn't text-heavy, test lossy with transparency.
- Always compare. Lossless WebP is 26% smaller than PNG on average, but individual files vary, and an already well-optimized PNG can come out about the same size.
Does WebP Work in Every Browser? WebP Browser Support in 2026
One thing that stops some people from switching is the fear that WebP won't display for every visitor. This concern was valid a few years ago, but it isn't anymore. According to Can I use, WebP is supported for about 97% of global traffic as of September 2026, across Chrome, Firefox, Safari, and Edge. Safari added support in version 14 (September 2020), and Internet Explorer 11 never supported it. The remaining share is mostly very old browser versions that few real visitors still use.
If you still want a safety net, especially for a business or e-commerce site, you can use the <picture> HTML element to serve WebP to browsers that support it, and fall back to PNG or JPEG automatically for the rest:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.png" width="800" height="450" alt="description">
</picture>For most personal blogs and content sites, this extra step isn't necessary. Plain WebP is safe to use directly. Many image CDNs can also do this negotiation for you automatically, serving WebP to browsers that ask for it.
What About AVIF? Is WebP Still Worth Using in 2026?
If you've researched image formats recently, you've probably come across AVIF, a newer format that generally compresses better than WebP. So does that make WebP outdated already? I go into this in much more depth in AVIF vs WebP: Is AVIF Ready for Everyday Website Use in 2026?, but the short version is below.
Browser support is no longer the deciding factor. Can I use currently shows AVIF at about 96% of global traffic versus about 97% for WebP, so the gap is tiny. The real differences are elsewhere:
Encoding Speed
WebP encodes far faster than AVIF, which matters if you're converting images in bulk or on a low-power device.
Tooling Maturity
More editors, plugins, and platforms support WebP natively today. AVIF support keeps growing, but WebP is still the safer default across tools.
Good Enough for Most Content
For blog screenshots, thumbnails, and typical article images, the difference between WebP and AVIF file sizes is often too small to notice in real-world loading time.
The practical takeaway: WebP is still the right default for most bloggers in 2026. If you run an image-heavy site, like a photography portfolio or a large product catalog, AVIF is worth testing on top of WebP, since that's where the extra compression can save meaningful load time.
PNG Isn't Only Competing With WebP
PNG is often used for jobs that other formats do better. Before you convert everything to WebP, check whether the image should be something else:
- Logos, icons, and diagrams: use SVG when you have a vector source. It stays sharp at any size and is usually tiny.
- Photos: lossy WebP, or JPEG if you need maximum compatibility. Lossless PNG is the heaviest possible choice for a photo.
- Screenshots: lossless WebP, or PNG if you need to hand the file to something that doesn't read WebP.
- Animations: short video (MP4 or WebM) is usually lighter than a GIF, and animated WebP is a good option when you need an image element.
When Should You Use PNG vs WebP?
Despite WebP's clear speed advantage, PNG still has a few specific jobs where it's the better choice. Use the picker below to see the recommendation for six common cases.
cwebp -lossless -z 6 shot.png -o shot.webpcwebp -q 80 photo.png -o photo.webpThese recommendations follow Google's WebP documentation and standard practice. Always compare file size and appearance on your own images before you commit.
Stick With PNG When
- Favicons and tiny icons: where exact pixel alignment and universal compatibility matter more than a few kilobytes.
- Print and offline editing: where the raw, lossless source must stay untouched.
- Platforms with uneven WebP handling: some email clients, social networks, and apps treat WebP inconsistently, so test your social preview (Open Graph) image before relying on it.
Switch to WebP When
- Featured images and thumbnails: blog post images and inline visuals.
- Technical screenshots: code, charts, and UI elements (use lossless).
- Product and gallery images: especially for e-commerce, where image weight adds up fast.
How to Check Which Image Formats Your Site Serves
You don't have to guess. Here's a quick way to audit any page:
- Open the page in Chrome and press F12 to open DevTools.
- Go to the Network tab and click the Img filter.
- Reload the page. The Type column shows each image's format (such as
pngorwebp), and the Size column shows how heavy it is. - Sort by Size. The biggest files at the top are your best conversion targets.
- Run the page through PageSpeed Insights afterward to confirm the image warnings are gone.
Frequently Asked Questions
Is WebP better than PNG for website speed?
For images shown on web pages, usually yes. Google's testing found lossless WebP 26% smaller than PNG, and lossy WebP can be much smaller still. That said, speed also depends on image dimensions, whether the image is lazy-loaded, and how your server delivers it, so the format is one lever among several.
Does converting PNG to WebP reduce image quality?
Not if you choose lossless mode, which reproduces the PNG pixel for pixel. Lossy mode does discard some detail, but you control how much with the quality setting. For photos, quality 75 to 85 is a common starting range, and for text-heavy screenshots lossless is the safer choice.
Why is my WebP file bigger than the original PNG?
It happens, mostly with PNGs that were already heavily optimized or with very simple flat graphics. The 26% figure is an average, not a guarantee. Try a slower lossless setting (such as -z 9 in cwebp), near-lossless mode, or lossy mode for images without fine text, and keep the PNG if WebP doesn't win.
Does using WebP improve my Google ranking?
Only indirectly. Google says its ranking systems use Core Web Vitals, and lighter images can improve LCP, but good scores don't guarantee a top ranking and relevant content still matters most. Google Images can also index WebP files, so you lose nothing by switching.
Do I still need a PNG fallback for older browsers?
For most blogs, no. WebP works for about 97% of global traffic, and the browsers that lack it, such as Internet Explorer 11, are rarely used. If you run a business site and want a safety net, use the <picture> element to offer WebP first and PNG or JPEG as a fallback.
Should I use WebP for my logo or favicon?
For a logo, SVG is usually the best choice when you have a vector version, because it stays sharp at any size. If you only have a pixel version, lossless WebP works well. For a favicon, stick with ICO, PNG, or SVG. The file is tiny anyway, so WebP saves almost nothing.
What WebP quality setting should I use?
The default in Google's cwebp tool is 75. For photos, start between 75 and 85 and compare the result with the original at full size. For screenshots with text or code, use lossless mode instead of lowering quality.
How do I know if my site is already serving WebP?
Open Chrome DevTools, go to the Network tab, filter by Img, and reload the page. The Type column shows each image's format, so you can see at a glance which files are still PNG. PageSpeed Insights will also flag images that could use a modern format.
Conclusion
PNG and WebP aren't really competing for the same job. PNG is for the cases where you can't afford to lose a single pixel or need maximum compatibility: favicons, print files, and source graphics you'll keep editing. WebP is for everything a visitor actually loads on a live page: featured images, screenshots, thumbnails, and product photos. If your site is still running mostly on PNG, that's often one of the biggest and easiest wins available for your PageSpeed score. Just remember that format is only part of it: set image dimensions, don't lazy-load your featured image, and serve sizes that match the screen.
This is the kind of practical image optimization advice I want to cover on BytebaseX. I write about things I've tested on my own sites, and this WebP vs PNG comparison is part of the Image Optimization series.
