Monday, November 3, 2025
Need a fast, repeatable way to cut image weight and improve page speed? This guide shows you how to convert JPG/PNG/JPEG to WebP in bulk, update markup the right way for SEO, and verify real world improvements—all in under an hour. We’ll use the free Image to WebP tools at iKozmik, including a page crawler that finds non-WebP images, converts them, and gives you a ZIP with the same folder structure.
<picture>, with a JPEG/PNG fallback.srcset/sizes and cache headers.Start where improvements will be most visible:
Grab one URL per template and tackle them one by one. You’ll build confidence quickly.
Use the Convert Website Images to WebP tool to scan a page and convert every image that isn’t already .webp. The ZIP preserves relative folders so it drops back into your project neatly.
The crawler automatically skips images already in .webp and converts JPG/JPEG/PNG/GIF. You’ll see progress as images are found and converted, then you’ll download one ZIP.
Your HTML should prefer WebP while keeping a safe fallback. The simplest pattern:
<picture>
<source type="image/webp" srcset="/img/hero-1200.webp 1200w, /img/hero-800.webp 800w"
sizes="(min-width: 900px) 1200px, 800px">
<img src="/img/hero-1200.jpg" alt="Hero image" width="1200" height="675">
</picture>srcset widths (e.g., 800w/1200w) and a sizes rule.width/height to reduce CLS.<picture>
<source type="image/webp"
srcset="/img/card-320.webp 320w, /img/card-480.webp 480w, /img/card-640.webp 640w"
sizes="(min-width: 1100px) 320px, 50vw">
<img src="/img/card-480.jpg" alt="Card image" width="480" height="360">
</picture>Make sure your converted WebP files follow the same naming scheme so swapping URLs is straightforward. The crawler’s ZIP helps by preserving the **same folders and base names** (just the extension changes).
Cache-Control (e.g., public, max-age=31536000, immutable) with fingerprinted names or versioned paths.image/webp is served for WebP files.Content-Type: image/webp
Content-Disposition: attachment; filename="My Product Photo.webp";
filename*=UTF-8''My%20Product%20Photo.webpmap $http_accept $webp_suffix {
default "";
"~*image/webp" ".webp";
}
location ~* ^/img/(.+)\.(png|jpg|jpeg)$ {
try_files /img/$1.$2$webp_suffix /img/$1.$2 =404;
add_header Vary Accept;
}This pattern tries .webp for browsers that accept it, otherwise serves the original.
Once you confirm gains, replicate the process on the next template—category pages, product detail pages, then long-form articles.
If you deploy regularly, bake WebP into the pipeline:
<picture> ordering, type="image/webp", width/height, and sensible sizes.Prefer a WebP-first strategy with a fallback. For maximum savings, also consider AVIF as an additional <source> once you’re stable with WebP.
srcset/sizes.width/height to prevent layout shifts.<picture> with WebP <source> first and JPEG/PNG fallback.srcset/sizes, width/height, and proper cache headers.Indirectly, yes. Smaller images improve render speed and Core Web Vitals (especially LCP), which search engines use as ranking signals. Faster pages also convert better.
Yes. WebP supports transparency in both lossy and lossless modes. Use lossless for crisp UI, lossy for photo-like edges.
Start with 80. For galleries with consistent backgrounds, 75 can look identical while saving more. For critical visuals (faces, architecture), push 85–90.
It’s best practice. Use <picture> with a WebP <source> plus a JPEG/PNG fallback <img>. Modern browsers will choose WebP automatically.
Yes—start with key templates. Use the crawler to convert a page (or section) at a time.
Migrating a website’s images to WebP is one of the fastest ways to boost performance without a redesign. With a simple crawler, responsive markup, and a quick validation loop, you can land meaningful gains in under an hour. Repeat the process across your templates, then automate it in CI/CD so every deploy ships optimized assets.