Ngôn ngữ

Hướng dẫn về Responsive Images (srcset)

Cách serve responsive images với đó srcset và sizes các thuộc tính và đó picture element, khi nào nên dùng mỗi, và cách responsive images cách sửa LCP và CLS không có đang một trực tiếp tín hiệu xếp hạng.

Xuất bản lần đầu: 2 thg 7, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2

Responsive images let đó trình duyệt (qua srcset + sizes) hoặc đó tác giả (qua <picture>) serve đó right-sized image theo device. srcset/sizes là resolution switching (giống nhau image, trình duyệt picks — một suggestion); <picture> là art direction hoặc format switching (tác giả-dictated crops/formats — một command). Hầu hết các trang chỉ cần srcset/sizes. Này không phải một trực tiếp tín hiệu xếp hạng và điều này không thay đổi điều gì Google indexes — Google indexes đó src URL — nhưng đây là đó concrete cách sửa Lighthouse khuyến nghị cho oversized images (của nó "Properly size images" _(bản dịch)_ «Properly size images» audit fails tại một 4KiB khoảng trống) và, paired với rõ ràng width/height, đây là cách bạn ngăn CLS. Giữ alt text giống hệt và image URLs ổn định trên breakpoints cho mobile-đầu tiên lập chỉ mục. I reuse đó chính xác srcset + width/height pattern từ my Ahrefs CLS bài viết. Nests dưới đó Image SEO hub.

TL;DR — Hai jobs, một syntax family. srcset/sizes on <img> = resolution switching (giống nhau image, trình duyệt picks best-fit — một suggestion); <picture> = art direction hoặc format switching (tác giả-dictated crops/formats — một command). Hầu hết các trang chỉ cần đó đầu tiên. Responsive images là không một trực tiếp tín hiệu xếp hạng và không thay đổi điều gì Google indexes — Google indexes đó src URL, so giữ alt text, filenames, và image URLs ổn định trên breakpoints (mobile-đầu tiên lập chỉ mục). Đó real payoff là Core Web Vitals: right-sizing images là đó cách sửa behind Lighthouse “Properly size images” (bản dịch) «Properly size images» audit (fails tại một 4KiB khoảng trống), và width/height (hoặc aspect-ratio) — không srcset — là điều gì ngăn CLS. không lazy-load đó LCP image. I reuse đó chính xác srcset + width/height pattern từ my Ahrefs CLS piece.

Evidence for this claim The HTML responsive-image features srcset, sizes, and picture let browsers select an appropriate image candidate. Scope: Current HTML responsive image behavior. Confidence: high · Verified: WHATWG HTML: Responsive images Evidence for this claim Google can process responsive images and recommends src as a fallback while using srcset or picture for responsive delivery. Scope: Current Google Images responsive-image guidance. Confidence: high · Verified: Google Search Central: Responsive images

Hai khác jobs, một syntax family

Mọi thứ trong điều này topic collapses vào hai mechanisms, và half confusion out ở đó xuất hiện từ mixing them lên:

  1. Resolution switching — giống nhau image tại khác sizes hoặc pixel densities. bạn cho trình duyệt menu với srcset và sizes on <img>, và * trình duyệt* decides mà file để fetch dựa trên viewport và screen density. Đây là phổ biến case.
  2. Art direction — genuinely khác image theo condition: wide crop on desktop, tight vertical crop on mobile, hoặc khác file format hoàn toàn. Ở đây bạn dictate lựa chọn với <picture> element.

Đó web.dev Learn: Responsive images course frames đó khác biệt chính xác right: với srcset đó trình duyệt nhận suggestions, whereas “the picture element gives commands.” (bản dịch) «đó element cho commands.» Và đó phạm vi-setting line worth tattooing on đó wall, cũng từ 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.” (bản dịch) «Bạn probably sẽ không cần để dùng đó element cho hầu hết of của bạn responsive images — đó và các thuộc tính on đó element cover một lot of dùng cases.» Reach cho <picture> chỉ khi bạn thực ra cần một khác nhau image, không một khác nhau size of đó giống nhau một.

srcset và sizes — resolution switching

w-descriptors so với. x-descriptors

srcset takes comma-separated list của candidate files, mỗi tagged với descriptor. có hai kinds:

  • Width descriptors (w) — bạn state mỗi file intrinsic pixel width (puppy-2000.jpg 2000w). trình duyệt combines đó với của bạn sizes giá trị để hoạt động out mà file best fits space và device pixel density. Đây là flexible option và Điều gì bạn’ll sử dụng phần lớn của time.
  • Pixel-density descriptors (x) — bạn state mà file là cho mà device pixel ratio (logo.png 1x, logo@2x.png 2x). sử dụng những điều này cho fixed-size images ( avatar, logo) nơi displayed size không bao giờ thay đổi; bạn không cần sizes với x descriptors.

Rule của thumb: fluid, nội dung-width images → w descriptors + sizes; fixed-size UI images → x descriptors.

Vì sao sizes matters (và Điều gì happens nếu bạn skip nó)

Với w descriptors, sizes không tùy chọn cosmetics — đây là cách đó trình duyệt knows cách big đó image sẽ render so điều này có thể chọn trước layout. Theo web.dev, sizes “tells the browser what size you expect the image to be displayed at under different conditions,” (bản dịch) «tells đó trình duyệt điều gì size bạn expect đó image để là displayed tại dưới khác nhau conditions,» as một comma-separated list of media conditions và widths:

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

Đọc điều này as: “if the viewport is 600px or narrower, the image will be about 480px wide; otherwise, about 1000px.” (bản dịch) «nếu đó viewport là 600px hoặc hẹp hơn, đó image sẽ là về 480px wide; nếu không, về 1000px.» Omit sizes và đó trình duyệt assumes đó image fills đó đầy đủ viewport width (100vw) — so on một wide screen điều này có thể pull của bạn largest file cho an image đó là thực ra kết xuất tại 400px, âm thầm defeating đó toàn bộ point. Bị thiếu sizes là đó single hầu hết phổ biến srcset mistake.

không guess tại những điều đó width các giá trị từ layout trong của bạn head — kiểm tra image thực tế được kết xuất CSS width trong trình duyệt (DevTools → Elements → computed width của <img> box) tại mỗi breakpoint bạn care về, và đặt sizes để match. sizes giá trị đó không match thực được kết xuất width vẫn gây ra trình duyệt để select sai candidate mặc dù markup là syntactically đúng — syntax validation alone sẽ không catch đó; see currentSrc kiểm tra dưới để xác nhận Điều gì thực ra loaded.

Worked ví dụ (my reusable pattern)

Đây là chính xác pattern từ my Ahrefs piece, Điều gì là Cumulative Layout Shift (CLS) & Cách Improve nó, expanded với 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" />

mỗi piece là load-bearing: src là fallback và URL Google indexes; srcset lists candidates với w descriptors; sizes tells trình duyệt được kết xuất width; width/height reserve space ( CLS khắc phục — nhiều hơn dưới); alt vẫn giữ giống hệt không quan trọng mà file loads.

picture element — art direction và format switching

Khi bạn thực ra cần nó

sử dụng <picture> cho hai điều srcset có thể’t làm:

  1. Art direction — khác crop theo breakpoint. web.dev ví dụ: on hẹp phone bạn có thể phục vụ tall, tight crop; on wide desktop, ngắn, wide một. giống nhau subject, có chủ ý khác cách diễn đạt.
  2. Format switching — offer AVIF/WebP với JPEG fallback qua <source type="…">, letting trình duyệt take đầu tiên format nó hỗ trợ. điều này ties straight lại để format hướng dẫn on Image SEO hub.

syntax (và fallback rule)

<picture> element wraps một hoặc nhiều hơn <source> elements và luôn ends với đơn giản <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>

Đó trailing <img src> không phải tùy chọn. Google trạng thái điều này trực tiếp: theo section 4.8.1 of đó HTML Tiêu chuẩn, “make sure that you provide an img element as a fallback with a src attribute when using the picture element.” (bản dịch) «hãy bảo đảm đó bạn cung cấp an element as một fallback với một thuộc tính khi dùng đó element.» đây là đó file older các trình duyệt và các crawler fall lại để — và, again, đó một Google indexes.

Làm srcset help SEO? Trực tiếp so với. gián tiếp

Ở đây cách diễn đạt mỗi competing hướng dẫn fumbles, so I’ll là blunt.

Trực tiếp: không. Responsive-image markup không phải tín hiệu xếp hạng way alt text hoặc filenames là cho image tìm kiếm. Thêm srcset không lift của bạn positions, và nó không thay đổi Điều gì xuất hiện trong Google Images. Google indexes image referenced trong src; srcset/<picture> variants là phân phối mechanism, không riêng indexable assets. giữ của bạn alt text, filename, và dữ liệu có cấu trúc attached để đó chính src image.

Indirectly: có, và nó một của biggest levers bạn có. Right-sized images là phần lớn effective concrete khắc phục cho hai Core Web Vitals — LCP và CLS — mà feed Google trang-experience các tín hiệu. đó toàn bộ payoff. nó giống nhau shape as WebP/AVIF story on Image SEO hub: không boost cho format itself, win là speed.

Responsive images và LCP

Oversized images là một of đó hầu hết phổ biến gây ra of một chậm Largest Contentful Paint, và responsive images là Lighthouse được khuyến nghị cách sửa. Đó Lighthouse “Properly size images” (bản dịch) «Properly size images» audit lists “all images in your page that aren’t appropriately sized, along with the potential savings” (bản dịch) «all images trong trang của bạn đó không appropriately sized, along với đó potential savings» — bất cứ điều gì bigger hơn điều này cần để là “just results in wasted bytes and slows down page load time.” (bản dịch) «chỉ dẫn đến wasted bytes và làm chậm xuống trang load time.» Của nó cách sửa, 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.” (bản dịch) «Với responsive images, bạn generate multiple versions of mỗi image, và thì specify mà version để dùng trong của bạn HTML hoặc CSS dùng media các truy vấn, viewport dimensions, và so on.»

Hai specifics worth knowing:

  • Đó failure ngưỡng là 4KiB. Lighthouse chỉ flags an image khi “the rendered size is at least 4KiB smaller than the actual size.” (bản dịch) «đó được kết xuất size là ít nhất 4KiB nhỏ hơn đó thực tế size.» Nhỏ overshoots không count; serving một 3000px file vào một 400px slot làm.
  • MỘT tooling shortcut. Google khuyến nghị RespImageLint, “a helpful bookmarklet for identifying the optimal srcset and sizes values for your images.” (bản dịch) «một helpful bookmarklet cho identifying đó optimal và các giá trị cho của bạn images.» Chạy điều này trước khi bạn hand-calculate breakpoints.

không lazy-load LCP image

Này là đó rule mọi người break hầu hết. srcset on của bạn hero là fine — nhưng không bao giờ pair điều này với lazy loading on đó LCP element. Đó largest trên-đó-fold image nên load eagerly với fetchpriority="high", chính xác as đó Image SEO hub covers. Và khi bạn xây dựng một responsive <picture> hero, giữ đó đổi logic native: Google warns đó điều này “won’t load content that requires user interactions” (bản dịch) «sẽ không load nội dung đó requires người dùng interactions» như swiping hoặc clicking, so một JS scheme đó chỉ loads đó real image sau interaction hides điều này từ Google.

Responsive images và CLS

Ở đây đó trap: srcset alone làm không có gì cho layout shift. Resolution switching decides mà file loads; điều này không reserve space cho điều này. Left không có dimensions, theo web.dev Optimize CLS hướng dẫn, “as images load, text shifts down the page to make room for them” (bản dịch) «as images load, text shifts xuống đó trang để làm room cho them» — vì đó space “can’t be allocated for it until the browser starts to download it and can determine its dimensions.” (bản dịch) «không thể là allocated cho điều này until đó trình duyệt bắt đầu để download điều này và có thể determine của nó dimensions.»

khắc phục là rõ ràng dimensions, và nó composes với responsive markup:

  • Set width và height các thuộc tính on đó <img>. Modern các trình duyệt “set the default aspect ratio of images based on an image’s width and height attributes,” (bản dịch) «set đó default aspect ratio of images dựa trên an image và các thuộc tính,» so những hai numbers reserve đó right box trước bất kỳ srcset variant downloads. (web.dev)
  • Pair them với height: auto trong CSS cho fluid containers. Này là đó part đó looks contradictory nhưng không: web.dev own hướng dẫn là để “use CSS to resize the image to the width of the container” (bản dịch) «dùng CSS để resize đó image để đó width of đó container» và “set height: auto; to avoid using a fixed value for the image height.” (bản dịch) «set để tránh dùng một fixed giá trị cho đó image height.» Đó HTML các thuộc tính set đó intrinsic aspect ratio; đó CSS lets đó image quy mô fluidly. Together they ngăn CLS và stay responsive.
  • Hoặc dùng CSS aspect-ratio để reserve đó space khi bạn không thể set các thuộc tính.

Mà kills một persistent myth: width/height các thuộc tính không break fluid layouts. Các thuộc tính + height: auto là đó correct combo, không một conflict. I walk qua đó đầy đủ layout-shift mechanics trong my Ahrefs CLS bài viết; phiên bản ngắn gọn là “reserve the space so that there’s no shift” (bản dịch) «reserve đó space so đó có không shift» và let đó image fill điều này.

Mobile-đầu tiên lập chỉ mục implications

Google indexes primarily mobile version của bạn các trang, so hai rules quan trọng nhiều hơn họ được sử dụng để Khi bạn’re serving responsive variants:

Google own summary of vì sao để bother là đơn giản: “designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.” (bản dịch) «designing responsive web các trang dẫn đến tốt hơn người dùng experience, since mọi người có thể access them trên một plethora of device types.»

Điều gì về Bing?

có không Bing-cụ thể hướng dẫn on srcset, sizes, hoặc <picture> element — Bing công khai tài liệu không address responsive-image markup tại all. So không justify responsive images với Bing algorithm hook; case là performance và UX, mà Bing (như Google) xử lý as trang-experience quality thay vì điều gì đó bạn có thể point tại được ghi lại responsive-images rule cho.

phổ biến mistakes

  • Forgetting sizes với w descriptors — trình duyệt assumes 100vw và có thể fetch của bạn biggest file cho nhỏ slot.
  • Dropping fallback src on <picture> — spec violation Google explicitly flags, và nó URL các crawler chỉ mục.
  • Mismatched width/height ratio so với. thực ra-phân phối image — vẫn gây ra shift.
  • Lazy-loading LCP hero — delays LCP cho không reason; load nó eagerly với fetchpriority="high".
  • Regenerating image các URL theo yêu cầu — breaks Google bộ nhớ đệm và mobile-đầu tiên “ổn định URL” rule.
  • Reaching cho <picture> Khi srcset/sizes sẽ làm — unnecessary complexity; web.dev nói phần lớn các trang không cần nó.

nơi điều này sits

Đây là sizing-và-phân phối deep dive dưới rộng hơn Image SEO hub — performance half của image SEO, parallel để Cách alt text hướng dẫn xử lý image-tìm kiếm half. cho layout-shift mechanics trong đầy đủ, see my Ahrefs CLS bài viết; cho LCP, fetchpriority, và loading strategy, đó Core Web Vitals hoạt động wearing image hat.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.