Performance & Security

WebP Images: Should Your Website Switch?

WebP offers smaller images in supporting browsers, but in early 2018 you still need JPEG/PNG fallbacks for Safari, Firefox and others.

Quick answer: WebP is worth adopting if you can serve it to Chrome and Opera (and many Android browsers) while still delivering JPEG or PNG fallbacks to everyone else. Do not replace all site images with WebP-only files today. WordPress core does not accept WebP uploads yet, so you will need a plugin, build step or CDN transformation. Measure savings on real templates before a wholesale switch.

Images often dominate page weight. WebP, developed by Google, typically produces smaller files than JPEG at similar visual quality for photos, and can replace PNG for many graphics with transparency. The catch is browser support in March 2018.

Browser support right now

Supported: Chrome, Opera, and Android browsers built on those engines (broadly speaking).

Not supported yet: Firefox (support expected later, not shipping for typical users today), Safari on macOS and iOS, and current Edge/IE users who are not on Chromium-based Edge (Chromium Edge is not the mainstream story yet).

If you serve only WebP, a large slice of visitors will see broken images. That is unacceptable for ecommerce and lead generation.

How to serve WebP safely

picture element

<picture>
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Description" width="1200" height="600">
</picture>

Supporting browsers choose WebP; others use the JPEG img.

Accept negotiation via CDN or server

Some CDNs detect the Accept header and rewrite to WebP automatically while keeping a single URL. Configure carefully and cache variants correctly.

Avoid WebP-only content in CMS fields

Until your CMS and email clients catch up, keep master assets in JPEG/PNG/SVG and treat WebP as a delivery optimisation.

WordPress reality check

WordPress 4.9 does not treat WebP as a native upload type in core the way JPEG and PNG are handled. Media library workflows expect traditional formats. Practical options:

  • A reputable optimisation plugin that generates WebP sidecars and rewrites markup
  • A build pipeline that outputs WebP beside JPEG for theme assets
  • CDN automatic format negotiation in front of origin JPEGs

Test thoroughly with caching plugins. Misconfigured rewrite rules can serve WebP to Safari with a JPEG URL or break lazy loading scripts. Review general WordPress image sizes and optimisation habits first; many sites gain more from correctly sized JPEGs than from a rushed WebP rollout.

Quality and compression settings

Use sensible quality (often in the 75 to 85 range for photos, tuned by eye). Compare:

  • Original JPEG weight
  • Optimised JPEG weight
  • WebP weight at matched perceptual quality

If WebP barely wins, skip it for that asset class. Logos often belong as SVG, not WebP.

Animated WebP vs GIF

Animated WebP can beat GIF on weight for simple animations. Support follows the same browser limits, so keep GIF or MP4 fallbacks where animation matters. For short motion on marketing pages, muted MP4 with poster frames is often more controllable.

Interaction with performance programmes

Smaller images help users now and prepare you for Google’s mobile Speed Update later this year. WebP is one tool beside caching, HTTP/2, critical CSS discipline and lean JavaScript (HTTP/2, WordPress speed optimization, icon fonts performance). Do not chase WebP while shipping multi-megabyte hero videos.

Decision guide

Adopt WebP with fallbacks if:

  • A large share of traffic is Chrome/Android
  • You can automate generation and markup
  • You have regression testing on Safari and Firefox

Wait or limit scope if:

  • Your team hand-uploads images without a build pipeline
  • Email templates consume the same assets (client support varies wildly)
  • You cannot test iOS Safari properly

Skip WebP-only experiments on:

  • Payment and legal pages where broken media destroys trust
  • Client-managed WordPress without plugin governance

Implementation checklist

  1. Pick a generation method (plugin, CLI cwebp, CDN)
  2. Keep originals
  3. Implement picture or Accept negotiation
  4. Verify on Chrome, Safari, Firefox, iOS
  5. Confirm caches store the right variant
  6. Watch real user timing or CrUX-informed PageSpeed field data where available
  7. Document the workflow for anyone who uploads images

Myths

  • “Google requires WebP.” No. Google likes fast pages; format is your choice.
  • “WebP always looks worse.” Poor settings look worse; tuned WebP is often fine.
  • “One plugin fixes everything forever.” Plugin conflicts and theme markup still break images; test after updates.

Comparing WebP to simply doing JPEG well

Before investing engineering time, run a one-page experiment: take your heaviest template, properly resize and compress JPEGs with srcset, enable caching, and re-measure. Many sites reclaim hundreds of kilobytes without new formats. Add WebP on top when the pipeline is ready, not instead of basics covered in WordPress image optimization.

CDNs and automatic conversion

Cloudflare and similar products can convert and cache WebP for supporting clients. Pros: little theme work. Cons: less control over quality knobs; need to purge caches when masters change; still verify Safari sees a non-WebP rendering. Read your CDN docs for the exact feature name and plan requirements.

Email, PDFs and offline uses

WebP is a poor interchange format for partners who need to drop images into PowerPoint, print or email newsletters. Keep a JPEG/PNG master in your DAM or media library for those jobs. Delivery optimisation on the website should not destroy the editorial asset workflow.

Team workflow recommendations

  1. Designers export masters (PNG/JPEG/SVG)
  2. Build or plugin generates WebP derivatives
  3. Templates reference both via picture or CDN
  4. QA checklist includes Safari iOS on a real device
  5. Editors never upload WebP-only files as the sole asset

Write this into your maintenance runbook so a new freelancer does not “simplify” markup back to WebP-only.

When lossy WebP is the wrong tool

Screenshots with fine UI text sometimes look softer under aggressive lossy WebP. Use higher quality settings or stick with carefully compressed PNG/JPEG for documentation UIs. Hero photos usually benefit more than 1x icon sprites (prefer SVG for icons when possible).

Rollout strategy that reduces risk

Start with one template (homepage hero or category grid), ship fallbacks, watch error logs and user complaints for a week, then expand to product listing images and finally to long-tail content images. Track bounce and conversion on the templates you touch so you notice regressions quickly. A staged rollout beats a weekend whole-library conversion that is hard to reverse.

If a plugin causes conflicts with your page builder or caching layer, disable WebP output and keep the optimised JPEGs; broken images cost more than the bytes you hoped to save.

Staged adoption keeps risk low.

FAQ

Can I upload WebP to the WordPress media library by default?

Not as a fully supported core workflow today. Use tools that generate WebP from JPEG/PNG rather than relying on native uploads.

Does WebP help SEO directly?

Indirectly via performance and user experience, not via a special ranking flag for the file extension.

Should product feeds use WebP?

Follow each channel’s rules. Many feeds still expect JPEG/PNG.

What about JPEG 2000 or JPEG XR?

Niche support; WebP-plus-JPEG fallbacks are the practical pair for most sites now.

Next step

If images dominate your weight budget, start with responsive sizing and compression, then add WebP where fallbacks are solid. For a broader performance and conversion pass, see turn visitors into customers.

About the author

Imran M

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready to improve your website?

Let's build a faster, higher performing website.