How to Convert Images to WebP (and Speed Up Your Website)

If your website feels slow, there's a good chance oversized images are the reason. Converting them to WebP — and resizing them to the size they're actually shown at — is one of the quickest wins for page speed. This guide walks through the whole process in about five minutes.

Before you start: find your heaviest images

Run your site through PageSpeed Insights and look for suggestions like "Serve images in next-gen formats" or "Properly size images". They list exactly which images are slowing the page down and how much you could save.

As a rough guide, most images on a website can be under 200 KB, and many under 100 KB. A hero image several megabytes in size is a sign it needs work.

Step 1: Resize to the size you actually need

Resizing usually saves more than any format change. A photo straight from a phone camera is often 4000px wide, but a blog post rarely shows images wider than about 1200px.

• Full-width hero or banner images: about 1600–1920px wide
• Blog post images: about 1200px wide
• Thumbnails and cards: about 600–800px wide

If your theme serves images to high-resolution (Retina) screens, use roughly twice the displayed width for the most important images.

Step 2: Convert to WebP

1. Open the free Pixlory WebP Converter.
2. Drop in your JPG, JPEG, or PNG images — up to 50 at once.
3. Set Quality to around 80% — a good balance for websites.
4. Choose a Max width from the sizes above, or keep the original size if the images are already sized correctly.
5. Check the savings shown for each file, then download them one by one or all together as a ZIP.

Your images are converted inside your browser, so they are never uploaded anywhere. PNG transparency is kept.

Step 3: Pick the right quality

Compare a couple of settings side by side at the size they'll appear on your site. If you can't see a difference, choose the smaller file.

Step 4: Add WebP images to your website

WordPress

WordPress supports WebP uploads (version 5.8 and later). Upload the .webp files to the Media Library like any other image and insert them as usual. Remember to fill in the alt text — it matters for accessibility and image SEO.

Shopify, Wix, Squarespace and similar builders

Most hosted builders accept WebP uploads, and many convert and optimize images automatically when serving them. Uploading already-resized images still helps, because it keeps your originals light and your media library tidy.

Plain HTML

Use the WebP file in a normal <img> tag, and always include width, height and alt text so the page doesn't jump while loading:

<img
  src="/images/cozy-living-room.webp"
  alt="Cozy living room with a sage green sofa"
  width="1200"
  height="800"
  loading="lazy"
>

Use loading="lazy" for images further down the page, but not for the main image at the top — that one should load straight away.

If you need to support very old browsers, use the <picture> element with a JPG fallback:

<picture>
  <source srcset="/images/cozy-living-room.webp" type="image/webp">
  <img src="/images/cozy-living-room.jpg" alt="Cozy living room with a sage green sofa" width="1200" height="800">
</picture>

Step 5: Name your files for SEO

While you're converting, give files descriptive, keyword-rich names. cozy-living-room-sage-sofa.webp tells search engines far more than IMG_2041.webp. Use lowercase words separated by hyphens.

Step 6: Test again

Run PageSpeed Insights a second time. You should see a lower total page weight, and often a faster Largest Contentful Paint — one of Google's Core Web Vitals.

Common questions

Will WebP images look worse? At 75–85% quality, most people can't tell the difference from the original — but the file is much smaller.

Should I delete my original JPG and PNG files? No. Keep them as masters so you can re-export later.

Should I upload WebP to Pinterest or Instagram? It won't help — those platforms recompress images themselves. Upload a high-quality JPG or PNG there instead.

Not sure which format fits which image? Read our comparison of JPG vs PNG vs WebP, then convert your images to WebP for free.