Panduan Responsive Images (srcset)

TL;DR — Responsive images let sebuah browser muat sebuah right-sized versi dari sebuah picture alih-alih satu giant file — sebuah kecil satu pada sebuah phone, sebuah big satu pada sebuah desktop. Anda melakukan ini dengan srcset dan sizes attributes pada Anda <img> tag (list sizes Anda memiliki; browser picks). ini tidak secara langsung boost Anda rankings, tetapi ini membuat halaman lebih cepat dan berhenti them dari “jumping” (terjemahan) “jumping” sebagai images muat, dan speed adalah sesuatu Google measures.

Apa responsive images adalah

sebuah “responsive” (terjemahan) “responsive” image adapts untuk device looking di ini. alih-alih sending yang sama huge photo untuk sebuah phone dan sebuah desktop, Anda memberikan browser sebuah sedikit versi di berbeda sizes dan let ini grab satu itu fits. Phones mendapatkan sebuah kecil file; big screens mendapatkan sebuah big satu. Lebih sedikit wasted data, lebih cepat halaman.

ada dua cara untuk melakukan ini, dan ini adalah worth knowing yang adalah yang:

• srcset + sizes pada <img> — umum satu. sama picture, berbeda sizes. Anda list apa Anda memiliki dan browser chooses. ini adalah called resolution switching.
• ** <picture> element** — untuk ketika Anda ingin sebuah genuinely berbeda image di berbeda sizes (say, sebuah wide crop pada desktop dan sebuah tall, tight crop pada mobile), atau sebuah modern file format dengan sebuah fallback. ini adalah called art direction, dan sebagian besar situs jangan perlu ini.

basic versi

Di sini’s apa resolution switching looks like:

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

• src adalah Anda wajar, selalu-di sana fallback. pertahankan ini.
• srcset lists versi Anda memiliki dan bagaimana wide setiap satu adalah (1000w = 1000 pixels wide).
• sizes tells browser bagaimana big image akan sebenarnya muncul so ini dapat pick right file sebelum ini memuat apa pun.
• width dan height reserve space so halaman tidak jump sekitar sementara image memuat.
• alt adalah yang sama deskripsi Anda’d selalu tulis. pertahankan ini identical di seluruh setiap versi.

Mengapa bother ( honest jawaban)

Responsive images jangan earn Anda sebuah peringkat “boost.” (terjemahan) “boost.” Apa mereka melakukan adalah membuat halaman muat lebih cepat dan berhenti layout dari shifting — dan itu adalah hal Google measures sebagai bagian dari pengalaman halaman. jika sebuah speed alat (Lighthouse, PageSpeed Insights) adalah nagging Anda untuk “properly size images,” (terjemahan) “properly size images,” srcset/sizes adalah perbaiki ini adalah asking untuk.

Satu lebih hal: ini tidak perubahan apa menampilkan up di Google Images. Google indeks image di Anda src attribute — responsive variants adalah hanya pengiriman. So pertahankan alt text, filename, dan main image URL yang sama Tidak penting yang versi browser memuat.

ingin precise versi — w vs x descriptors, ketika Anda sebenarnya perlu <picture>, LCP dan layout-shift mechanics, dan mobile-pengindeksan aturan — switch untuk Advanced tab.

TL;DR — Dua jobs, satu syntax family. srcset/sizes pada <img> = resolution switching (sama image, browser picks best-fit — sebuah suggestion); <picture> = art direction atau format switching (author-dictated crops/formats — sebuah command). sebagian besar situs hanya perlu pertama. Responsive images adalah tidak sebuah direct sinyal peringkat dan jangan perubahan apa Google indeks — Google indeks src URL, so pertahankan alt text, filenames, dan image URLs stable di seluruh breakpoints (pengindeksan mobile-pertama). nyata payoff adalah Core Web Vitals: right-sizing images adalah perbaiki behind Lighthouse’s “Properly size images” (terjemahan) “Properly size images” audit (fails di sebuah 4KiB kesenjangan), dan width/height (atau aspect-ratio) — tidak srcset — adalah apa mencegah CLS. jangan lazy-muat LCP image. I reuse tepat srcset + width/height pattern dari my Ahrefs CLS piece.

Dua berbeda jobs, satu syntax family

Semuanya di ini topic collapses ke dua mechanisms, dan half confusion out di sana muncul dari mixing them up:

1. Resolution switching — yang sama image di berbeda sizes atau pixel densities. Anda memberikan browser sebuah menu dengan srcset dan sizes pada <img>, dan * browser* decides yang file untuk fetch berdasarkan viewport dan screen density. ini adalah umum case.
2. Art direction — sebuah genuinely berbeda image per condition: sebuah wide crop pada desktop, sebuah tight vertical crop pada mobile, atau sebuah berbeda file format entirely. Di sini Anda dictate pilihan dengan <picture> element.

web.dev Learn: Responsive images course frames perbedaan persis right: dengan srcset browser mendapatkan suggestions, whereas “itu picture element memberikan commands.” (terjemahan) “ tidak terdefinisi element memberikan commands.” dan cakupan-setting line worth tattooing pada wall, juga dari web.dev: “Anda probably tidak akan perlu untuk gunakan itu picture element untuk paling dari Anda responsive images — itu srcset dan sizes attributes pada itu img element cover a lot dari gunakan cases.” (terjemahan) “Anda probably tidak akan perlu untuk gunakan tidak terdefinisi element untuk sebagian besar dari Anda responsive images — tidak terdefinisi dan tidak terdefinisi attributes pada tidak terdefinisi element cover sebuah lot dari gunakan cases.” Reach untuk <picture> hanya ketika Anda sebenarnya perlu sebuah berbeda image, tidak sebuah berbeda size dari yang sama satu.

srcset dan sizes — resolution switching

w-descriptors vs. x-descriptors

srcset takes sebuah comma-separated list dari candidate files, setiap tagged dengan sebuah descriptor. ada dua jenis:

• Width descriptors (w) — Anda state setiap file’s intrinsic pixel width (puppy-2000.jpg 2000w). browser combines itu dengan Anda sizes nilai untuk berfungsi out yang file best fits space dan device’s pixel density. ini adalah flexible option dan apa Anda’ll gunakan sebagian besar dari time.
• Pixel-density descriptors (x) — Anda state yang file adalah untuk yang device pixel ratio (logo.png 1x, logo@2x.png 2x). gunakan ini untuk fixed-size images (sebuah avatar, sebuah logo) di mana displayed size tidak pernah perubahan; Anda tidak perlu sizes dengan x descriptors.

aturan dari thumb: fluid, konten-width images → w descriptors + sizes; fixed-size UI images → x descriptors.

Mengapa sizes penting (dan apa happens jika Anda skip ini)

dengan w descriptors, sizes tidak opsional cosmetics — ini adalah bagaimana browser knows bagaimana big image akan render so ini dapat choose sebelum layout. Per web.dev, sizes “tells itu browser apa size Anda expect itu image untuk menjadi displayed di under berbeda conditions,” (terjemahan) “tells browser apa size Anda expect image untuk menjadi displayed di di bawah berbeda conditions,” sebagai sebuah comma-separated list dari media conditions dan widths:

sizes="(max-width: 600px) 480px, 1000px"

Baca ini sebagai: “jika itu viewport adalah 600px atau lebih sempit, itu image akan menjadi tentang 480px wide; jika tidak, tentang 1000px.” (terjemahan) “jika viewport adalah 600px atau lebih sempit, image akan menjadi tentang 480px wide; jika tidak, tentang 1000px.” Omit sizes dan browser assumes image fills penuh viewport width (100vw) — so pada sebuah wide screen ini dapat pull Anda largest file untuk sebuah image itu’s sebenarnya rendering di 400px, diam-diam defeating seluruh poin. Missing sizes adalah single sebagian besar umum srcset mistake.

jangan guess di itu width nilai dari layout di Anda head — periksa image’s sebenarnya dirender CSS width di browser (DevTools → Elements → computed width dari <img> box) di setiap breakpoint Anda care tentang, dan set sizes untuk match. sebuah sizes nilai itu tidak match nyata dirender width masih penyebab browser untuk select wrong candidate bahkan though markup adalah syntactically correct — syntax validation alone tidak akan catch itu; see currentSrc periksa di bawah untuk konfirmasi apa sebenarnya dimuat.

Worked contoh (my reusable pattern)

ini adalah tepat pattern dari my Ahrefs piece, Apa adalah Cumulative Layout Shift (CLS) & cara meningkatkan ini, expanded dengan sizes:

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w,
          puppy-2000.jpg 2000w,
          puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

setiap piece adalah muat-bearing: src adalah fallback dan URL Google indeks; srcset lists candidates dengan w descriptors; sizes tells browser dirender width; width/height reserve space ( CLS perbaiki — lebih di bawah); alt tetap identical Tidak penting yang file memuat.

picture element — art direction dan format switching

Ketika Anda sebenarnya perlu ini

gunakan <picture> untuk dua hal srcset dapat’t melakukan:

1. Art direction — sebuah berbeda crop per breakpoint. web.dev’s contoh: pada sebuah sempit phone Anda mungkin sajikan tall, tight crop; pada sebuah wide desktop, sebuah pendek, wide satu. sama subject, dengan sengaja berbeda framing.
2. Format switching — offer AVIF/WebP dengan sebuah JPEG fallback melalui <sumber jenis="…">, letting browser take pertama format ini mendukung. ini ties straight back untuk format guidance pada Image SEO hub.

syntax (dan fallback aturan)

<picture> element wraps satu atau lebih <source> elements dan selalu ends dengan sebuah plain <img>:

<!-- Art direction: different crop per breakpoint -->
<picture>
  <source media="(max-width: 600px)" srcset="hero-crop-mobile.jpg">
  <img src="hero-crop-desktop.jpg" width="1200" height="675"
       alt="Product hero shot">
</picture>

<!-- Format switching: modern format with a fallback -->
<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" width="1200" height="675" alt="Product hero shot">
</picture>

«That trailing <img src> is not optional. Google states it directly: per section 4.8.1 of the HTML Standard, “make sure that you provide an img element as a fallback with a src attribute when using the picture element.” It’s the file older browsers and crawlers fall back to — and, again, the one Google indexes. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

melakukan srcset help SEO? Direct vs. indirect

Di sini’s framing setiap competing guide fumbles, so I’ll menjadi blunt.

Secara langsung: Tidak. Responsive-image markup adalah tidak sebuah sinyal peringkat cara teks alt atau filenames adalah untuk pencarian gambar. menambahkan srcset tidak lift Anda positions, dan ini tidak perubahan apa muncul di Google Images. Google indeks image referenced di src; srcset/<picture> variants adalah sebuah pengiriman mechanism, tidak secara terpisah dapat diindeks assets. pertahankan alt text, filename, dan data terstruktur attached untuk itu utama src image.

Indirectly: Ya, dan ini adalah satu dari biggest levers Anda memiliki. Right-sized images adalah paling effective concrete perbaiki untuk dua Core Web Vitals — LCP dan CLS — yang feed Google’s halaman-experience sinyal. itu’s seluruh payoff. ini adalah yang sama shape sebagai WebP/AVIF story pada Image SEO hub: Tidak boost untuk format itself, win adalah speed.

Responsive images dan LCP

Oversized images adalah satu dari paling umum penyebab dari sebuah slow Largest Contentful Paint, dan responsive images adalah Lighthouse’s recommended perbaiki. Lighthouse “Properly size images” (terjemahan) “Properly size images” audit lists “all images in your page that aren’t appropriately sized, along with the potential savings” (terjemahan) “semua images di Anda halaman itu tidak appropriately sized, along dengan potential savings” — apa pun bigger daripada ini perlu untuk menjadi “just results in wasted bytes and slows down page load time.” (terjemahan) “hanya hasil di wasted bytes dan slows down pemuatan halaman time.” -nya perbaiki, verbatim: “With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on.” (terjemahan) “dengan responsive images, Anda generate multiple versi dari setiap image, dan lalu specify yang versi untuk gunakan di Anda HTML atau CSS menggunakan media kueri, viewport dimensions, dan so pada.”

Dua specifics worth knowing:

«- The failure threshold is 4KiB. Lighthouse only flags an image when “the rendered size is at least 4KiB smaller than the actual size.” Small overshoots don’t count; serving a 3000px file into a 400px slot does.

• A tooling shortcut. Google recommends RespImageLint, “a helpful bookmarklet for identifying the optimal srcset and sizes values for your images.” Run it before you hand-calculate breakpoints. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

jangan lazy-muat LCP image

ini adalah aturan orang break sebagian besar. srcset pada Anda hero adalah fine — tetapi tidak pernah pair ini dengan lazy memuat pada LCP element. largest di atas—fold image seharusnya muat eagerly dengan fetchpriority="high", persis sebagai Image SEO hub covers. dan ketika Anda bangun responsive <picture> hero, pertahankan tukar logic native: Google warns itu ini “tidak akan load konten itu requires user interactions” (terjemahan) “tidak akan muat konten itu memerlukan pengguna interactions” like swiping atau clicking, so sebuah JS scheme itu hanya memuat nyata image setelah interaction hides ini dari Google.

Responsive images dan CLS

Di sini’s trap: srcset alone melakukan tidak ada apa pun untuk layout shift. Resolution switching decides yang file memuat; ini tidak reserve space untuk ini. Left tanpa dimensions, per web.dev’s mengoptimalkan CLS guide, “sebagai images load, text shifts down itu halaman untuk membuat room untuk them” (terjemahan) “sebagai images muat, text shifts down halaman untuk membuat room untuk them” — karena space “tidak dapat menjadi allocated untuk it until itu browser dimulai untuk download it dan dapat determine its dimensions.” (terjemahan) “dapat’t menjadi allocated untuk ini until browser dimulai untuk download ini dan dapat determine -nya dimensions.”

perbaiki adalah jelas dimensions, dan ini composes dengan responsive markup:

• Set width dan height attributes pada <img>. Modern browser “set itu default aspect ratio dari images based pada an image’s width dan height attributes,” (terjemahan) “atur default aspect ratio dari images berdasarkan sebuah image’s tidak terdefinisi dan tidak terdefinisi attributes,” so itu dua angka reserve right box sebelum apa pun srcset variant downloads. (web.dev)
• Pair them dengan height: auto di CSS untuk fluid containers. ini adalah bagian itu looks contradictory tetapi tidak: web.dev’s own guidance adalah untuk “gunakan CSS untuk resize itu image untuk itu width dari itu container” (terjemahan) “gunakan CSS untuk resize image untuk width dari container” dan “set height: auto; untuk avoid menggunakan a fixed value untuk itu image height.” (terjemahan) “set tidak terdefinisi untuk hindari menggunakan sebuah fixed nilai untuk image height.” HTML attributes atur intrinsic aspect ratio; CSS lets image scale fluidly. Together mereka mencegah CLS dan stay responsive.
• atau gunakan CSS aspect-ratio untuk reserve space ketika Anda dapat’t set attributes.

Yang kills sebuah persistent myth: width/height attributes jangan break fluid layouts. Attributes + height: auto adalah correct combo, tidak sebuah conflict. I walk melalui penuh layout-shift mechanics di my Ahrefs CLS artikel; pendek versi adalah “reserve the space so that there’s no shift” (terjemahan) “reserve space so itu ada Tidak shift” dan let image fill ini.

pengindeksan mobile-pertama implications

Google indeks primarily mobile versi dari Anda halaman, so dua aturan penting lebih daripada mereka digunakan untuk ketika Anda’re serving responsive variants:

«- Keep alt text identical across breakpoints. Google’s mobile-first indexing best practices say to “make sure that the mobile site has the same alt text for images as the desktop site.” An art-directed mobile crop must not drop context Google needs. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Keep image URLs stable. Don’t use URLs that change every time the page loads for images. This dovetails with Google’s Image SEO guidance to consistently reference the image with the same URL so it can cache and reuse it. Responsive CDNs that mint a fresh URL per request break this — pin stable URLs for your variants. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh dua, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google’s own summary dari mengapa untuk bother adalah plain: “designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.” (terjemahan) “designing responsive halaman web leads untuk better pengguna experience, since orang dapat access them di seluruh sebuah plethora dari device jenis.”

Apa tentang Bing?

ada Tidak Bing-spesifik guidance pada srcset, sizes, atau <picture> element — Bing’s publik documentation tidak address responsive-image markup di semua. So jangan justify responsive images dengan sebuah Bing algorithm hook; case adalah performa dan UX, yang Bing (like Google) memperlakukan sebagai halaman-experience quality alih-alih sesuatu Anda dapat poin di sebuah terdokumentasi responsive-images aturan untuk.

umum mistakes

• Forgetting sizes dengan w descriptors — browser assumes 100vw dan dapat fetch Anda biggest file untuk sebuah kecil slot.
• Dropping fallback src pada <picture> — sebuah spec violation Google explicitly flags, dan ini adalah URL crawler indeks.
• Mismatched width/height ratio vs. sebenarnya-disajikan image — masih penyebab shift.
• Lazy-memuat LCP hero — delays LCP untuk Tidak alasan; muat ini eagerly dengan fetchpriority="high".
• Regenerating image URLs per permintaan — breaks Google’s caching dan mobile-pertama “stable URL” (terjemahan) “stable URL” aturan.
• Reaching untuk <picture> ketika srcset/sizes akan melakukan — unnecessary complexity; web.dev says sebagian besar situs jangan perlu ini.

Di mana ini sits

ini adalah sizing-dan-pengiriman deep dive di bawah lebih luas Image SEO hub — performa half dari image SEO, parallel untuk bagaimana teks alt guide menangani image-penelusuran half. untuk layout-shift mechanics di penuh, see my Ahrefs CLS artikel; untuk LCP, fetchpriority, dan memuat strategy, itu’s Core Web Vitals berfungsi wearing sebuah image hat.

AI summary

sebuah condensed take pada Advanced versi:

• Dua mechanisms, satu family. srcset/sizes pada <img> = resolution switching (sama image, browser picks best-fit — sebuah suggestion). <picture> = art direction atau format switching (author-dictated crops/formats — sebuah command). sebagian besar situs hanya perlu srcset/sizes.
• Descriptors: w (width) descriptors perlu sebuah sizes attribute dan cover fluid, konten-width images; x (pixel-density) descriptors suit fixed-size UI images dan jangan perlu sizes.
• sizes adalah mandatory dengan w descriptors — omit ini dan browser assumes 100vw, sering fetching largest file needlessly. sebagian besar umum srcset mistake.
• Tidak sebuah direct sinyal peringkat. Responsive markup tidak perubahan apa Google indeks — Google indeks src URL; variants adalah pengiriman hanya. pertahankan teks alt, filenames, dan data terstruktur pada utama src image.
• LCP payoff: oversized images adalah sebuah top penyebab dari slow LCP; responsive images adalah Lighthouse’s recommended perbaiki (“Properly size images” (terjemahan) “Properly size images” audit; fails di sebuah 4KiB kesenjangan; RespImageLint helps pick srcset/sizes).
• CLS: srcset alone melakukan tidak ada apa pun untuk shift — set width/height attributes (atau CSS aspect-ratio), paired dengan height: auto untuk fluid layouts. Attributes + height: auto adalah correct combo, tidak sebuah conflict.
• tidak pernah lazy-muat LCP image; muat ini eagerly dengan fetchpriority="high", dan pertahankan responsive swaps native (Google tidak akan muat interaction-triggered konten).
• pengindeksan mobile-pertama: sama teks alt dan stable image URLs di seluruh breakpoints; jangan mint sebuah fresh URL per permintaan.
• Bing: Tidak dedicated responsive-images guidance — justify berfungsi pada performa/UX.

Dokumentasi resmi

Utama-sumber documentation dan developer guidance.

Google — Penelusuran

• Google Images best practices — srcset note, <picture> fallback-src requirement, sama-URL guidance, dan responsive-design rationale.
• pengindeksan mobile-pertama best practices — sama teks alt dan stable image URLs di seluruh mobile dan desktop; jangan lazy-muat utama konten pada interaction.

Google — web.dev (developer guidance)

• Learn: Responsive images — srcset complements src; bagaimana sizes dan media conditions berfungsi.
• Learn: picture element — ketika Anda perlu <picture>, art direction, dan “suggestions vs. commands.” (terjemahan) “suggestions vs. commands.”
• mengoptimalkan Cumulative Layout Shift — width/height attributes, aspect ratio, dan height: auto untuk fluid images.
• Fetch Priority API — fetchpriority="high" untuk LCP image.

Chrome DevTools / Lighthouse

• Properly size images (menggunakan-responsive-images) — audit, 4KiB threshold, dan RespImageLint bookmarklet.

MDN

• menggunakan responsive images di HTML — reference untuk srcset, sizes, w/x descriptors, dan <picture> syntax.

Quotes dari sumber

pada—record statements dari Google’s documentation dan developer guidance. Di mana sebuah halaman exposes text, tautan adalah sebuah deep tautan itu jumps untuk quoted passage.

Google — Image SEO docs

«- “The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.” Source » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh delapan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- On keeping image URLs stable: “consistently reference the image with the same URL, so that Google can cache and reuse the image.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh delapan, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — pengindeksan mobile-pertama docs

• “Make sure that the mobile site has the same alt text for images as the desktop site.” (terjemahan) “pastikan itu mobile situs memiliki yang sama teks alt untuk images sebagai desktop situs.” Jump untuk quote
• “jangan gunakan URLs itu ubah setiap time itu halaman loads untuk images.” (terjemahan) “jangan gunakan URLs itu perubahan setiap time halaman memuat untuk images.” Jump untuk quote

«web.dev — srcset vs. picture » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«- “Where the srcset attribute gives suggestions to the browser, the picture element gives commands.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Me — pada CLS perbaiki

• “Reserve the space so that there’s no shift” (terjemahan) “Reserve space so itu ada Tidak shift” dan image sekadar fills ini. Jump untuk quote

Copy-paste responsive image patterns

Three patterns itu cover hampir setiap nyata case. semua dari them pertahankan sebuah fallback src, jelas width/height ( CLS perbaiki), dan identical alt text.

1. Resolution switching — everyday <img srcset> (my reusable pattern)

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w,
          puppy-2000.jpg 2000w,
          puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

Pair ini dengan ini CSS so image scales fluidly tanpa causing layout shift:

img {
  max-width: 100%;
  height: auto; /* with width/height attributes set, this prevents CLS */
}

2. Fixed-size image — pixel-density (x) descriptors, Tidak sizes needed

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  width="200" height="60"
  alt="Company logo" />

3. LCP hero — eager + tinggi priority, dan format fallback melalui <picture>

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img
    src="hero.jpg"
    width="1200" height="675"
    fetchpriority="high"
    loading="eager"
    alt="Product hero shot" />
</picture>

aturan baked ke ini:

• selalu pertahankan trailing <img src> — ini adalah fallback dan URL Google indeks.
• dengan w descriptors, sizes adalah diperlukan; tanpa ini browser assumes 100vw.
• dengan x descriptors, omit sizes.
• tidak pernah tambahkan loading="lazy" untuk LCP image (pattern 3) — itu delays LCP; gunakan fetchpriority="high" alih-alih.

untuk temukan right srcset/sizes nilai alih-alih guessing, jalankan RespImageLint, bookmarklet Google recommends, di atas langsung halaman.

Yang satu melakukan Anda sebenarnya perlu: srcset/sizes atau picture?

berfungsi melalui nyata branch artikel draws antara resolution switching dan art direction / format switching.

sebagian besar situs berhenti di pertama branch dan tidak pernah leave srcset/sizes — reach untuk <picture> hanya ketika image itself perlu untuk perubahan, tidak hanya -nya size.

Apa tidak untuk melakukan

Six concrete mistakes artikel panggilan out, setiap dengan mengapa ini adalah wrong dan perbaiki.

• Forgetting sizes attribute dengan w-descriptors. Mengapa ini adalah wrong: tanpa sizes, browser assumes image fills penuh viewport width (100vw), so ini dapat fetch Anda biggest candidate untuk sebuah slot itu renders banyak lebih kecil. melakukan alih-alih: selalu pair w-descriptor srcset dengan sebuah sizes nilai itu matches bagaimana image sebenarnya renders di setiap breakpoint.
• Dropping fallback <img src> pada <picture>. Mengapa ini adalah wrong: ini adalah sebuah spec violation Google explicitly flags, dan ini adalah URL crawler dan Google Images sebenarnya indeks — Tidak fallback berarti Tidak dapat diindeks image. melakukan alih-alih: setiap <picture> block ends dengan sebuah plain <img src="...">, tidak pernah hanya <source> elements.
• Mismatched width/height ratio versus sebenarnya-disajikan image. Mengapa ini adalah wrong: attributes atur reserved aspect ratio; jika nyata image tidak match ini, layout masih shifts setelah image memuat. melakukan alih-alih: pertahankan width/height (atau aspect-ratio) ratio identical untuk image files Anda’re sebenarnya serving di seluruh semua srcset/<picture> variants.
• Lazy-memuat LCP hero image. Mengapa ini adalah wrong: loading="lazy" delays fetch dari persis image Largest Contentful Paint adalah timing, pushing LCP kemudian untuk Tidak benefit. melakukan alih-alih: muat LCP image eagerly dengan fetchpriority="high", tidak pernah loading="lazy".
• Regenerating image URLs pada setiap permintaan. Mengapa ini adalah wrong: ini breaks Google’s image caching dan violates pengindeksan mobile-pertama aturan terhadap URLs itu perubahan setiap time halaman memuat. melakukan alih-alih: pin stable, consistent URLs per image variant so Google dapat cache dan reuse them.
• Reaching untuk <picture> ketika srcset/sizes akan melakukan. Mengapa ini adalah wrong: ini adalah unneeded complexity — web.dev adalah jelas itu sebagian besar situs jangan perlu <picture> di semua. melakukan alih-alih: default untuk srcset/sizes resolution switching; hanya tambahkan <picture> ketika Anda genuinely perlu sebuah berbeda crop atau format per condition.

umum issues

Symptom-pertama lookup untuk dua responsive-image masalah readers sebenarnya hit.

Layout masih shifts (CLS) bahkan though srcset adalah siapkan

• Symptom: Lighthouse atau PageSpeed Insights masih reports layout shift pada sebuah image, atau Anda dapat visually see konten jump sebagai image memuat, despite memiliki sebuah berfungsi srcset/sizes.
• mungkin penyebab: srcset alone melakukan tidak ada apa pun untuk layout shift — ini hanya decides yang file memuat, tidak bagaimana banyak space untuk reserve. image memiliki Tidak width/ height attributes (atau CSS aspect-ratio), so browser dapat’t allocate space until file dimulai downloading dan -nya dimensions adalah known.
• Perbaiki + konfirmasi: tambahkan jelas width dan height attributes untuk <img> (atau set CSS aspect-ratio), dan pair them dengan height: auto di CSS so image masih scales fluidly. Konfirmasi oleh re-berjalan CLS periksa (Lighthouse atau sebuah langsung CrUX periksa) dan watching untuk shift untuk disappear — reserved box seharusnya now hold -nya size sebelum image finishes memuat.

Lighthouse flags “Properly size images” (terjemahan) “Properly size images” / sebuah oversized image adalah memuat

• Symptom: Lighthouse “Properly size images” (terjemahan) “Properly size images” audit lists satu atau lebih images dengan wasted bytes, atau sebuah halaman feels slow untuk reach -nya Largest Contentful Paint bahkan though image itself looks fine.
• mungkin penyebab: dirender size dari image adalah setidaknya 4KiB lebih kecil daripada sebenarnya file menjadi disajikan — commonly karena ada Tidak srcset di semua, atau sizes adalah missing so browser defaulted untuk 100vw dan pulled largest candidate untuk sebuah kecil slot.
• Perbaiki + konfirmasi: tambahkan (atau correct) srcset dengan appropriately sized candidates dan sebuah sizes nilai matching nyata dirender width; jalankan RespImageLint untuk periksa nilai alih-alih guessing. Konfirmasi oleh re-berjalan Lighthouse “Properly size images” (terjemahan) “Properly size images” audit dan memeriksa flagged image Tidak lebih lama muncul (atau -nya potential savings drop di bawah 4KiB threshold).

Cheat sheet: descriptors, picture vs. srcset, dan CLS/LCP aturan

Validation tests

Lulus/fail memeriksa itu konfirmasi sebuah responsive-image perubahan sebenarnya took effect.

Properly-sized images ship correctly

Test untuk jalankan: Jalankan Lighthouse “Properly size images” (terjemahan) “Properly size images” audit (Chrome DevTools > Lighthouse > performa, atau PageSpeed Insights) pada halaman Anda hanya diperbarui. Yang diharapkan hasil: image Anda fixed Tidak lebih lama muncul di audit’s flagged list, atau -nya potential savings drop di bawah 4KiB kesenjangan threshold. Failure interpretation: jika ini adalah masih flagged, either srcset candidates adalah masih too besar untuk dirender size, atau sizes adalah missing/wrong dan browser adalah masih menggunakan default untuk 100vw. Monitoring window: Immediate — re-jalankan right setelah deploying perubahan. Rollback trigger: audit masih flags yang sama image dengan unchanged potential savings setelah confirming sizes matches nyata dirender width.

srcset/sizes nilai adalah sebenarnya optimal

Test untuk jalankan: Jalankan RespImageLint ( bookmarklet Google recommends) terhadap langsung halaman. Yang diharapkan hasil: Tidak warnings tentang oversized candidates atau sebuah missing/incorrect sizes nilai. Failure interpretation: sebuah warning berarti either sebuah candidate adalah unnecessarily besar untuk -nya breakpoint atau sizes tidak match container’s nyata dirender width. Monitoring window: Immediate, pada langsung URL setelah deploy. Rollback trigger: RespImageLint mempertahankan flagging yang sama image setelah Anda’ve corrected sizes nilai.

browser sebenarnya dipilih candidate Anda yang diharapkan

Test untuk jalankan: Passing Lighthouse/RespImageLint memeriksa mengonfirmasi Anda markup adalah valid — ini tidak konfirmasi browser picked file Anda yang dimaksud di sebuah diberikan viewport. muat halaman di breakpoint Anda care tentang, open DevTools, select <img>, dan periksa -nya currentSrc property di console ($0.currentSrc di Chrome/Firefox DevTools) — MDN’s own contoh melakukan persis ini: comparing currentSrc terhadap yang diharapkan filename untuk konfirmasi yang candidate dimuat. Cross-periksa terhadap Network tab untuk see yang file adalah sebenarnya requested. Repeat di Anda sempit dan wide breakpoints, dan di 1x dan 2x device pixel ratio jika Anda emulate ini. Yang diharapkan hasil: currentSrc matches candidate file Anda’d expect untuk itu viewport width dan pixel density, dan Network tab menampilkan hanya itu file adalah fetched. Failure interpretation: jika currentSrc mengembalikan sebuah candidate bigger atau lebih kecil daripada yang diharapkan, either sizes nilai tidak match image’s sebenarnya dirender CSS width (see “Why sizes matters” (terjemahan) “Mengapa sizes penting” di Advanced tab) atau sebuah srcset descriptor adalah wrong. Note itu browser selection adalah implementation-didefinisikan — HTML Standard leaves tepat pilihan among valid candidates untuk browser (density, zoom, dan network conditions dapat semua factor di), so jangan expect byte-identical perilaku di seluruh browser; periksa untuk “reasonable candidate,” (terjemahan) “reasonable candidate,” tidak satu fixed jawaban. Monitoring window: Immediate — periksa per breakpoint right setelah deploying. Rollback trigger: currentSrc mempertahankan returning sebuah oversized candidate di sebuah sempit viewport setelah Anda’ve corrected sizes untuk match nyata dirender width.

Tidak layout shift dari image

Test untuk jalankan: periksa Cumulative Layout Shift untuk halaman — Lighthouse’s CLS score, atau sebuah langsung CrUX/PageSpeed Insights field-data periksa untuk URL. Yang diharapkan hasil: CLS attributable untuk image drops untuk (near) zero setelah width/height (atau aspect-ratio) adalah set. Failure interpretation: Persistent shift biasanya berarti width/height ratio tidak match sebenarnya image menjadi disajikan, atau attributes adalah missing entirely. Monitoring window: data lab adalah immediate; data lapangan (CrUX) perlu tentang 28 days untuk accumulate sebuah trustworthy trend. Rollback trigger: CLS di data lapangan tidak meningkatkan setelah 28 days despite lab periksa passing — revisit apakah disajikan image ratio sebenarnya matches reserved box.

Uji pemahaman Anda: Responsive images

Five quick pertanyaan pada srcset, sizes, <picture>, dan bagaimana responsive images memengaruhi SEO. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan