John Cabardo
Founder & Developer, WebPMagic
I build and maintain WebPMagic, a browser-based image converter, and write the guides on this site. Most of what I publish here comes out of actually shipping image pipelines: measuring what compresses, what breaks, and what the byte savings look like on real files rather than in a spec sheet.
What I write about
Measured, not quoted
Most articles about image compression recycle the same vendor averages. Where a number matters, I run the test and publish the whole table — including the cases where the technique made things worse. See the 15-image benchmark and the quality ladder test.
Code that runs
Every code sample here is written to be pasted into a real project, with the error handling and security checks left in rather than trimmed for brevity — the PHP conversion pipeline is the clearest example.
Trade-offs stated plainly
Every technique costs something. AVIF encodes slowly. Lazy loading can wreck your LCP. Content negotiation can destroy a CDN cache hit ratio. I would rather name the cost than sell the technique.
Sources on every claim
Technical claims are checked against the specification, MDN, or the vendor's own documentation, and each guide lists what it used. If something here is wrong, tell me — corrections get made and dated.
Published guides
15 articles, newest first. All are reviewed and re-dated when the underlying behaviour changes.
-
Original Data 11 min read
We Converted 15 Real Images to WebP: Here’s What Actually Got Smaller
We stopped quoting the “25–34% smaller” averages and ran our own test: 15 real photos, screenshots, and logos through WebP at quality 80. The median file shrank 63%, the set went from 6.1 MB to 1.5 MB, and one image got bigger. Here are all the numbers.
-
Original Data 10 min read
What Quality Setting Should You Actually Use? A Quality Ladder Test
Everyone says “use quality 80” and nobody says why. We re-encoded the same four images at nine quality steps from 30 to 100 and recorded the file size at each stop, so you can see exactly where the curve flattens and where the artifacts start.
-
Troubleshooting 12 min read
Nine Image Optimization Mistakes That Quietly Cost You LCP
A diagnostic guide, not a listicle. Each mistake comes with the symptom you would see in DevTools or PageSpeed Insights, why it happens, and the exact fix — including the three that show up on almost every site we look at.
-
Image Formats 10 min read
WebP Browser Support in 2026 — and How to Ship a Fallback Anyway
WebP support is effectively universal in browsers now, but browsers are not the only thing that consumes your images. Here is the current support matrix, the places WebP still breaks, and four fallback patterns ranked by how much work they cost you.
-
Image Formats 11 min read
AVIF vs WebP vs JPEG XL: Choosing a Next-Gen Image Format
WebP is no longer the only modern format worth your attention. We compare AVIF, WebP, and JPEG XL on compression, browser support, encode cost, and the features that actually decide the choice — then give you a decision table.
-
Responsive Design 12 min read
Responsive Images Done Right: Mastering srcset, sizes, and picture
Serving one giant image to every device wastes bandwidth on phones and looks blurry on retina displays. Learn how srcset, sizes, and the picture element let the browser pick the right file for every screen — and why sizes is the attribute everyone gets wrong.
-
Core Web Vitals 13 min read
The Complete Guide to Optimizing Largest Contentful Paint (LCP)
LCP is the Core Web Vital that most often fails. This walks the four sub-parts of LCP in order, shows you how to measure each one in DevTools, and gives the specific fix for every common cause of a slow paint.
-
Frontend Performance 13 min read
Lazy Loading Implementation: Intersection Observer, Step by Step
The implementation companion to our lazy loading strategy guide. Build a production-grade Intersection Observer loader from scratch: background images, responsive srcset, iframes, decode handling, error fallbacks, and cleanup.
-
Technical SEO 11 min read
Image SEO: Alt Text, File Names, and Structured Data That Actually Rank
Optimized images do more than load fast — they can pull traffic from Google Images. Descriptive alt text, sensible file names, captions, image sitemaps, and the structured data that makes your photos eligible for rich results.
-
Image Fundamentals 12 min read
Lossy vs Lossless: How Image Compression Actually Works
Why does a photo shrink beautifully as a JPEG while a logo turns to mush? Walk through what an encoder really does — colour transforms, frequency analysis, quantisation, entropy coding — and why that predicts which of your images will compress well.
-
Delivery 12 min read
Faster Image Delivery: A Practical Guide to CDNs and Browser Caching
Optimizing the file is only half the battle — delivery is the other half. Cache-Control that actually works, immutable fingerprinted assets, the Vary header trap that breaks CDN caching for WebP, and how to read a cache hit ratio.
-
Core Web Vitals 11 min read
How Core Web Vitals Affect Your Search Rankings
A realistic account of how much Core Web Vitals move rankings, what the thresholds are, why field data beats lab data, and where images sit in the whole picture. Including the part most SEO posts get wrong about the 75th percentile.
-
Delivery 13 min read
Serving Next-Gen Image Formats with PHP
Build a small PHP layer that converts images to WebP on first request, caches the result to disk, and serves the right format per browser — no plugin, no third-party service. Complete working code, including the security mistakes to avoid.
-
Frontend Performance 11 min read
Lazy Loading Strategy: What to Defer, What to Prioritise, and Why
The decision guide, not the code. Which images should be lazy, which should be eager, where fetchpriority fits, how the browser actually decides when to fetch a deferred image, and the two rules that stop lazy loading from hurting you.
-
Frontend Performance 11 min read
Minifying CSS and JS Effectively
Stripping whitespace is the smallest win available. The real gains come from tree shaking dead code, splitting bundles, inlining critical CSS, and choosing the right compression on the wire. Here is the order to do them in.