PNG to WebP for WordPress, Shopify & Any Website — Implementation Guide

Switching your website images from PNG to WebP cuts image weight by 25-70% and directly improves page load times, Core Web Vitals scores, and Google PageSpeed ratings. WordPress has supported WebP uploads since version 5.8. Shopify's CDN automatically serves WebP when the browser supports it. For custom sites, the HTML <picture> element handles format fallback in two lines of code.

Here is how to make the switch on any platform.

Step 1: Batch Convert Your PNG Images to WebP

Before uploading anything, convert your existing PNG images to WebP:

1. Open the PNG to WebP converter
2. Drop your entire images folder (all PNGs at once)
3. Set quality to 80 for photos and general images, or 100 for logos and icons you want lossless
4. Download the ZIP containing all your WebP files

Keep your original PNGs as backups. Use the WebP files as your live website images. If a specific image does not look right at quality 80, re-convert that one file at quality 90.

WordPress: Upload WebP Directly (No Plugin)

Since WordPress 5.8, WebP is a supported image format in the Media Library. Upload WebP images exactly like you would upload any JPG or PNG:

1. Go to Media > Add New
2. Upload your WebP files
3. Use them in posts, pages, and featured images normally

WordPress automatically generates thumbnails and responsive sizes for WebP images, just like it does for JPG and PNG.

Want automatic conversion? Plugins like ShortPixel, Imagify, and EWWW Image Optimizer can auto-convert uploaded PNGs to WebP and serve the right format based on browser support. But for many sites, simply uploading WebP directly is simpler and avoids adding another plugin.

Theme compatibility: Most modern WordPress themes handle WebP without issues. If your theme uses hardcoded .png or .jpg extensions for logo/background images, you may need to update those references manually.

Sell Custom Apparel — We Handle Printing & Free Shipping

Shopify, Squarespace, Wix, and Other Platforms

Shopify: Upload any image format and Shopify's CDN automatically serves WebP to browsers that support it. You do not need to convert manually — Shopify handles the format negotiation server-side. That said, uploading already-optimized WebP files means Shopify starts with a smaller file, leading to better quality at any CDN compression level.

Squarespace: Similar to Shopify — their CDN converts images to WebP automatically. Uploading WebP directly is also supported.

Wix: Automatic WebP serving through their image service. Upload in any format.

Static sites / custom platforms: You need to handle format serving yourself. The easiest approach is the HTML <picture> element (covered in the next section). Alternatively, configure your server (Nginx, Apache) to serve WebP via content negotiation based on the browser's Accept header.

HTML Implementation With PNG Fallback

For custom websites and platforms without automatic WebP serving, use the <picture> element:

<picture>
  <source srcset="hero-banner.webp" type="image/webp">
  <img src="hero-banner.png" alt="Site hero banner" loading="lazy">
</picture>

Browsers that support WebP load the .webp file. The rare browser that does not (Safari 13 and earlier) falls back to the .png. Both files need to exist on your server.

For CSS background images:

.hero {
  background-image: url('hero.webp');
}
/* Fallback for browsers without WebP */
@supports not (background-image: url('test.webp')) {
  .hero { background-image: url('hero.png'); }
}

For maximum performance, combine WebP conversion with lazy loading (loading="lazy"), responsive images (srcset), and proper image dimensions (width and height attributes to prevent layout shift).

Real Impact on Core Web Vitals and PageSpeed

Switching from PNG to WebP directly impacts two Core Web Vitals metrics:

• Largest Contentful Paint (LCP): If your largest visible element is an image, reducing its file size speeds up LCP directly. A 2MB PNG hero image becoming a 600KB WebP can improve LCP by 1-3 seconds on slower connections
• Cumulative Layout Shift (CLS): Not directly related to format, but faster-loading images reduce the chance of content shifting as images load late

Google PageSpeed Insights specifically recommends "Serve images in next-gen formats" (WebP or AVIF). Switching from PNG to WebP directly addresses this recommendation. Sites that make the switch typically see PageSpeed scores improve by 10-30 points on image-heavy pages.

For a complete guide to image formats and web performance, see our best image format for websites analysis.

Frequently Asked Questions

Does WordPress support WebP?

Yes, since WordPress 5.8. You can upload WebP images directly to the Media Library. WordPress generates thumbnails and responsive sizes for WebP just like it does for JPG and PNG. No plugin required for basic WebP support.

Does Shopify automatically convert images to WebP?

Yes. Shopify's CDN automatically serves WebP versions of your images to browsers that support it, regardless of what format you uploaded. Uploading pre-optimized WebP files still helps because Shopify starts with a smaller source file.

How much faster will my site load with WebP?

It depends on how many images your pages have and how large they are. For image-heavy pages, switching from PNG to WebP typically reduces total image weight by 30-60%, which can improve load times by 1-4 seconds on average connections.

Do I need both WebP and PNG files on my server?

Only if you need to support very old browsers (Safari 13 and earlier, which is less than 0.5% of traffic). If you use the HTML picture element, you can serve both formats and let the browser choose. Most sites in 2026 can safely serve WebP only.