All guides

AVIF Encoder Effort: Speed vs File Size on 20 Photos

AVIF effort 9 took 13.8 times as long as the default effort 4 for files only 0.4 % smaller. Effort 0 encoded a photo in 34 ms at a 10 % size cost.

Formats & Compression ▸ 4 min read

Chroma Subsampling 4:2:0 vs 4:4:4: When It Matters and What It Costs

Full colour (4:4:4) made JPEG photos 28 % larger for under 2 points of quality, while WebP's sharp YUV gave screenshots 7–9 points for about 10 % more bytes.

Formats & Compression ▸ 4 min read

How Far Below the Fold Does Chrome Start Loading Lazy Images?

Chrome 154 requested lazy images up to about 1,200 pixels below the fold on phone, tablet and desktop, and DevTools throttling did not change that distance.

Performance Lab ▸ 4 min read

PNG, oxipng or Lossless WebP for Screenshots? 8 Captures Measured

Lossless WebP made our screenshots 59 % smaller than Chrome's PNGs with identical pixels. oxipng saved 45 %; its slow zopfli mode added only 1.4 %.

Formats & Compression ▸ 4 min read

Uploading AVIF to WordPress: What Our Shared Host Actually Did

WordPress 7.1.2 accepted our AVIF upload but created no image sizes, and the server sent it as application/octet-stream. Chrome still showed it, by sniffing.

WordPress Workflow ▸ 4 min read

Which WebP Quality to Use for Photos, Screenshots and Graphics

Across 28 images, the lowest WebP quality reaching SSIMULACRA2 70 ranged from 30 for flat graphics to 95 for a screenshot. One setting does not fit all.

Formats & Compression ▸ 4 min read

When Alt Text Breaks srcset: A WordPress sizes Quirk

WordPress checks for an existing sizes attribute by searching the whole img tag, alt text included. Five of our images lost sizes that way and downloaded full-size files on desktop.

WordPress Workflow ▸ 4 min read

We Audited Every Image on This Site: What We Found and Fixed

All 188 image loads were WebP and close to the right size on a phone. On desktop, a stale sizes value and a WordPress quirk sent oversized files; fixing them cut the category archive from 127 to 77 KB.

Performance Lab ▸ 5 min read

Client Hints on Image Requests: What Chrome Sends

Chrome 155 sent DPR, width and network hints with image requests only after Accept-CH, and to another origin only with Permissions-Policy delegation. Width was in device pixels.

Browser Behaviour ▸ 4 min read

WebP alphaQuality: How Low Can Transparency Go?

Lowering alphaQuality from 100 to 80 saved 5 to 15 % with near-exact transparency. At 50 soft shadows degraded, and for logos lossless WebP was smaller and perfect.

Formats & Compression ▸ 4 min read

Animated GIF vs WebP vs AVIF: Three Animations Measured

A two-second photo pan was 2,176 KB as GIF and 64 KB as AVIF. For a flat animated chart, lossless WebP was smallest at 3.7 KB. Lossy animated WebP scored worst.

Formats & Compression ▸ 4 min read

Video Poster Images and LCP: Same as an img?

A video poster was discovered as early as an img, got the same priority and counted as the LCP element with the same timing, 1,316 ms against 1,320 ms. It cannot use srcset.

Browser Behaviour ▸ 3 min read

A Base64 Image Inside Your CSS: What It Does to First Paint

Embedding a 54 KB photo in the stylesheet delayed the first paint of the whole page from 404 to 788 ms on a throttled phone. The image itself appeared only 85 ms sooner.

Performance Lab ▸ 3 min read

Our Theme Lazy-Loaded the First Archive Image: What WordPress Does Instead

Forcing loading=lazy on archive cards overrode WordPress. Letting WordPress 7.1.2 decide gave the first card fetchpriority=high, and it was requested 360 to 500 ms sooner.

WordPress Workflow ▸ 5 min read

Progressive vs Baseline JPEG: File Size and What Visitors See

Progressive JPEGs were 2.8 to 4.3 % smaller at equal quality. On a slow connection they showed the whole image at 1.6 s, while baseline had drawn half its height at 4.6 s.

Formats & Compression ▸ 4 min read

Native Lazy Loading vs lazysizes vs IntersectionObserver

All three cut LCP from 1,464 ms to 944 to 1,116 ms. Native lazy loading fetched one image more up front and was slowest after a long jump; it needs no JavaScript.

Browser Behaviour ▸ 4 min read

SVG Icons: Separate Files, a Sprite or Inline?

Twenty icons took 20 requests and arrived at 883 ms as separate files, one request and 362 ms as a sprite, and no request as inline SVG, which added 2.2 KB to the HTML.

Formats & Compression ▸ 4 min read

Carousel Slides: fetchpriority=low Did Not Help, loading=lazy Did

Hidden slides with fetchpriority=low still downloaded and LCP stayed at 5.0 s. With loading=lazy they were never requested, and LCP fell to 1.3 s.

Browser Behaviour ▸ 4 min read

picture for Dark Mode and Reduced Motion: What Chrome Downloads

With prefers-color-scheme and prefers-reduced-motion sources, Chrome downloaded only the matching image, and fetched the other chart only when the colour scheme changed.

Browser Behaviour ▸ 3 min read

Chrome’s Image Priorities: Medium, Low and the Boost to High

Chrome 155 gave the first five images Medium priority and the rest Low, then raised only the images in the first screen to High once the page was laid out.

Browser Behaviour ▸ 4 min read

When Does Chrome Request an Image? Six Ways to Reference It, Timed

An img tag in the HTML was requested at 173 ms. The same image as a CSS background or inserted by a script waited for the stylesheet until 345 to 370 ms, and a data-src swap until 1,290 ms.

Browser Behaviour ▸ 4 min read

Retina Screenshots: What a 2× File Really Costs

Four times the pixels cost 1.8 to 3.9 times the bytes. A 2× AVIF screenshot was about the size of a 1× JPEG, and its text was visibly sharper on 2× screens.

Formats & Compression ▸ 4 min read

object-fit: cover and srcset: Blurry Images and Hidden Bytes

Setting sizes to the box width made object-fit: cover enlarge a file a third too narrow. Files cropped to the box were sharp and 35 to 54 % smaller than the best srcset choice.

Responsive Delivery ▸ 4 min read

sizes for Grid Layouts: What 100vw Costs in a Card Grid

In a one- to four-column grid, sizes=100vw made Chrome download up to 556 KB for four cards where 92 KB was enough. A matching sizes list or sizes=auto picked the right files.

Responsive Delivery ▸ 4 min read

How Many srcset Widths Do You Need? Seven Candidate Lists Compared

Across 18 photos, candidates every 100 px wasted 6 % extra bytes on average and every 200 px 21 %. WordPress's default list wasted 56 % because nothing sits between 300 and 768 px.

Responsive Delivery ▸ 4 min read

What a Page Cache Did to This Site’s Server Response Time

Enabling the page cache cut our HTML response time from 358 to 420 ms down to about 193 ms, as fast as a static image. Uncached search and API requests did not change.

Performance Lab ▸ 4 min read

Hero Image Bytes vs LCP: About Half a Second per 100 KB on Slow 4G

On a 1.6 Mbit/s phone profile, LCP rose 5.14 ms per kilobyte of hero image, from 2,056 ms at 327 KB to 8,680 ms at 1,614 KB.

Performance Lab ▸ 4 min read

Inline CSS vs an External Stylesheet: First Paint on a Throttled Phone

Inlining our 20 KB stylesheet cut first paint from 600 to 312 ms on a throttled phone profile, but the main image appeared only 24 ms sooner.

Performance Lab ▸ 4 min read

A CLS of 1.0 From Our Own Stylesheet: What We Measured and Fixed

An external stylesheet plus the async AdSense script gave four of our pages a Lighthouse CLS of about 1.0. Inlining the same CSS brought it to 0.005 or less with the ads still loading.

Performance Lab ▸ 5 min read

Lighthouse LCP Request Discovery: What Each Hero Setup Gets

The insight passed only heroes with fetchpriority=high and flagged lazy and script-inserted ones, but simulated throttling reported the lazy hero 600 ms faster, the opposite of applied throttling.

Lighthouse Audits ▸ 3 min read

Does Lighthouse Catch Bad Alt Text? Ten Cases Tested

Lighthouse 13.5 failed only the image with no alt attribute. File names, the word image and alt text starting with Photo of all passed; redundant alt text was noted without affecting the score.

Lighthouse Audits ▸ 4 min read

Lighthouse ‘Avoid Enormous Network Payloads’: Where the Warning Starts

Lighthouse 13.5 warned from about 2.7 MB of transfer, with no extra penalty for heavier pages, and the performance score stayed at 75 from 1.6 to 13 MB while LCP reached 26 seconds.

Lighthouse Audits ▸ 3 min read

Which JPEGs Does Lighthouse Still Flag for Format or Compression?

Lighthouse 13.5 passed JPEGs up to quality 85 and flagged them from quality 90, plus PNG photos. A quality-80 JPEG passed although AVIF would have saved 54 %.

Lighthouse Audits ▸ 3 min read

When Lighthouse Flags Oversized Images, and How Accurate Its Savings Are

Lighthouse 13.5 flagged a photo once it was about 8 % wider than its slot needed, not at 5 %. Its estimated savings were 14 to 29 % higher than what a real resize saved.

Lighthouse Audits ▸ 3 min read

Lighthouse Simulated vs Applied Throttling on Image-Heavy Pages

Applied throttling reported LCP 6 to 33 % higher than Lighthouse's default simulation on three pages, and the simulated Speed Index ignored images entirely.

Lighthouse Audits ▸ 3 min read

How Much Do Lighthouse Results Vary Between Identical Runs?

On a local page, 15 Lighthouse runs all scored 100 with LCP within 3 ms. On our live home page, ten runs scored 94 to 97 while LCP spread from 1.5 to 2.6 seconds.

Lighthouse Audits ▸ 3 min read

Lighthouse ‘Explicit Width and Height’: Which Sizing Methods Pass

Lighthouse 13.5 accepted width and height attributes, CSS pixel sizes and CSS aspect-ratio, and flagged images with no size, a width attribute alone or a CSS width alone.

Lighthouse Audits ▸ 3 min read

Lighthouse Aspect Ratio Audit: It Flags Distortion You Cannot See

Lighthouse 13.5 flagged images stretched by as little as 0.9 %, while visible distortion started around 10 %. The fixes: size by one dimension, crop with object-fit.

Lighthouse Audits ▸ 3 min read

Lighthouse ‘Serves Images With Appropriate Resolution’: Where the Line Is

In a 300-pixel slot on Lighthouse's 1.75× mobile profile, files of 300 pixels or less were flagged as too low resolution and files from 350 pixels passed, against a stated expected size of 450.

Lighthouse Audits ▸ 3 min read

Cache Headers on a Shared WordPress Host: What Each File Type Gets

JPEG, PNG, WebP, SVG, font and script files on our host were cacheable for a year, but AVIF uploads came with the wrong content type and max-age=0. How to check and fix your own.

WordPress Workflow ▸ 3 min read