Guide : Image Optimization

TL;DR — Image optimization signifie making votre pictures plus petit so pages charger fast, sans making les regarder bad. Utiliser a modern format comme WebP, compress the fichier, and don’t serve a picture that’s façon bigger que it montre on screen. The un rule personnes break la plupart: the big image at the very top of votre page devrait charger correct away — jamais “lazy load” que un. Doing ce bien doesn’t magically boost votre rankings, and it doesn’t guarantee a passing speed score soit — it simplement rend votre pages fast, and speed is ce que counts, so vérifier votre réel results avant and après.

Ce que image optimization en réalité fait

Images are almost toujours the heaviest chose on a web page. Google’s propre docs dire images are “souvent the largest contributor to overall page size, qui peut faire pages slow and expensive to charger.” So optimizing les is really à propos de un chose: cutting the bytes votre visitor has to download, so votre page montre up quickly.

The partie que surprises personnes: the format itself n’est pas a ranking boost. Switching votre JPEGs to WebP won’t lift votre positions on its propre. Ce que it fait is faire the fichiers plus petit, qui rend lune page faster, and speed is ce que helps. Ce is the sister article to the broader Image SEO hub — que un covers texte alternatif, filenames, and image search; ce un is the hands-on “make it load fast” guide.

The handful of choses que matter

• Utiliser a modern format. WebP and AVIF faire fichiers beaucoup plus petit que old JPEGs and PNGs sans looking worse. WebP is the safe par défaut today.
• Compress it. Même a WebP peut be aussi big. Run images via a compressor and trouver the point où the fichier is petit but encore semble fine.
• Don’t serve a giant image into a petit space. Si a picture seulement montre at 500 pixels wide, vous don’t besoin a 3 000-pixel fichier — that’s wasted download.
• Lazy-load images bas lune page. Ajout loading="lazy" indique le navigateur to wait jusqu’à vous scroll near an image avant chargement it. Great pour images ci-dessous the fold.
• Jamais lazy-load the big top image. The largest image personnes voir quand lune page premier loads is the un Google times votre speed contre. Que un devrait charger immédiatement.

The chose la plupart personnes obtenir incorrect

Ils lazy-load everything — notamment the hero image at the top. It sounds smart (“load less stuff!”) but it’s backwards: the top image is the un votre page-speed score is mesuré contre, so delaying it rend votre score worse. Charger it eagerly, and tell le navigateur it’s important. I expliquer exactly how in the Avancé tab.

Vouloir the precise version — the exact Google quotes, WebP-vs-AVIF trade-offs, the sizing math, and the fetchpriority trick — switch to the Avancé tab.

TL;DR — Image optimization is une page-speed / Core Web Vitals discipline, pas a direct ranking lever. Format choice (WebP, AVIF) shrinks bytes but donne aucun SEO boost — Mueller has said so three separate façons; aussi weigh transparency, animation, and current navigateur prise en charge, pas simplement compression ratio. The unique la plupart valuable rule: jamais lazy-load votre LCP image (usually the hero); que delays the very metric you’re optimizing. Give it loading="eager" + fetchpriority="high", though priority hints seulement aider a discovery/fetch-timing bottleneck, pas every LCP problem. Native loading="lazy" is pour images outside the initial viewport — pas a fixed “below the fold” pixel line. Compression has aucun universal “right” quality — tester per image type. Correct dimensions = rendered container size × device pixel ratio, and que container size itself shifts with responsive layout, so deliver a srcset/sizes range (a incorrect sizes valeur quietly downloads an oversized image) with a <picture> fallback. Images are the la plupart courant LCP element on the web, qui is pourquoi ce article cross-lists into Web Performances — but none of ce guarantees a passing Core Web Vitals score, a ranking modifier, or plus trafic; mesurer avant and après.

Ce que image optimization optimizes pour (définir the myth up front)

Let me kill the biggest myth avant anything sinon: image format is a speed lever, pas a ranking lever. Converting to WebP or AVIF ne fait pas earn vous a ranking bump. It earns vous plus petit fichiers, qui earn vous a faster page, qui feeds Core Web Vitals — and that’s the partie search systems utiliser. The chain is réel but indirect, and collapsing it into “next-gen formats rank better” is où la plupart competitor guides go incorrect.

Google’s docs are blunt à propos de pourquoi images matter pour speed: they’re “souvent the largest contributor to overall page size, qui peut faire pages slow and expensive to charger,” and the advice is to “appliquer the latest image optimization and responsive image techniques to provide a élevé quality and fast utilisateur experience” (Recherche Google Central — Images). Remarque the framing: fast utilisateur experience, pas a ranking reward pour the fichier format.

Pour the ce que/pourquoi of image SEO overall — texte alternatif, filenames, image sitemaps, structured données, image-search ranking — that’s the parent Image SEO hub’s job. Ce article is the canonical how: formats, compression, sizing, and chargement strategy.

Lead with the rule everyone breaks: jamais lazy-load votre LCP image

Si vous prendre un chose from ce page, prendre ce. The Plus grand affichage de contenu (LCP) element — the biggest chose painted in the viewport on charger — is “soit an image or a web font,” per web.dev (Optimize LCP), and on la plupart pages it’s an image: the hero, the featured image, the product shot. web.dev puts the rule à propos de as bluntly as Google ever phrases anything:

“Jamais lazy-load votre LCP image, as que va toujours lead to unnecessary resource charger delay, and va have a negative impact on LCP.”

Ce is the nuance la plupart “just use lazy loading” advice misses entirely. Lazy-loading is great — pour images ci-dessous the fold. Appliquer it to the LCP image and vous actively delay the un metric you’re trying to améliorer. web.dev’s lazy-loading guide dit the même chose from the autre direction: “Don’t lazy-load images que are probable to be in-viewport quand the page loads, surtout LCP images” (Browser-level lazy chargement).

I’ve made the même argument in my propre LCP article on Ahrefs: the largest element “is usually going to be a featured image or maybe the <h1> tag,” and the fixes follow from que. “Si vous don’t besoin the image, the la plupart impactful solution is to simply obtenir rid of it. Si vous doit have the image, I suggest optimizing the size and quality to garder it as petit as possible.” You should “lazy charger quelconque images que vous don’t besoin immédiatement” — but the flip side is a hard rule I put in caps for a reason: “Ne faites pas lazy charger images ci-dessus the fold!”

fetchpriority="high" on the LCP image

Pas lazy-loading the hero is necessary but pas sufficient. To assurez-vous the LCP image loads as early as possible, hint its priority to le navigateur. From web.dev:

“Vous pouvez hint to le navigateur as to qui resources are la plupart important en utilisant the fetchpriority attribute… It’s a bon idea to définir fetchpriority=\"high\" on an <img> element si vous think it’s probable to be votre page’s LCP element.”

<img src="/hero.webp" alt="…" fetchpriority="high" width="1200" height="675">

In my LCP write-up I décrire fetchpriority="high" the même façon — it “peut be utilisé on <img> or <link> tags and indique navigateurs to obtenir the image early” — and I pair it with Early Hints (a 103 réponse) as a complementary façon to commencer the récupérer avant the principal HTML même arrives. So the LCP recipe is: eager charger + fetchpriority="high" (+ Early Hints si votre stack supports les). Everything sinon on lune page peut lazy-load.

Treat fetchpriority and preload as bottleneck-specific outils, pas a guaranteed fix. Ils aider quand the LCP image is découvert or récupéré late; ils ne faites pashing pour a slow server réponse, a render-blocking resource ahead of the image, or a genuinely oversized fichier. Confirmer qui bottleneck vous en réalité have (PageSpeed Insights or Lighthouse breaks LCP into its subparts) avant assuming a priority hint alone va déplacer the number.

Native loading="lazy" — free, simple, and correct ci-dessous the fold

Pour every image que isn’t in the initial viewport, native lazy chargement is the easiest win in performances. web.dev: “Vous pouvez utiliser the loading attribute to lazy-load images sans the besoin to écrire custom lazy-loading code or utiliser a separate JavaScript library.”

<img src="/below-the-fold.webp" alt="…" loading="lazy" width="800" height="600">

Two choses garder ce safe:

• Base it on the initial viewport, pas a fixed “below the fold” line. “The fold” isn’t a fixed pixel count — it shifts with viewport size and layout. The réel tester is si the image is probable to be visible quand lune page premier paints. Anything que is — and surtout the LCP image — obtient loading="eager" (the par défaut), jamais lazy.
• Préférer the native attribute over JS hacks. JavaScript lazy-loaders que hide the réel URL in data-src and jamais expose a src risk pas being indexé at tout. Native loading="lazy" (or a clean IntersectionObserver) garde the src visible to robots d’exploration. The parent Image SEO hub covers que indexation caveat in complet.

Modern formats: WebP vs. AVIF vs. JPEG/PNG

Formats are où the myth-busting matters la plupart, so let’s be precise à propos de ce que chaque buys vous — qui is bytes, pas rankings.

• WebP — “souvent has meilleur compression que JPEG, PNG, or GIF, offering les deux lossy and lossless compression” (web.dev — Image performances). Roughly 25–35% plus petit que JPEG with near-universal navigateur prise en charge. The safe par défaut pour photos today.
• AVIF — “supports les deux lossy and lossless compression, and tests have affiché supérieur que 50% savings quand comparé to JPEG in some cas.” Best-in-class compression, slightly moins universal prise en charge, so pair it with a WebP or JPEG fallback.
• JPEG — the universal fallback pour photographs.
• PNG — quand vous besoin transparency or crisp-edged graphics.
• SVG — logos and icons: vector, scales infinitely, tiny.

Qui format to reach pour aussi dépend on ce que the image nécessite to do, pas simplement qui un compresses hardest: transparency, animation, and how consistently a navigateur or outil supports que spécifique combination tout factor into the choice alongside the raw size savings ci-dessus — vérifier current prise en charge pour the exact fonctionnalité vous besoin, surtout pour anything animated, avant vous commit to un format as the par défaut.

Recherche Google supports “BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF” referenced in an <img> src. Serve the modern format with a graceful fallback en utilisant <picture>:

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="…" width="1200" height="800" loading="lazy">
</picture>

The <img src> at the bottom is votre safety net — older navigateurs and robots d’exploration fall back to it, and it’s l’URL Google en réalité indexes.

Fait format affecter rankings? (Aucun — and Mueller has said so three façons)

Ce is the unique myth-busting thread worth pulling via the whole topic. Three separate, independently-timed John Mueller statements tout land on the même conclusion — format affecte explorer/index mechanics and page weight, jamais ranking directement:

1. AVIF donne aucun SEO boost. Après Google ajouté native AVIF prise en charge, Mueller confirmed there’s aucun “SEO boost” pour en utilisant AVIF over autre pris en charge formats (SE Roundtable coverage).
2. WebP is “fine.” “WebP images are fine for Image Search” — “fine,” notably, pas “better” (SE Roundtable coverage).
3. WebP indexation quirks aren’t format-specific. Quand personnes saw WebP fichiers montrer as “Crawled – currently not indexed” in GSC, Mueller’s point was que image fichiers aren’t indexé as HTML pages, and he didn’t believe the phenomenon was limited to WebP at tout (SEJ coverage).

Compression and quality: there’s aucun universal “right” setting

The la plupart courant bad advice in image guides is a unique “compress to 80%” bullet. web.dev is explicit que aucun tel magic number exists:

“Quand compressing, là isn’t a universal setting suitable pour tout cas. The recommended approach voudrait be to experiment with différent compression levels jusqu’à vous trouver a bon compromise entre image quality and fichier size.”

Practically: tester per image type. Photographs tolerate aggressive lossy compression bien; graphics, logos, and screenshots with text montrer artifacts quickly and souvent vouloir lossless or a plus élevé quality setting. Au lieu de trusting un slider, export the même image at two or three quality levels and eyeball les at afficher size — the smallest un vous pouvez’t visually distinguish from the original is votre réponse. That’s a réel workflow, pas “run it via TinyPNG and hope.”

Correct dimensions: container size × device pixel ratio

“Just make it smaller” isn’t the rule — matching the rendered size × the device pixel ratio (DPR) is. From web.dev:

“An image affiché in a 500 pixel by 500 pixel container voudrait be optimally sized at 500 pixels by 500 pixels.”

“Si the device has a DPR of 2 and the image is affiché in a 500 pixel by 500 pixel container, alors a square 1000 pixel image… is now the optimal size.”

So a 500×500 container on a 2× (Retina-class) afficher veut a 1 000×1 000 source. Go bigger que que and vous waste bytes with aucun perceptible gain; go plus petit and it semble soft on high-DPR screens. Ce is pourquoi vous serve a range of sizes and let le navigateur pick, en utilisant srcset + sizes:

<img
  src="/photo-800.webp"
  srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 500px"
  alt="…" width="800" height="600" loading="lazy">

Le navigateur reads the container width (sizes) and its propre DPR, alors picks the correct candidate from srcset — the responsive-delivery version of the DPR math ci-dessus. Google recommends <picture> or srcset pour responsive images and dit to “toujours specify a fallback URL en utilisant the src attribute.”

Obtenir sizes incorrect and nothing warns vous. Si the valeur vous declare doesn’t match how wide the image en réalité renders — a courant bug après a layout or CSS modifier — le navigateur has aucun façon to know que and simply picks a candidate fondé on the inaccurate number vous gave it, qui typically signifie it downloads a plus grand fichier que the layout nécessite. Que silently undoes the format and compression fonctionner ci-dessus. The seulement reliable façon to catch it: ouvrir DevTools’ Network panel, trouver the image requête, and comparer the delivered file’s dimensions contre the container’s réel rendered width.

Que 500×500 exemple ci-dessus is illustrative, pas a site-wide number to hard-code — the même hero image peut render at a différent width on mobile que on desktop, so “container size” moves with votre responsive layout plutôt que staying fixed. That’s exactly pourquoi vous deliver a srcset range au lieu de exporting un “optimal” size and appel it fait.

Pourquoi ce tout ties back to Core Web Vitals

The throughline connecting every technique ci-dessus is LCP. Images are the la plupart courant LCP element on the web, and LCP is un of the three Core Web Vitals. Google’s target: “LCP devrait occur dans 2,5 seconds” at the 75th percentile of page loads à travers mobile and desktop (web.dev — Vitals). Core Web Vitals “appliquer to tout web pages, devrait be mesuré by tout site owners, and va be surfaced à travers tout Google outils.”

So image optimization isn’t a discrete ranking factor — it’s a contributor to a page-experience signal (Core Web Vitals) que ranking systems do utiliser. Que distinction is the accurate framing, and it’s pourquoi ce article lives in les deux the Image SEO cluster and the Web Performances cluster. Pour the deep dive on the metric itself, voir Core Web Vitals and LCP in Web Performances.

Un plus caution worth stating plainly: none of the fixes on ce page guarantee anything. Image bytes are seulement un possible component of LCP — web.dev’s propre breakdown of LCP subparts inclut choses comme server réponse temps and ressources qui bloquent le rendu ahead of the image, none of qui format or compression touch — and image dimensions are seulement un input into CLS, pas a guarantee of a particulier score. Shrinking a hero image peut measurably aider, ne faites pashing, or (si something sinon is the réel bottleneck) barely déplacer the number at tout. Optimizing images aussi doesn’t itself guarantee a passing Core Web Vitals assessment, a ranking modifier, plus trafic, plus conversions, or an AI-search citation — ceux depend on far plus que image bytes. Treat every image fix as a hypothesis, pas a fait deal: mesurer LCP and CLS avant and après, in the lab and in the field, and let que données — pas the assumption que optimizing “worked” — tell vous si it déplacé anything.

Courant implementation pitfalls

• CSS background images aren’t indexé. Devs parfois swap an <img> pour a background-image pour layout convenience. Google “peut trouver images in the src attribute of <img> element (même quand it’s a child of autre elements, tel as the <picture> element)” but “doesn’t index CSS images.” Si vous vouloir the image in recherche d’images, garder it in an <img>. (Ce one’s performance-adjacent, but the mistake is courant suffisant to flag.)
• Don’t bulk-rename existing fichiers pour a performances/SEO “refresh.” Mueller has said it takes “a lot of time” pour Google’s systems to reprocess renamed images and the effect is minimal si votre context is déjà bon — the parent Image SEO hub covers ce in complet.
• Manquant width/height. Toujours définir intrinsic width and height (or CSS aspect-ratio) so le navigateur peut reserve space avant the image loads — ce reduces image-driven layout shift, but it’s un input into CLS among several, pas a guarantee of a particulier score.

Rapide recipe

• Hero / LCP image: modern format, right-sized, loading="eager", fetchpriority="high".
• Everything ci-dessous the fold: loading="lazy".
• Serve WebP/AVIF with a <picture> src fallback.
• Size to container × DPR; deliver a srcset range with sizes.
• Compress per image type — tester 2–3 quality levels, don’t trust un slider.
• Toujours définir width/height.

Pour the rest of image SEO — texte alternatif, filenames, image sitemaps, données structurées, and image-search ranking — head back to the Image SEO hub.

AI summary

A condensed prendre on the Avancé version:

• Image optimization = speed, pas a ranking lever. Format choice (WebP/AVIF) shrinks bytes → faster page → meilleur Core Web Vitals. There’s aucun direct ranking boost pour the format itself — Mueller confirmed ce three separate façons (AVIF “no SEO boost,” WebP “fine,” WebP indexation quirks aren’t format-specific).
• The #1 rule: jamais lazy-load votre LCP image. The image probable to be visible quand the page premier paints (usually the hero) times votre LCP; lazy-loading it delays the exact metric you’re fixing. Give it loading="eager" + fetchpriority="high" (optionally Early Hints) — though priority hints seulement fix a discovery/fetch-timing bottleneck, pas every LCP problem (vérifier LCP’s subparts avant assuming a hint alone va aider).
• Native loading="lazy" is free and correct — pour images outside the initial viewport, pas a fixed “below the fold” pixel line. Éviter JS lazy-loaders que hide l’URL in data-src.
• Formats: WebP is the safe par défaut (~25–35% plus petit que JPEG); AVIF compresses plus loin (50%+ in some tests) with a fallback. Choice aussi dépend on transparency, animation, and current navigateur/outil prise en charge, pas simplement compression ratio. Serve via <picture> with an <img src> fallback que Google indexes.
• Compression: aucun universal “right” quality — tester per image type (photos compress hard; text/graphics artifact fast).
• Sizing: correct size = rendered container size × device pixel ratio (500px container at 2× DPR = 1,000px source) — and que container size itself shifts with responsive layout, so deliver a range via srcset + sizes plutôt que un fixed export. A incorrect sizes valeur silently rend le navigateur download an oversized candidate.
• Pourquoi c’est important: images are the la plupart courant LCP element; LCP target is 2,5s at the 75th percentile. That’s pourquoi ce cross-lists into Web Performances — but LCP has autre subparts (server réponse temps, ressources qui bloquent le rendu) que image bytes alone don’t fix.
• Aucun guarantees: optimizing images doesn’t itself guarantee a passing Core Web Vitals score, a ranking modifier, plus trafic, plus conversions, or an AI-search citation. Mesurer LCP/CLS avant and après, in the lab and the field.
• Pitfalls: CSS background-image isn’t indexé; don’t bulk-rename fichiers; toujours définir width/height — it peut reduce layout shift but doesn’t guarantee a particulier CLS score.

Documentation officielle

Primary-source documentation from the moteur de recherches and the Chrome team.

Google / web.dev

• Image performances (web.dev “Learn Performance”) — formats, the “no universal compression setting” point, and the DPR sizing math.
• Browser-level image lazy chargement (web.dev) — how native loading="lazy" fonctionne and the “don’t lazy-load in-viewport / LCP images” exception.
• Optimize LCP (web.dev) — fetchpriority, the LCP resource is an image or font, and “never lazy-load your LCP image.”
• Récupérer Priority API (web.dev) — the complet fetchpriority="high" explainer pour LCP images.
• Web Vitals (web.dev) — Core Web Vitals definitions and the LCP ≤ 2,5s / 75th-percentile threshold.
• Google Images meilleur practices — pris en charge formats, <img>/<picture> indexation (pas CSS backgrounds), responsive images, and the fallback-src recommendation.

Bing / Microsoft

• Bing fait pas publish an image-optimization-specific technical guide as detailed as Google’s; the relevant guidance lives à l’intérieur the general Bing Webmaster Guidelines, qui treat vitesse de page (notamment image weight) as a consideration. I’m flagging ce honestly plutôt que manufacturing a Bing “quote” que doesn’t exist.
• Bing Visual Search — object-level visual search; relevant to image discovery, separate from lune page-speed effects of format/compression.

Quotes from the source

On-the-record statements from Google’s Chrome team and Search Advocates. Où une page exposes the text, the lien is a deep lien que jumps to the quoted passage.

web.dev (Google Chrome team) — the LCP rules

• “Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay, and will have a negative impact on LCP.” Jump to quote
• “Don’t lazy-load images that are likely to be in-viewport when the page loads, especially LCP images.” Jump to quote
• “It’s a good idea to set fetchpriority=\"high\" on an <img> element if you think it’s likely to be your page’s LCP element.” — web.dev, Optimize LCP.

web.dev (Google Chrome team) — formats, compression, sizing

• “WebP often has better compression than JPEG, PNG, or GIF, offering both lossy and lossless compression.” Jump to quote
• “AVIF supports both lossy and lossless compression, and tests have shown greater than 50% savings when compared to JPEG in some cases.” — web.dev, Image performances.
• “When compressing, there isn’t a universal setting suitable for all cases. The recommended approach would be to experiment with different compression levels until you find a good compromise between image quality and file size.” — web.dev, Image performances.
• “An image displayed in a 500 pixel by 500 pixel container would be optimally sized at 500 pixels by 500 pixels.” … “If the device has a DPR of 2 … then a square 1000 pixel image … is now the optimal size.” — web.dev, Image performances.

Recherche Google Central — pourquoi images matter pour speed

• “images are often the largest contributor to overall page size, which can make pages slow and expensive to load.” Jump to quote

web.dev — Core Web Vitals

• “Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.” Jump to quote

John Mueller, Google — format n’est pas a ranking lever

• On AVIF: là is aucun “SEO boost” pour en utilisant AVIF fichiers. Coverage
• On WebP: “WebP images are fine for Image Search.” Coverage

Image optimization checklist

Run ce réussir on quelconque performance-sensitive page:

• Identified the LCP image (usually the hero / featured image / premier product shot).
• LCP image is pas lazy-loaded — it uses loading="eager" (the par défaut).
• LCP image has fetchpriority="high" (considérer Early Hints si votre stack supports it).
• Every image ci-dessous the fold has loading="lazy".
• Modern format served (WebP par défaut, AVIF où pris en charge) with a <picture> src fallback.
• Chaque image is sized to its container × device pixel ratio — aucun 3,000px fichiers in 500px slots.
• Responsive delivery via srcset + sizes où images render at différent widths.
• Compression testé per image type (2–3 quality levels comparé at afficher size), pas un blanket setting.
• Intrinsic width and height (or CSS aspect-ratio) définir on every image to reduce layout shift (CLS) — pas a guarantee of a spécifique score.
• Aucun content image lives seulement in a CSS background-image (ceux aren’t indexé).
• Lazy chargement uses the native attribute (or clean IntersectionObserver), pas a JS hack que hides l’URL in data-src.
• Verified LCP in the field (CrUX / PageSpeed Insights), aiming pour ≤ 2,5s at the 75th percentile.

Image optimization cheat sheet

The levers — ce que chaque fait and the meilleur pratique

Fast facts

• Format is a speed lever, pas a ranking lever — Mueller: aucun AVIF “SEO boost”; WebP “fine.”
• WebP ≈ 25–35% plus petit que JPEG; AVIF souvent 50%+ plus petit in tests.
• The unique highest-value rule: jamais lazy-load votre LCP image.
• LCP target: ≤ 2,5s at the 75th percentile (mobile + desktop).
• Pris en charge formats: BMP, GIF, JPEG, PNG, WebP, SVG, AVIF.
• Correct size = rendered container size × device pixel ratio.

The mistake que costs vous votre LCP score

Lazy-loading the hero image is the unique la plupart expensive mistake covered in ce article, and it’s the un worth appel out on its propre avant the rest.

• Incorrect: applying loading="lazy" (or a JS lazy-loader) to the largest above-the-fold image — usually the hero, featured image, or premier product shot. Pourquoi it’s incorrect: que image is almost toujours votre LCP element, and web.dev is explicit que lazy-loading it “va toujours lead to unnecessary resource charger delay, and va have a negative impact on LCP.” Vous fin up delaying the exact metric vous were trying to améliorer. Do à la place: give the LCP image loading="eager" (the par défaut) plus fetchpriority="high", and reserve loading="lazy" pour everything ci-dessous the fold.

Trusting un blanket compression setting

• Incorrect: running every image via the même “compress to 80%” preset regardless of content. Pourquoi it’s incorrect: web.dev dit plainly que “là isn’t a universal setting suitable pour tout cas” — a preset tuned pour photographs va over- compress logos, screenshots, and text-heavy graphics into visible artifacts. Do à la place: export the même image at two or three quality levels and comparer les at réel afficher size; pick the smallest un vous pouvez’t tell apart from the original, per image type.

Sizing images off the fichier vous have, pas the container

• Incorrect: serving whatever resolution the original fichier se produit to be (or a unique fixed size pour every layout), au lieu de matching the image to où it en réalité renders. Pourquoi it’s incorrect: per web.dev’s propre math, correct size is the rendered container size × the device’s pixel ratio — a 500×500 container at 2× DPR nécessite a 1 000×1 000 source, pas 500×500 and pas 3 000×3 000. Go bigger and vous waste bytes with aucun visible gain; go plus petit and it semble soft on high-DPR screens. Do à la place: deliver a srcset range with sizes so le navigateur peut pick the correct candidate pour the container and the device.

Hiding contenu réel images behind CSS

• Incorrect: swapping an <img> pour a background-image pour layout convenience. Pourquoi it’s incorrect: Google “doesn’t index CSS images” — a content image que seulement exists as a background-image is invisible to recherche d’images même si it’s entièrement optimized sinon. Do à la place: garder content images in an <img> (or as the <img> fallback à l’intérieur a <picture>), and reserve CSS backgrounds pour purely decorative treatments.

Skipping width/height to “save markup”

• Incorrect: leaving intrinsic width and height (or a CSS aspect-ratio) off <img> tags. Pourquoi it’s incorrect: le navigateur can’t reserve layout space avant the image loads, so lune page jumps as chaque image arrives — hurting CLS, the Core Web Vital que sits alongside LCP. Do à la place: toujours définir width/height (or aspect-ratio) on every image, même ones you’re aussi optimizing pour format and size.

The mental models

1. Jamais lazy-load votre LCP image. The unique highest-value rule in the whole topic. The largest above-the-fold element — usually an image — is ce que votre LCP is timed contre. Lazy-loading it doesn’t enregistrer anything; it simplement delays the metric you’re optimizing. Everything sinon on lune page is a candidate pour loading="lazy"; the LCP image jamais is.

2. There’s aucun universal compression setting. Treat “what quality should I compress to?” as a per-image question, pas a site-wide policy. Photographs tolerate aggressive lossy compression; text-heavy graphics and screenshots don’t. The workflow is comparative — export at two or three quality levels and eyeball les at afficher size — pas a unique slider vous définir une fois and forget.

3. Correct size = container size × device pixel ratio. “Smaller is better” isn’t the rule; matching is. The optimal source dimensions are the size the image en réalité renders at, multiplied by the device’s pixel ratio — a 500×500 container at 2× DPR veut a 1 000×1 000 source. Ce is the unique formula que devrait decide every image’s export size, and it’s pourquoi vous deliver a range via srcset plutôt que un fixed fichier.

4. Format is a speed lever, pas a ranking lever. Collapse ce chain correctement: format choice → plus petit fichiers → faster page → meilleur Core Web Vitals → a signal ranking systems do utiliser. Skipping straight to “next-gen formats rank better” is the la plupart courant façon competitor guides obtenir ce topic incorrect — Mueller has said there’s aucun direct SEO boost pour the format itself, three separate times.

The standing KPIs pour image-driven vitesse de page

Ces are the ongoing numbers que tell vous si votre image-optimization fonctionner is en réalité landing — separate from quelconque unique image vous resize or convert ce week.

Testez vos connaissances: Image Optimization

Five rapide questions on formats, compression, sizing, and chargement strategy. Pick an réponse pour chaque, alors vérifier.

Journal des modifications