WebP for SEO: The Step-by-Step Implementation Playbook

You already know the theory: WebP images are smaller, they load faster, and Google's PageSpeed Insights flags every JPEG with a "Serve images in next-gen formats" warning. This guide skips the theory. It's a hands-on rollout playbook — exactly which images to convert first, how to batch-convert them for free with no upload, and how to wire WebP into WordPress, Shopify, or a plain HTML site without breaking anything. Unlike theoretical performance guides, this one is a practical checklist you can complete in under an hour.

If you want the deeper "why does this even matter for rankings" explanation first — the Core Web Vitals mechanics, the LCP/INP/CLS breakdown, and the data behind Google's recommendation — read our WebP and Core Web Vitals deep-dive before (or after) working through this checklist.

Why WebP Specifically Improves SEO

Google created WebP — and that matters. When PageSpeed Insights shows the "Serve images in next-gen formats" audit, it is Google's own tool flagging that your images are holding your rankings back. The audit directly contributes to your Opportunities score, and resolving it removes a penalty that appears on every crawl of your page. More importantly, the connection runs deeper than a single audit: smaller images mean a faster Largest Contentful Paint (LCP), and LCP is one of three Core Web Vitals that Google uses as a confirmed ranking signal in Search since 2021.

The "Serve images in next-gen formats" audit is one of the highest-weighted opportunities in PageSpeed Insights. Resolving it typically improves your Opportunities score by 15–30 points depending on how many images the page has.

Which Images to Convert First (Priority Order)

Not all images are equal for SEO. Convert in this order:

1. Hero / banner image — The single most impactful image. This is almost always the LCP element. Reducing it from 300 KB JPEG to 200 KB WebP directly cuts your LCP time, moving the needle on the metric Google uses to evaluate your page experience.
2. Above-the-fold thumbnails — Any image visible without scrolling affects First Contentful Paint and LCP. These are the second priority because they are loaded immediately on page open and contribute directly to the Core Web Vitals measurement window. Convert all of them.
3. Article / product thumbnails in listings — These appear on category and blog index pages where multiple images load simultaneously. Converting a page with eight 80 KB JPEGs to 55 KB WebPs saves 200 KB per page load — a meaningful reduction in total page weight that moves your PageSpeed score.
4. Inline content images — Convert as you go. Lower priority since they are usually below the fold and lazy-loaded, but they still contribute to total page weight and the PageSpeed audit. Every image flagged by Lighthouse is an opportunity score penalty you can remove.

Skip: icons under 5 KB, inline SVGs, and social sharing buttons. Their contribution to page weight is negligible and not worth the conversion overhead.

How to Convert JPG to WebP for Free

The fastest way is our browser-based converter — no upload, no signup, works for bulk files. Everything runs locally in your browser using WebAssembly, so your images never leave your device.

1. Open the converter
   Go to the JPG to WebP converter at convertlo.pro/jpg-to-webp.html. The tool pre-selects JPG → WebP automatically, so you can start dropping files immediately.
2. Drop your images
   Drag and drop your JPEG file(s) onto the upload zone, or click Browse. For multiple images, enable the Batch convert toggle first — the converter processes up to four images in parallel using your device's CPU cores.
3. Set quality
   The default quality of 80 is ideal for SEO: it produces files roughly 30% smaller than JPEG at equivalent visual quality. For hero images where quality matters most, try 85. Go lower (70–75) for thumbnails and listing images where pixel-perfect quality is less critical.
4. Download
   Click Convert, then Download. Your WebP files download to your device. Nothing was uploaded to any server — the conversion happened entirely in your browser. Rename files to match your existing file structure before uploading to your site.

For ongoing use, see the platform-specific automation options below — WordPress plugins and Shopify's Liquid filter can handle future uploads automatically so you never need to manually convert again.

Implementing WebP on WordPress

WordPress handles WebP natively since version 5.8 (released July 2021). When you upload a JPEG, WordPress can automatically generate a WebP version — no plugin required for conversion itself. However, you still need to ensure WebP is being served to browsers that support it.

Option 1 — Automatic (Plugin)

ShortPixel, Imagify, and WebP Express automatically convert all uploaded images and serve WebP to supporting browsers via the <picture> element or server-side content negotiation. ShortPixel free tier: 100 images/month. Imagify free tier: 20 MB/month. These plugins also handle existing media library images, so you can bulk-convert your entire image archive. Recommended for sites with frequent uploads or large media libraries.

Option 2 — Manual (Recommended for small sites)

Convert images manually using our converter, upload the .webp file directly to WordPress, and use it in your posts. WordPress's media library accepts WebP since version 5.8. For older themes that may not recognise the WebP MIME type, the safest approach is to use a plugin like WebP Express rather than modifying wp-config.php. For modern themes on WordPress 6.x, uploading WebP files directly works out of the box.

To serve WebP with a JPEG fallback in WordPress templates, use the <picture> element:

<picture>
  <source type="image/webp" srcset=".webp">
  <!-- Fallback: standard WordPress thumbnail -->
  <?php the_post_thumbnail('large', ['loading' => 'lazy', 'alt' => get_the_title()]); ?>
</picture>

For the hero/featured image specifically, omit loading="lazy" and add fetchpriority="high" — WordPress does not add these automatically for the LCP image.

Implementing WebP on Shopify

Shopify's CDN (powered by Imgix) automatically converts images to WebP for browsers that support it when you use Shopify's image_url filter with format: 'webp' — or it may happen automatically depending on your theme's implementation. Most OS 2.0 themes serve WebP without any additional configuration.

Check if Shopify is already serving WebP

Open Chrome DevTools → Network tab → filter by Img → click on any product image → check the Response Headers panel for Content-Type: image/webp. If you see it, Shopify's CDN is already converting automatically. If you see Content-Type: image/jpeg, you need to update your Liquid templates.

Force WebP in Liquid templates

Update your product image tags in your theme's Liquid files to explicitly request WebP:

{{ product.featured_image | image_url: width: 800, format: 'webp' | image_tag: loading: 'lazy', widths: '400, 800, 1200' }}

If your store is already on an OS 2.0 theme (Dawn, Sense, Refresh, etc.), WebP is served automatically. The main SEO action for Shopify stores is ensuring product images have descriptive alt text and that image dimensions are set correctly to avoid CLS — not the format itself, which Shopify handles for you. Check each product image's alt text in the Shopify admin under Products → select product → click each image.

Implementing WebP on Plain HTML / Static Sites

The <picture> element is the standard way to serve WebP with a JPEG fallback for browsers that do not support it (less than 3% of users in 2026). Browsers that support WebP pick the <source> element; older browsers fall through to the <img> tag:

<picture>
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Descriptive alt text"
       width="1200" height="630" loading="lazy">
</picture>

For the hero or LCP image, add fetchpriority="high" to the <img> tag and never add loading="lazy" — the LCP image should always load eagerly so the browser fetches it as early as possible:

<picture>
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image description"
       width="1200" height="630" fetchpriority="high">
</picture>

For static sites with many images, use the cwebp command-line tool to batch convert an entire directory in one command:

for f in images/*.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

On Windows, the equivalent using PowerShell:

Get-ChildItem images\*.jpg | ForEach-Object { cwebp -q 80 $_.FullName -o ($_.FullName -replace '\.jpg$','.webp') }

Measuring Your SEO Improvement After Converting to WebP

After converting and deploying, measure the impact with these four tools — each tells you something different:

• PageSpeed Insights (pagespeed.web.dev) — Run your URL before and after converting. The "Serve images in next-gen formats" audit should disappear from the Opportunities section. Your Performance score and LCP time (in seconds) should both improve. This is your primary before/after measurement.
• Chrome DevTools → Lighthouse — Local measurement, useful for testing before you deploy to production. Run a Lighthouse audit in Incognito mode (to avoid extensions skewing results) and compare Performance scores.
• Google Search Console → Core Web Vitals report — Shows real-user LCP data from the Chrome User Experience Report (CrUX), collected from actual visitors to your site. This is the most meaningful data because it reflects real-world conditions. Improvements appear in the rolling 28-day average, so allow a full month before expecting the report to reflect your changes.
• WebPageTest.org — Run a filmstrip comparison test with two URLs (or the same URL before/after) to see exact millisecond differences in load time, LCP, and waterfall charts showing image download timing.

Expect 1–3 weeks for PageSpeed Insights to reflect your improvements on re-crawl. Google Search Console CWV data shows a 28-day rolling average, so ranking impact from CWV improvements takes 4–8 weeks to fully reflect in Google Search. Do not panic if you do not see a ranking change immediately — the signal accumulates over time.

Common WebP SEO Mistakes to Avoid

1. Adding loading="lazy" to the hero image — Never lazy-load the LCP element. It tells the browser to defer fetching the hero image until it is near the viewport — which it already is, since it is above the fold. This directly hurts your LCP score. The browser's native lazy loading is excellent for below-the-fold images; restrict it to those only.
2. Using PNG for photographic content — PNG is lossless and stores photographic images at 3–5× the file size of WebP. This is the most common image SEO mistake seen on WordPress blogs and Shopify stores. Use JPEG or WebP for all photographs and product photos. Reserve PNG only for flat-colour graphics, logos, illustrations, and images that require transparency.
3. Converting to WebP at quality 100 — WebP at quality 100 (lossless) produces files that are often larger than the equivalent JPEG at quality 90. The quality sweet spot for photographic content is 75–85 for content images, and 85–90 for hero images where visual quality matters most. Lossless WebP is appropriate only for graphics with text, flat colours, or images where you need exact pixel fidelity.
4. Forgetting alt text after conversion — Image format has no effect on alt text, but a common workflow mistake is to upload the WebP without updating the alt attribute. After converting and uploading, verify every image has a descriptive alt attribute. This is the primary signal Google uses for Google Image Search ranking — a well-described WebP ranks far better in Image Search than a perfectly optimised file with a blank or generic alt tag.

Frequently Asked Questions