Panduan Responsive Images (srcset)

TL;DR — Responsive images let sebuah browser muat sebuah right-sized versi dari sebuah picture alih-alih one giant file — sebuah kecil one pada sebuah phone, sebuah big one pada sebuah desktop. Anda melakukan ini dengan srcset dan sizes attributes pada Anda <img> tag (list sizes Anda memiliki; browser picks). ini doesn’t directly boost Anda rankings, tetapi ini membuat halaman faster dan stops them dari “jumping” (terjemahan) “jumping” sebagai images muat, dan speed adalah something Google measures.

What 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 give browser sebuah few versi di berbeda sizes dan let ini grab one itu fits. Phones get sebuah kecil file; big screens get sebuah big one. Less wasted data, faster halaman.

ada two cara untuk melakukan ini, dan ini adalah worth knowing which adalah which:

• srcset + sizes pada <img> — umum one. sama picture, berbeda sizes. Anda list what Anda memiliki dan browser chooses. ini adalah called resolution switching.
• ** <picture> element** — untuk when 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 don’t perlu ini.

basic versi

Here’s what 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 normal, selalu-there fallback. pertahankan ini.
• srcset lists versi Anda memiliki dan how wide setiap one adalah (1000w = 1000 pixels wide).
• sizes tells browser how big image akan actually appear so ini dapat pick right file sebelum ini memuat anything.
• width dan height reserve space so halaman doesn’t jump sekitar while image memuat.
• alt adalah yang sama deskripsi Anda’d selalu write. pertahankan ini identical di seluruh setiap versi.

Why bother ( honest jawaban)

Responsive images don’t earn Anda sebuah peringkat “boost.” (terjemahan) “boost.” What mereka melakukan adalah membuat halaman muat faster dan stop layout dari shifting — dan itu adalah things 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 fix ini adalah asking untuk.

One more thing: ini doesn’t perubahan what menampilkan up di Google Images. Google indeks image di Anda src attribute — responsive variants adalah hanya delivery. So pertahankan alt text, filename, dan main image URL yang sama no penting which versi browser memuat.

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

TL;DR — Two jobs, one 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 not sebuah direct sinyal peringkat dan don’t perubahan what 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 fix behind Lighthouse’s “Properly size images” (terjemahan) “Properly size images” audit (fails di sebuah 4KiB gap), dan width/height (atau aspect-ratio) — not srcset — adalah what mencegah CLS. Don’t lazy-muat LCP image. I reuse exact srcset + width/height pattern dari my Ahrefs CLS piece.

Two berbeda jobs, one syntax family

Everything di ini topic collapses ke two mechanisms, dan half confusion out there comes dari mixing them up:

1. Resolution switching — yang sama image di berbeda sizes atau pixel densities. Anda give browser sebuah menu dengan srcset dan sizes pada <img>, dan * browser* decides which 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. Here Anda dictate choice dengan <picture> element.

web.dev Learn: Responsive images course frames difference exactly right: dengan srcset browser gets suggestions, whereas “the picture element gives commands.” (terjemahan) “ undefined element gives commands.” dan scope-setting line worth tattooing pada wall, juga dari web.dev: “You probably won’t need to use the picture element for most of your responsive images — the srcset and sizes attributes on the img element cover a lot of use cases.” (terjemahan) “Anda probably won’t perlu untuk gunakan undefined element untuk sebagian besar dari Anda responsive images — undefined dan undefined attributes pada undefined element cover sebuah lot dari gunakan cases.” Reach untuk <picture> hanya when Anda actually perlu sebuah berbeda image, not sebuah berbeda size dari yang sama one.

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 two 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 which file best fits space dan device’s pixel density. ini adalah flexible option dan what Anda’ll gunakan sebagian besar dari time.
• Pixel-density descriptors (x) — Anda state which file adalah untuk which device pixel ratio (logo.png 1x, logo@2x.png 2x). gunakan ini untuk fixed-size images (sebuah avatar, sebuah logo) where 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.

Why sizes penting (dan what happens jika Anda skip ini)

dengan w descriptors, sizes isn’t optional cosmetics — ini adalah how browser knows how big image akan render so ini dapat choose sebelum layout. Per web.dev, sizes “tells the browser what size you expect the image to be displayed at under different conditions,” (terjemahan) “tells browser what 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"

Read ini sebagai: “if the viewport is 600px or narrower, the image will be about 480px wide; otherwise, about 1000px.” (terjemahan) “jika viewport adalah 600px atau narrower, image akan menjadi tentang 480px wide; otherwise, tentang 1000px.” Omit sizes dan browser assumes image fills full viewport width (100vw) — so pada sebuah wide screen ini dapat pull Anda largest file untuk sebuah image itu’s actually rendering di 400px, quietly defeating whole poin. Missing sizes adalah single sebagian besar umum srcset mistake.

Don’t guess di itu width nilai dari layout di Anda head — periksa image’s actual rendered 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 doesn’t match nyata rendered width masih causes browser untuk select wrong candidate bahkan though markup adalah syntactically correct — syntax validation alone won’t catch itu; see currentSrc periksa below untuk confirm what actually dimuat.

Worked contoh (my reusable pattern)

ini adalah exact pattern dari my Ahrefs piece, What 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 rendered width; width/height reserve space ( CLS fix — more below); alt stays identical no penting which file memuat.

picture element — art direction dan format switching

When Anda actually perlu ini

gunakan <picture> untuk two things srcset dapat’t melakukan:

1. Art direction — sebuah berbeda crop per breakpoint. web.dev’s contoh: pada sebuah narrow phone Anda mungkin sajikan tall, tight crop; pada sebuah wide desktop, sebuah pendek, wide one. sama subject, deliberately berbeda framing.
2. Format switching — offer AVIF/WebP dengan sebuah JPEG fallback via <source type="…">, 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 one atau more <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>

itu trailing <img src> adalah not optional. Google states ini directly: per bagian 4.8.1 dari HTML Standard, “make sure that you provide an img element as a fallback with a src attribute when using the picture element.” (terjemahan) “pastikan itu Anda menyediakan sebuah undefined element sebagai sebuah fallback dengan sebuah undefined attribute when menggunakan undefined element.” ini adalah file older browser dan crawler fall back untuk — dan, again, one Google indeks.

melakukan srcset help SEO? Direct vs. indirect

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

Directly: no. Responsive-image markup adalah not sebuah sinyal peringkat cara teks alt atau filenames adalah untuk pencarian gambar. menambahkan srcset doesn’t lift Anda positions, dan ini doesn’t perubahan what appears di Google Images. Google indeks image referenced di src; srcset/<picture> variants adalah sebuah delivery mechanism, not separately dapat diindeks assets. pertahankan alt text, filename, dan data terstruktur attached untuk itu primary src image.

Indirectly: yes, dan ini adalah one dari biggest levers Anda memiliki. Right-sized images adalah paling effective concrete fix untuk two Core Web Vitals — LCP dan CLS — which feed Google’s halaman-experience signals. itu’s whole payoff. ini adalah yang sama shape sebagai WebP/AVIF story pada Image SEO hub: no boost untuk format itself, win adalah speed.

Responsive images dan LCP

Oversized images adalah one dari paling umum causes dari sebuah slow Largest Contentful Paint, dan responsive images adalah Lighthouse’s recommended fix. 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 aren’t appropriately sized, along dengan potential savings” — anything 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 fix, 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 which versi untuk gunakan di Anda HTML atau CSS menggunakan media kueri, viewport dimensions, dan so pada.”

Two specifics worth knowing:

• ** failure threshold adalah 4KiB.** Lighthouse hanya flags sebuah image when “the rendered size is at least 4KiB smaller than the actual size.” (terjemahan) “ rendered size adalah setidaknya 4KiB smaller daripada actual size.” kecil overshoots don’t count; serving sebuah 3000px file ke sebuah 400px slot melakukan.
• sebuah tooling shortcut. Google recommends RespImageLint, “a helpful bookmarklet for identifying the optimal srcset and sizes values for your images.” (terjemahan) “sebuah helpful bookmarklet untuk identifying optimal undefined dan undefined nilai untuk Anda images.” Run ini sebelum Anda hand-calculate breakpoints.

Don’t lazy-muat LCP image

ini adalah aturan people break sebagian besar. srcset pada Anda hero adalah fine — tetapi tidak pernah pair ini dengan lazy memuat pada LCP element. largest above—fold image seharusnya muat eagerly dengan fetchpriority="high", exactly sebagai Image SEO hub covers. dan when Anda bangun responsive <picture> hero, pertahankan swap logic native: Google warns itu ini “won’t load content that requires user interactions” (terjemahan) “won’t 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

Here’s trap: srcset alone melakukan nothing untuk layout shift. Resolution switching decides which file memuat; ini doesn’t reserve space untuk ini. Left without dimensions, per web.dev’s mengoptimalkan CLS guide, “as images load, text shifts down the page to make room for them” (terjemahan) “sebagai images muat, text shifts down halaman untuk membuat room untuk them” — because space “can’t be allocated for it until the browser starts to download it and can determine its dimensions.” (terjemahan) “dapat’t menjadi allocated untuk ini until browser starts untuk download ini dan dapat determine -nya dimensions.”

fix adalah explicit dimensions, dan ini composes dengan responsive markup:

• Set width dan height attributes pada <img>. Modern browser “set the default aspect ratio of images based on an image’s width and height attributes,” (terjemahan) “atur default aspect ratio dari images berdasarkan sebuah image’s undefined dan undefined attributes,” so itu two 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 isn’t: web.dev’s own guidance adalah untuk “use CSS to resize the image to the width of the container” (terjemahan) “gunakan CSS untuk resize image untuk width dari container” dan “set height: auto; to avoid using a fixed value for the image height.” (terjemahan) “set undefined 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 when Anda dapat’t set attributes.

Which kills sebuah persistent myth: width/height attributes don’t break fluid layouts. Attributes + height: auto adalah correct combo, not sebuah conflict. I walk melalui full 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 there’s no shift” dan let image fill ini.

pengindeksan mobile-pertama implications

Google indeks primarily mobile versi dari Anda halaman, so two aturan penting more daripada mereka digunakan untuk when Anda’re serving responsive variants:

• pertahankan teks alt identical di seluruh breakpoints. Google’s pengindeksan mobile-pertama best practices say untuk “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.” sebuah art-directed mobile crop harus not drop context Google perlu.
• pertahankan image URLs stable. Don’t gunakan URLs itu perubahan setiap time halaman memuat untuk images. ini dovetails dengan Google’s Image SEO guidance untuk consistently reference image dengan yang sama URL so ini dapat cache dan reuse ini. Responsive CDNs itu mint sebuah fresh URL per permintaan break ini — pin stable URLs untuk Anda variants.

Google’s own summary dari why 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 people dapat access them di seluruh sebuah plethora dari device jenis.”

What tentang Bing?

There’s no Bing-spesifik guidance pada srcset, sizes, atau <picture> element — Bing’s public documentation doesn’t address responsive-image markup di semua. So don’t justify responsive images dengan sebuah Bing algorithm hook; case adalah performa dan UX, which Bing (like Google) treats sebagai halaman-experience quality alih-alih something Anda dapat poin di sebuah documented 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. actually-disajikan image — masih causes shift.
• Lazy-memuat LCP hero — delays LCP untuk no 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> when srcset/sizes akan melakukan — unnecessary complexity; web.dev says sebagian besar situs don’t perlu ini.

Where ini sits

ini adalah sizing-dan-delivery deep dive di bawah broader Image SEO hub — performa half dari image SEO, parallel untuk how teks alt guide handles image-search half. untuk layout-shift mechanics di full, 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:

• Two mechanisms, one 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 don’t perlu sizes.
• sizes adalah mandatory dengan w descriptors — omit ini dan browser assumes 100vw, sering fetching largest file needlessly. sebagian besar umum srcset mistake.
• Not sebuah direct sinyal peringkat. Responsive markup doesn’t perubahan what Google indeks — Google indeks src URL; variants adalah delivery hanya. pertahankan teks alt, filenames, dan data terstruktur pada primary src image.
• LCP payoff: oversized images adalah sebuah top cause dari slow LCP; responsive images adalah Lighthouse’s recommended fix (“Properly size images” (terjemahan) “Properly size images” audit; fails di sebuah 4KiB gap; RespImageLint helps pick srcset/sizes).
• CLS: srcset alone melakukan nothing untuk shift — set width/height attributes (atau CSS aspect-ratio), paired dengan height: auto untuk fluid layouts. Attributes + height: auto adalah correct combo, not sebuah conflict.
• tidak pernah lazy-muat LCP image; muat ini eagerly dengan fetchpriority="high", dan pertahankan responsive swaps native (Google won’t muat interaction-triggered konten).
• pengindeksan mobile-pertama: sama teks alt dan stable image URLs di seluruh breakpoints; don’t mint sebuah fresh URL per permintaan.
• Bing: no dedicated responsive-images guidance — justify berfungsi pada performa/UX.

Official documentation

Primary-source documentation dan developer guidance.

Google — Search

• 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; don’t lazy-muat primary konten pada interaction.

Google — web.dev (developer guidance)

• Learn: Responsive images — srcset complements src; how sizes dan media conditions berfungsi.
• Learn: picture element — when 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 source

pada—record statements dari Google’s documentation dan developer guidance. Where 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.” (terjemahan) “ undefined attribute allows specifying berbeda versi dari yang sama image, specifically untuk berbeda screen sizes.” Jump untuk quote
• “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 people dapat access them di seluruh sebuah plethora dari device jenis.” Source
• pada keeping image URLs stable: “consistently reference the image with the same URL, so that Google can cache and reuse the image.” (terjemahan) “consistently reference image dengan yang sama URL, so itu Google dapat cache dan reuse image.” Jump untuk quote

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
• “Don’t use URLs that change every time the page loads for images.” (terjemahan) “Don’t gunakan URLs itu perubahan setiap time halaman memuat untuk images.” Jump untuk quote

web.dev — srcset vs. picture

• “Where the srcset attribute gives suggestions to the browser, the picture element gives commands.” (terjemahan) “Where undefined attribute gives suggestions untuk browser, undefined element gives commands.” Jump untuk quote

Me — pada CLS fix

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

Copy-paste responsive image patterns

Three patterns itu cover almost setiap nyata case. semua dari them pertahankan sebuah fallback src, explicit width/height ( CLS fix), 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 without 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, no 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 via <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; without 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" instead.

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

Which one melakukan Anda actually perlu: srcset/sizes atau picture?

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

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

What not untuk melakukan

Six concrete mistakes artikel panggilan out, setiap dengan why ini adalah wrong dan fix.

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

umum issues

Symptom-pertama lookup untuk two responsive-image masalah readers actually 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 having sebuah berfungsi srcset/sizes.
• mungkin cause: srcset alone melakukan nothing untuk layout shift — ini hanya decides which file memuat, not how much space untuk reserve. image memiliki no width/ height attributes (atau CSS aspect-ratio), so browser dapat’t allocate space until file starts downloading dan -nya dimensions adalah known.
• Fix + confirm: tambahkan explicit width dan height attributes untuk <img> (atau set CSS aspect-ratio), dan pair them dengan height: auto di CSS so image masih scales fluidly. Confirm oleh re-running CLS periksa (Lighthouse atau sebuah live 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 one atau more images dengan wasted bytes, atau sebuah halaman feels slow untuk reach -nya Largest Contentful Paint bahkan though image itself looks fine.
• mungkin cause: rendered size dari image adalah setidaknya 4KiB smaller daripada actual file menjadi disajikan — commonly because there’s no srcset di semua, atau sizes adalah missing so browser defaulted untuk 100vw dan pulled largest candidate untuk sebuah kecil slot.
• Fix + confirm: tambahkan (atau correct) srcset dengan appropriately sized candidates dan sebuah sizes nilai matching nyata rendered width; run RespImageLint untuk periksa nilai alih-alih guessing. Confirm oleh re-running Lighthouse “Properly size images” (terjemahan) “Properly size images” audit dan memeriksa flagged image no longer appears (atau -nya potential savings drop below 4KiB threshold).

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

Validation tests

Pass/fail memeriksa itu confirm sebuah responsive-image perubahan actually took effect.

Properly-sized images ship correctly

Test untuk run: Run Lighthouse “Properly size images” (terjemahan) “Properly size images” audit (Chrome DevTools > Lighthouse > performa, atau PageSpeed Insights) pada halaman Anda hanya updated. Expected hasil: image Anda fixed no longer appears di audit’s flagged list, atau -nya potential savings drop below 4KiB gap threshold. Failure interpretation: jika ini adalah masih flagged, either srcset candidates adalah masih too besar untuk rendered size, atau sizes adalah missing/wrong dan browser adalah masih defaulting untuk 100vw. Monitoring window: Immediate — re-run right setelah deploying perubahan. Rollback trigger: audit masih flags yang sama image dengan unchanged potential savings setelah confirming sizes matches nyata rendered width.

srcset/sizes nilai adalah actually optimal

Test untuk run: Run RespImageLint ( bookmarklet Google recommends) terhadap live halaman. Expected hasil: No 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 doesn’t match container’s nyata rendered width. Monitoring window: Immediate, pada live URL setelah deploy. Rollback trigger: RespImageLint mempertahankan flagging yang sama image setelah Anda’ve corrected sizes nilai.

browser actually selected candidate Anda expected

Test untuk run: Passing Lighthouse/RespImageLint memeriksa confirms Anda markup adalah valid — ini doesn’t confirm browser picked file Anda intended di sebuah given 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 exactly ini: comparing currentSrc terhadap expected filename untuk confirm which candidate dimuat. Cross-periksa terhadap Network tab untuk see which file adalah actually requested. Repeat di Anda narrow dan wide breakpoints, dan di 1x dan 2x device pixel ratio jika Anda emulate ini. Expected 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 smaller daripada expected, either sizes nilai doesn’t match image’s actual rendered CSS width (see “Why sizes matters” (terjemahan) “Why sizes penting” di Advanced tab) atau sebuah srcset descriptor adalah wrong. Note itu browser selection adalah implementation-defined — HTML Standard leaves exact choice among valid candidates untuk browser (density, zoom, dan network conditions dapat semua factor di), so don’t expect byte-identical perilaku di seluruh browser; periksa untuk “reasonable candidate,” (terjemahan) “reasonable candidate,” not one fixed jawaban. Monitoring window: Immediate — periksa per breakpoint right setelah deploying. Rollback trigger: currentSrc mempertahankan returning sebuah oversized candidate di sebuah narrow viewport setelah Anda’ve corrected sizes untuk match nyata rendered width.

No layout shift dari image

Test untuk run: periksa Cumulative Layout Shift untuk halaman — Lighthouse’s CLS score, atau sebuah live CrUX/PageSpeed Insights field-data periksa untuk URL. Expected hasil: CLS attributable untuk image drops untuk (near) zero once width/height (atau aspect-ratio) adalah set. Failure interpretation: Persistent shift biasanya berarti width/height ratio doesn’t match actual 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 doesn’t meningkatkan setelah 28 days despite lab periksa passing — revisit whether disajikan image ratio actually matches reserved box.

Test yourself: Responsive images

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

Log perubahan