Guide : Image Optimization

TL;DR — Image optimization signifie making votre pictures plus petit donc pages charger rapide, sans making les regarder mauvais. Utiliser a modern format comme WebP, compress le fichier, et ne pas servir a picture c’est façon bigger que il montre on screen. Le un règle personnes break la plupart: le big image à le very top de votre page devrait charger correct away — jamais “lazy charger” que un. Doing ce bien ne fait pas magically boost votre rankings, et il ne fait pas guarantee a passing speed score soit — il simplement rend votre pages rapide, et speed est ce que counts, donc vérifier votre réel résultats avant et après.

Ce que image optimization en réalité fait

«Images are almost always the heaviest thing on a web page. Google’s own docs say images are “often the largest contributor to overall page size, which can make pages slow and expensive to load.” So optimizing them is really about one thing: cutting the bytes your visitor has to download, so your page shows up quickly.

» (Traduction) (Résumé en français de la section cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«The part that surprises people: the format itself is not a ranking boost. Switching your JPEGs to WebP won’t lift your positions on its own. What it does is make the files smaller, which makes the page faster, and speed is what helps. This is the sister article to the broader Image SEO hub — that one covers alt text, filenames, and image search; this one is the hands-on “make it load fast” guide. » (Traduction) (Résumé en français de la section six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## The handful of things that matter » (Traduction) (Résumé en français de la section sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Use a modern format. WebP and AVIF make files much smaller than old JPEGs and PNGs without looking worse. WebP is the safe default today. » (Traduction) (Résumé en français de la section huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Compress it. Even a WebP can be too big. Run images through a compressor and find the point where the file is small but still looks fine. » (Traduction) (Résumé en français de la section huit, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Don’t serve a giant image into a small space. If a picture only shows at 500 pixels wide, you don’t need a 3,000-pixel file — that’s wasted download. » (Traduction) (Résumé en français de la section huit, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Lazy-load images down the page. Adding loading="lazy" tells the browser to wait until you scroll near an image before loading it. Great for images below the fold. » (Traduction) (Résumé en français de la section huit, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Never lazy-load the big top image. The largest image people see when the page first loads is the one Google times your speed against. That one should load immediately. » (Traduction) (Résumé en français de la section huit, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

The chose la plupart personnes obtenir incorrect

Ils lazy-charger tout — notamment le hero image à le top. Il sounds smart (“load less stuff!”) mais c’est backwards: le top image est le un votre page-speed score est mesuré contre, donc delaying il rend votre score pire. Charger il eagerly, et tell le navigateur c’est important. Je expliquer exactly comment dans le Avancé tab.

Vouloir le precise version — le exact Google citations, WebP-vs-AVIF trade-offs, le sizing math, et le fetchpriority trick — switch à le Avancé tab.

«> TL;DR — Image optimization is a page-speed / Core Web Vitals discipline, not a

direct ranking lever. Format choice (WebP, AVIF) shrinks bytes but gives no SEO boost — Mueller has said so three separate ways; also weigh transparency, animation, and current browser support, not just compression ratio. The single most valuable rule: never lazy-load your LCP image (usually the hero); that delays the very metric you’re optimizing. Give it loading="eager" + fetchpriority="high", though priority hints only help a discovery/fetch-timing bottleneck, not every LCP problem. Native loading="lazy" is for images outside the initial viewport — not a fixed “below the fold” pixel line. Compression has no universal “right” quality — test per image type. Correct dimensions = rendered container size × device pixel ratio, and that container size itself shifts with responsive layout, so deliver a srcset/sizes range (a wrong sizes value quietly downloads an oversized image) with a <picture> fallback. Images are the most common LCP element on the web, which is why this article cross-lists into Web Performance — but none of this guarantees a passing Core Web Vitals score, a ranking change, or more traffic; measure before and after. » (Traduction) (Résumé en français de la section quatorze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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

Let me kill le biggest myth avant n’importe quoi sinon: image format est a speed lever, pas a classement lever. Converting à WebP or AVIF ne fait pas earn vous a classement bump. Il earns vous plus petit fichiers, qui earn vous a faster page, qui feeds Core Web Vitals — et c’est le partie recherche systèmes utiliser. Le chain est réel mais indirect, et collapsing il dans “next-gen formats rank better” est où la plupart concurrent guides go incorrect.

Google’s docs sont blunt à propos de pourquoi images matter pour speed: ils sont “souvent le largest contributor à overall page size, qui peut faire pages lent et expensive à charger,” et le advice est à “appliquer le latest image optimization et responsive image techniques à provide a élevé qualité et rapide utilisateur experience” (Recherche Google Central — Images). Remarque le framing: rapide utilisateur experience, pas a classement reward pour le fichier format.

Pour le ce que/pourquoi de image SEO overall — texte alternatif, filenames, image sitemaps, structured données, image-recherche classement — c’est le parent Image SEO hub’s job. Ce article est le canonical comment: formats, compression, sizing, et chargement stratégie.

Lead avec le règle everyone breaks: jamais lazy-charger votre LCP image

Si vous prendre un chose depuis ce page, prendre ce. Le Plus grand affichage de contenu (LCP) element — le biggest chose painted dans le viewport on charger — est “soit an image or a web font,” per web.dev (Optimize LCP), et on la plupart pages c’est an image: le hero, le featured image, le produit shot. web.dev puts le règle à propos de as bluntly as Google ever phrases n’importe quoi:

“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 est le nuance la plupart “just use lazy loading” advice misses entirely. Lazy-loading est great — pour images ci-dessous le fold. Appliquer il à le LCP image et vous actively delay le un metric vous êtes trying à améliorer. web.dev’s lazy-loading guide dit le même chose depuis le autre direction: “ne pas lazy-charger images que sont probable à être dans-viewport quand le page charge, surtout LCP images” (Navigateur-level lazy chargement).

j’ai fait le même argument dans mon propre LCP article on Ahrefs: le largest element “est généralement going à être a featured image or maybe le <h1> balise,” et le corrections suivre depuis que. “Si vous ne pas besoin le image, le la plupart impactful solution est à simplement obtenir rid de il. Si vous doit ont le image, Je suggest optimizing le size et qualité à garder il as petit as possible.” Vous devrait “lazy charger quelconque images que vous ne pas besoin immédiatement” — mais le flip side est a difficile règle Je put dans caps pour a reason: “Ne faites pas lazy charger images ci-dessus le fold!”

fetchpriority="high" on the LCP image

Pas lazy-loading le hero est necessary mais pas sufficient. À assurez-vous le LCP image charge as early as possible, hint son priority à le navigateur. Depuis web.dev:

“Vous pouvez hint à le navigateur as à qui resources sont la plupart important en utilisant le fetchpriority attribut… c’est a bon idea à définir fetchpriority=\"high\" on an <img> element si vous think c’est probable à être votre page’s LCP element.”

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

Dans mon LCP écrire-up Je décrire fetchpriority="high" le même façon — il “peut être utilisé on <img> or <link> balises et indique navigateurs à obtenir le image early” — et Je pair il avec Early Hints (a 103 réponse) as a complementary façon à commencer le récupérer avant le principal HTML même arrives. Donc le LCP recipe est: eager charger + fetchpriority="high" (+ Early Hints si votre stack prend en charge les). Tout sinon on lune page peut lazy-charger.

Treat fetchpriority et preload as bottleneck-spécifique outils, pas a guaranteed corriger. Ils aider quand le LCP image est découvert or récupéré late; ils ne faites pashing pour a lent serveur réponse, a rendre-blocking resource ahead de le image, or a genuinely oversized fichier. Confirmer qui bottleneck vous en réalité ont (PageSpeed Insights or Lighthouse breaks LCP dans son subparts) avant assuming a priority hint alone va déplacer le number.

Native loading="lazy" — gratuit, simple, et correct ci-dessous le fold

Pour chaque image que n’est pas dans le initial viewport, native lazy chargement est le easiest win dans performances. web.dev: “Vous pouvez utiliser le loading attribut à lazy-charger images sans le besoin à écrire custom lazy-loading code or utiliser a séparé 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, not a fixed “below the fold” line. “The fold” isn’t a fixed pixel count — it shifts with viewport size and layout. The actual test is whether the image is likely to be visible when the page first paints. Anything that is — and especially the LCP image — gets loading="eager" (the default), never lazy. » (Traduction) (Résumé en français de la section trente-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Prefer the native attribute over JS hacks. JavaScript lazy-loaders that hide the real URL in data-src and never expose a src risk not being indexed at all. Native loading="lazy" (or a clean IntersectionObserver) keeps the src visible to crawlers. The parent Image SEO hub covers that indexing caveat in full. » (Traduction) (Résumé en français de la section trente-quatre, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Modern formats: WebP vs. AVIF vs. JPEG/PNG » (Traduction) (Résumé en français de la section trente-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Formats sont où le myth-busting matters la plupart, donc let’s être precise à propos de ce que chaque buys vous — qui est bytes, pas rankings.

• WebP — “souvent a meilleur compression que JPEG, PNG, or GIF, offering les deux lossy et lossless compression” (web.dev — Image performances). Roughly 25–35% plus petit que JPEG avec near-universal navigateur prise en charge. Le sûr par défaut pour photos aujourd’hui.
• AVIF — “prend en charge les deux lossy et lossless compression, et tests ont affiché supérieur que 50% savings quand comparé à JPEG dans some cas.” Meilleur-dans-class compression, slightly moins universal prise en charge, donc pair il avec a WebP or JPEG fallback.
• JPEG — le universal fallback pour photographs.
• PNG — quand vous besoin transparency or crisp-edged graphics.
• SVG — logos et icons: vector, scales infinitely, tiny.

«Which format to reach for also depends on what the image needs to do, not just which one compresses hardest: transparency, animation, and how consistently a browser or tool supports that specific combination all factor into the choice alongside the raw size savings above — check current support for the exact feature you need, especially for anything animated, before you commit to one format as the default. » (Traduction) (Résumé en français de la section trente-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google Search supports “BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF” referenced in an <img> src. Serve the modern format with a graceful fallback using <picture>: » (Traduction) (Résumé en français de la section trente-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

<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 your safety net — older browsers and crawlers fall back to it, and it’s the URL Google actually indexes. » (Traduction) (Résumé en français de la section quarante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«### Does format affect rankings? (No — and Mueller has said so three ways) » (Traduction) (Résumé en français de la section quarante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«This is the single myth-busting thread worth pulling through the whole topic. Three separate, independently-timed John Mueller statements all land on the same conclusion — format affects crawl/index mechanics and page weight, never ranking directly: » (Traduction) (Résumé en français de la section quarante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«1. AVIF gives no SEO boost. After Google added native AVIF support, Mueller confirmed there’s no “SEO boost” for using AVIF over other supported formats (SE Roundtable coverage). 2. WebP is “fine.” “WebP images are fine for Image Search” — “fine,” notably, not “better” (SE Roundtable coverage). 3. WebP indexing quirks aren’t format-specific. When people saw WebP files show as “Crawled – currently not indexed” in GSC, Mueller’s point was that image files aren’t indexed as HTML pages, and he didn’t believe the phenomenon was limited to WebP at all (SEJ coverage). » (Traduction) (Résumé en français de la section quarante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«These rep statements are quoted via verbatim secondary coverage (SE Roundtable, Search Engine Journal) of office-hours and social posts rather than a deep-linkable primary page; they’re the same citations used in the parent Image SEO hub, kept consistent here. The SEJ piece paraphrases/summarizes Mueller rather than block-quoting him. » (Traduction) (Résumé en français de la section quarante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Compression and quality: there’s no universal “right” setting » (Traduction) (Résumé en français de la section quarante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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à n’est pas a universal paramètre suitable pour tout cas. Le recommended approche voudrait être à experiment avec différent compression levels jusqu’à vous trouver a bon compromise entre image qualité et fichier size.”

Practically: tester per image type. Photographs tolerate aggressive lossy compression bien; graphics, logos, et screenshots avec texte montrer artifacts quickly et souvent vouloir lossless or a plus élevé qualité paramètre. Au lieu de trusting un slider, export le même image à deux or three qualité levels et eyeball les à afficher size — le smallest un vous pouvez’t visually distinguish depuis le original est votre réponse. c’est a réel workflow, pas “exécuter il via TinyPNG et hope.”

«## Correct dimensions: container size × device pixel ratio » (Traduction) (Résumé en français de la section cinquante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

“Just make it smaller” n’est pas le règle — matching le rendu size × le device pixel ratio (DPR) est. Depuis web.dev:

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

“Si le device a a DPR de 2 et le image est affiché dans a 500 pixel par 500 pixel container, alors a square 1000 pixel image… est maintenant le optimal size.”

«So a 500×500 container on a 2× (Retina-class) display wants a 1,000×1,000 source. Go bigger than that and you waste bytes with no perceptible gain; go smaller and it looks soft on high-DPR screens. This is why you serve a range of sizes and let the browser pick, using srcset + sizes: » (Traduction) (Résumé en français de la section cinquante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

<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">

«The browser reads the container width (sizes) and its own DPR, then picks the right candidate from srcset — the responsive-delivery version of the DPR math above. Google recommends <picture> or srcset for responsive images and says to “always specify a fallback URL using the src attribute.” » (Traduction) (Résumé en français de la section cinquante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Obtenir sizes incorrect et rien warns vous. Si le valeur vous declare ne fait pas match comment wide le image en réalité renders — a courant bug après a layout or CSS modifier — le navigateur a aucun façon à know que et simplement picks a candidate fondé on le inaccurate number vous gave il, qui typically signifie il downloads a plus grand fichier que le layout nécessite. Que silently undoes le format et compression fonctionner ci-dessus. Le seulement fiable façon à catch il: ouvrir DevTools’ Network panel, trouver le image requête, et comparer le delivered fichier’s dimensions contre le container’s réel rendu width.

Que 500×500 exemple ci-dessus est illustrative, pas a site-wide number à difficile-code — le même hero image peut rendre à a différent width on mobile que on desktop, donc “container size” moves avec votre responsive layout plutôt que staying fixed. c’est exactly pourquoi vous deliver a srcset range au lieu de exporting un “optimal” size et appel il fait.

Pourquoi ce tout ties back to Core Web Vitals

Le throughline connecting chaque technique ci-dessus est LCP. Images sont le la plupart courant LCP element on le web, et LCP est un de le three Core Web Vitals. Google’s cible: “LCP devrait occur dans 2,5 seconds” à le 75th percentile de page charge à travers mobile et desktop (web.dev — Vitals). Core Web Vitals “appliquer à tout pages web, devrait être mesuré par tout site owners, et va être surfaced à travers tout Google outils.”

Donc image optimization n’est pas a discrete facteur de classement — c’est a contributor à a page-experience signal (Core Web Vitals) que classement systèmes faire utiliser. Que distinction est le précis framing, et c’est pourquoi ce article lives dans les deux le Image SEO cluster et le Web Performances cluster. Pour le deep dive on le metric itself, voir Core Web Vitals et LCP dans Web Performances.

Un plus caution worth stating plainly: none de le corrections on ce page guarantee n’importe quoi. Image bytes sont seulement un possible component de LCP — web.dev’s propre breakdown de LCP subparts inclut choses comme serveur réponse temps et ressources qui bloquent le rendu ahead de le image, none de qui format or compression touch — et image dimensions sont seulement un entrée dans CLS, pas a guarantee de a particulier score. Shrinking a hero image peut measurably aider, ne faites pashing, or (si quelque chose sinon est le réel bottleneck) barely déplacer le number à tout. Optimizing images aussi ne fait pas itself guarantee a passing Core Web Vitals assessment, a classement modifier, plus trafic, plus conversions, or an AI-recherche citation — ceux depend on far plus que image bytes. Treat chaque image corriger as a hypothesis, pas a fait deal: mesurer LCP et CLS avant et après, dans le lab et dans le champ, et let que données — pas le assumption que optimizing “worked” — tell vous si il déplacé n’importe quoi.

Courant implementation pitfalls

• CSS background images ne sont pas indexé. Devs parfois swap an <img> pour a background-image pour layout convenience. Google “peut trouver images dans le src attribut de <img> element (même quand c’est a child de autre elements, tel as le <picture> element)” mais “ne fait pas indexer CSS images.” Si vous vouloir le image dans recherche d’images, garder il dans an <img>. (Ce un’s performance-adjacent, mais le mistake est courant suffisant à flag.)
• ne pas bulk-rename existing fichiers pour a performances/SEO “refresh.” Mueller has said it takes “a lot de time” pour Google’s systèmes à reprocess renamed images et le effect est minimal si votre context est déjà bon — le parent Image SEO hub covers ce dans complet.
• Manquant width/height. Toujours définir intrinsic width et height (or CSS aspect-ratio) donc le navigateur peut reserve space avant le image charge — ce reduces image-driven layout shift, mais c’est un entrée dans CLS parmi plusieurs, pas a guarantee de a particulier score.

Rapide recipe

• Hero / LCP image: modern format, right-sized, loading="eager", fetchpriority="high".
• Tout ci-dessous le fold: loading="lazy".
• Servir WebP/AVIF avec a <picture> src fallback.
• Size à container × DPR; deliver a srcset range avec sizes.
• Compress per image type — tester 2–3 qualité levels, ne pas confiance un slider.
• Toujours définir width/height.

Pour le rest de image SEO — texte alternatif, filenames, image sitemaps, données structurées, et image-recherche classement — head back à le Image SEO hub.

AI summary

A condensed prendre on the Avancé version:

• Image optimization = speed, pas a classement lever. Format choice (WebP/AVIF) shrinks bytes → faster page → meilleur Core Web Vitals. il y a aucun direct classement boost pour le format itself — Mueller confirmed ce three séparé façons (AVIF “aucun SEO boost,” WebP “fine,” WebP indexation quirks ne sont pas format-spécifique).
• Le #1 règle: jamais lazy-charger votre LCP image. Le image probable à être visible quand le page premier paints (généralement le hero) times votre LCP; lazy-loading il delays le exact metric vous êtes fixing. Donner il loading="eager" + fetchpriority="high" (optionally Early Hints) — though priority hints seulement corriger a discovery/récupérer-timing bottleneck, pas chaque LCP problème (vérifier LCP’s subparts avant assuming a hint alone va aider).
• Native loading="lazy" est gratuit et correct — pour images à l’extérieur le initial viewport, pas a fixed “ci-dessous le fold” pixel line. Éviter JS lazy-loaders que hide l’URL dans data-src.
• Formats: WebP est le sûr par défaut (~25–35% plus petit que JPEG); AVIF compresses plus loin (50%+ dans some tests) avec a fallback. Choice aussi dépend on transparency, animation, et actuel navigateur/outil prise en charge, pas simplement compression ratio. Servir via <picture> avec an <img src> fallback que Google indexes.
• Compression: aucun universal “right” qualité — tester per image type (photos compress difficile; texte/graphics artifact rapide).
• Sizing: correct size = rendu container size × device pixel ratio (500px container à 2× DPR = 1,000px source) — et que container size itself shifts avec responsive layout, donc 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 sont le la plupart courant LCP element; LCP cible est 2,5s à le 75th percentile. c’est pourquoi ce cross-lists dans Web Performances — mais LCP a autre subparts (serveur réponse temps, ressources qui bloquent le rendu) que image bytes alone ne pas corriger.
• Aucun guarantees: optimizing images ne fait pas itself guarantee a passing Core Web Vitals score, a classement modifier, plus trafic, plus conversions, or an AI-recherche citation. Mesurer LCP/CLS avant et après, dans le lab et le champ.
• Pitfalls: CSS background-image n’est pas indexé; ne pas bulk-rename fichiers; toujours définir width/height — il peut reduce layout shift mais ne fait pas guarantee a particulier CLS score.

«## Official documentation » (Traduction) (Résumé en français de la section soixante-seize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Primary-source documentation from the search engines and the Chrome team. » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google / web.dev » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Image performance (web.dev “Learn Performance”) — formats, the “no universal compression setting” point, and the DPR sizing math. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Browser-level image lazy loading (web.dev) — how native loading="lazy" works and the “don’t lazy-load in-viewport / LCP images” exception. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Optimize LCP (web.dev) — fetchpriority, the LCP resource is an image or font, and “never lazy-load your LCP image.” » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Fetch Priority API (web.dev) — the full fetchpriority="high" explainer for LCP images. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Web Vitals (web.dev) — Core Web Vitals definitions and the LCP ≤ 2.5s / 75th-percentile threshold. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- Google Images best practices — supported formats, <img>/<picture> indexing (not CSS backgrounds), responsive images, and the fallback-src recommendation. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.)

«Bing / Microsoft » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Bing does not publish an image-optimization-specific technical guide as detailed as Google’s; the relevant guidance lives inside the general Bing Webmaster Guidelines, which treat page speed (including image weight) as a consideration. I’m flagging this honestly rather than manufacturing a Bing “quote” that doesn’t exist. » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Bing Visual Search — object-level visual search; relevant to image discovery, separate from the page-speed effects of format/compression. » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section quatre-vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Google’s Chrome team et Recherche Advocates. Où une page exposes le texte, le lien est a deep lien que jumps à le quoted passage.

web.dev (Google Chrome team) — le LCP règles

«- “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 » (Traduction) (Résumé en français de la section quatre-vingt-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Don’t lazy-load images that are likely to be in-viewport when the page loads, especially LCP images.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-cinq, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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. » (Traduction) (Résumé en français de la section quatre-vingt-cinq, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«web.dev (Google Chrome team) — formats, compression, sizing » (Traduction) (Résumé en français de la section quatre-vingt-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “WebP often has better compression than JPEG, PNG, or GIF, offering both lossy and lossless compression.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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 performance. » (Traduction) (Résumé en français de la section quatre-vingt-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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 performance. » (Traduction) (Résumé en français de la section quatre-vingt-sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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 performance. » (Traduction) (Résumé en français de la section quatre-vingt-sept, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

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 » (Traduction) (Résumé en français de la section quatre-vingt-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«web.dev — Core Web Vitals » (Traduction) (Résumé en français de la section quatre-vingt-dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “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 » (Traduction) (Résumé en français de la section quatre-vingt-onze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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

• On AVIF: là est aucun “SEO boost” pour en utilisant AVIF fichiers. Coverage
• On WebP: “WebP images sont fine pour Image Recherche.” Coverage

Image optimization checklist

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

• Identified le LCP image (généralement le hero / featured image / premier produit shot).
• LCP image est pas lazy-chargé — il utilise loading="eager" (le par défaut).
• LCP image a fetchpriority="high" (considérer Early Hints si votre stack prend en charge il).
• Chaque image ci-dessous le fold a loading="lazy".
• Modern format servi (WebP par défaut, AVIF où pris en charge) avec a <picture> src fallback.
• Chaque image est sized à son container × device pixel ratio — aucun 3,000px fichiers dans 500px slots.
• Responsive delivery via srcset + sizes où images rendre à différent widths.
• Compression testé per image type (2–3 qualité levels comparé à afficher size), pas un blanket paramètre.
• Intrinsic width et height (or CSS aspect-ratio) définir on chaque image à reduce layout shift (CLS) — pas a guarantee de a spécifique score.
• Aucun contenu image lives seulement dans a CSS background-image (ceux ne sont pas indexé).
• Lazy chargement utilise le native attribut (or clean IntersectionObserver), pas a JS hack que hides l’URL dans data-src.
• Verified LCP dans le champ (CrUX / PageSpeed Insights), aiming pour ≤ 2,5s à le 75th percentile.

«## Image optimization cheat sheet » (Traduction) (Résumé en français de la section cent deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«The levers — what each does and the best practice » (Traduction) (Résumé en français de la section cent trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«| Lever | What it does | Best practice | | --- | --- | --- | | Format | Shrinks file size → faster page; no direct ranking boost | WebP default, AVIF where supported, <picture> with src fallback | | Compression | Trades quality for bytes | No universal setting — test 2–3 quality levels per image type | | Dimensions | Wrong size wastes bytes or looks soft | Container size × DPR (500px @ 2× = 1,000px source) | | Responsive delivery | Right-sized image per device | srcset + sizes; browser picks by width & DPR | | loading="lazy" | Defers off-screen images | Below the fold only — never the LCP image | | LCP image | Times your Largest Contentful Paint | loading="eager" + fetchpriority="high"; never lazy-load | | width/height | Reserves layout space | Always set intrinsic dimensions — reduces CLS, doesn’t guarantee a score | | <img> vs CSS bg | Only <img> gets indexed | Keep content images in <img>, not background-image | » (Traduction) (Résumé en français de la section cent quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Fast facts » (Traduction) (Résumé en français de la section cent cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Format is a speed lever, not a ranking lever — Mueller: no AVIF “SEO boost”; WebP “fine.” » (Traduction) (Résumé en français de la section cent cinq, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- WebP ≈ 25–35% smaller than JPEG; AVIF often 50%+ smaller in tests. » (Traduction) (Résumé en français de la section cent cinq, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- The single highest-value rule: never lazy-load your LCP image. » (Traduction) (Résumé en français de la section cent cinq, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- LCP target: ≤ 2.5s at the 75th percentile (mobile + desktop). » (Traduction) (Résumé en français de la section cent cinq, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Supported formats: BMP, GIF, JPEG, PNG, WebP, SVG, AVIF. » (Traduction) (Résumé en français de la section cent cinq, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- Correct size = rendered container size × device pixel ratio. » (Traduction) (Résumé en français de la section cent cinq, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.)

«## The mistake that costs you your LCP score » (Traduction) (Résumé en français de la section cent huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Lazy-loading le hero image est le unique la plupart expensive mistake covered dans ce article, et c’est le un worth appel out on son propre avant le rest.

• Incorrect: applying loading="lazy" (or a JS lazy-loader) à le largest ci-dessus-le-fold image — généralement le hero, featured image, or premier produit shot. Pourquoi c’est incorrect: que image est presque toujours votre LCP element, et web.dev est explicit que lazy-loading il “va toujours lead à unnecessary resource charger delay, et va ont a negative impact on LCP.” Vous fin up delaying le exact metric vous étaient trying à améliorer. Faire à la place: donner le LCP image loading="eager" (le par défaut) plus fetchpriority="high", et reserve loading="lazy" pour tout ci-dessous le fold.

Trusting un blanket compression setting

• Incorrect: running chaque image via le même “compress to 80%” preset regardless de contenu. Pourquoi c’est incorrect: web.dev dit plainly que “là n’est pas a universal paramètre suitable pour tout cas” — a preset tuned pour photographs va over- compress logos, screenshots, et texte-heavy graphics dans visible artifacts. Faire à la place: export le même image à deux or three qualité levels et comparer les à réel afficher size; pick le smallest un vous pouvez’t tell apart depuis le original, per image type.

Sizing images off le fichier vous ont, pas le container

• Incorrect: diffusion whatever resolution le original fichier se produit à être (or a unique fixed size pour chaque layout), au lieu de matching le image à où il en réalité renders. Pourquoi c’est incorrect: per web.dev’s propre math, correct size est le rendu container size × le device’s pixel ratio — a 500×500 container à 2× DPR nécessite a 1 000×1 000 source, pas 500×500 et pas 3 000×3 000. Go bigger et vous waste bytes avec aucun visible gain; go plus petit et il semble soft on élevé-DPR screens. Faire à la place: deliver a srcset range avec sizes donc le navigateur peut pick le correct candidate pour le container et le device.

Hiding contenu réel images behind CSS

• Incorrect: swapping an <img> pour a background-image pour layout convenience. Pourquoi c’est incorrect: Google “ne fait pas indexer CSS images” — a contenu image que seulement exists as a background-image est invisible à recherche d’images même si c’est entièrement optimized sinon. Faire à la place: garder contenu images dans an <img> (or as le <img> fallback à l’intérieur a <picture>), et reserve CSS backgrounds pour purely decorative treatments.

Skipping width/height to “save markup”

• Incorrect: leaving intrinsic width et height (or a CSS aspect-ratio) off <img> balises. Pourquoi c’est incorrect: le navigateur ne peut pas reserve layout space avant le image charge, donc lune page jumps as chaque image arrives — hurting CLS, le Core Web Vital que sits alongside LCP. Faire à la place: toujours définir width/height (or aspect-ratio) on chaque image, même ones vous êtes aussi optimizing pour format et size.

The mental models

1. Jamais lazy-charger votre LCP image. Le unique highest-valeur règle dans le entier topic. Le largest ci-dessus-le-fold element — généralement an image — est ce que votre LCP est timed contre. Lazy-loading il ne fait pas enregistrer n’importe quoi; il simplement delays le metric vous êtes optimizing. Tout sinon on lune page est a candidate pour loading="lazy"; le LCP image jamais est.

2. il y a aucun universal compression paramètre. Treat “what quality should I compress to?” as a per-image question, pas a site-wide policy. Photographs tolerate aggressive lossy compression; texte-heavy graphics et screenshots ne pas. Le workflow est comparative — export à deux or three qualité levels et eyeball les à afficher size — pas a unique slider vous définir une fois et forget.

3. Correct size = container size × device pixel ratio. “Smaller is better” n’est pas le règle; matching est. Le optimal source dimensions sont le size le image en réalité renders à, multiplied par le device’s pixel ratio — a 500×500 container à 2× DPR veut a 1 000×1 000 source. Ce est le unique formula que devrait decide chaque image’s export size, et c’est pourquoi vous deliver a range via srcset plutôt que un fixed fichier.

4. Format est a speed lever, pas a classement lever. Collapse ce chain correctement: format choice → plus petit fichiers → faster page → meilleur Core Web Vitals → a signal classement systèmes faire utiliser. Skipping straight à “next-gen formats rank better” est le la plupart courant façon concurrent guides obtenir ce topic incorrect — Mueller a said il y a aucun direct SEO boost pour le format itself, three séparé times.

The standing KPIs pour image-driven vitesse de page

Ces sont le ongoing numbers que tell vous si votre image-optimization fonctionner est en réalité landing — séparé depuis 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