使用 srcset 和 <picture> 可實(shí)現(xiàn)響應(yīng)式圖片優(yōu)化。1. 使用 srcset 配合 sizes 屬性根據(jù)設(shè)備分辨率選擇合適圖片，提升加載速度；2. 使用 <picture> 實(shí)現(xiàn)藝術(shù)方向控制，如不同屏幕下顯示不同構(gòu)圖；3. 可結(jié)合兩者同時(shí)實(shí)現(xiàn)分辨率切換與內(nèi)容調(diào)整；4. 始終為 <picture> 提供 回退，優(yōu)先使用 WebP 格式，并控制圖片版本數(shù)量在 2–3 個(gè)以內(nèi)；5. 在真實(shí)設(shè)備上測(cè)試效果。正確應(yīng)用這些技術(shù)能顯著提升性能與用戶體驗(yàn)，最終實(shí)現(xiàn)更智能的圖片加載策略。

Responsive images are more than just scaling nicely on different screens — they’re about delivering the right image, at the right size, to the right device. Two key tools for mastering this are the srcset attribute and the <picture></picture> element. Used correctly, they help improve page load times, save bandwidth, and enhance user experience across devices.

Let’s break down how to use them effectively.

Understanding srcset for Resolution Switching

The srcset attribute lets you define multiple image sources so the browser can pick the best one based on the device’s screen resolution and size.

This is especially useful for serving high-DPI (retina) images to devices that can benefit from them, without forcing mobile users on slow connections to download unnecessarily large files.

<img src="/static/imghw/default1.png"  data-src="image-400w.jpg"  class="lazy" 
  srcset="image-400w.jpg 400w, 
          image-800w.jpg 800w, 
          image-1200w.jpg 1200w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 800px) 50vw,
         33vw"
  alt="A responsive image example">

Here’s what each part does:

• src: Fallback for older browsers.
• srcset: Lists image files with their width descriptors (400w, 800w, etc.). The browser uses these along with the viewport to pick the best fit.
• sizes: Tells the browser how much space the image will take up at different breakpoints. This helps it choose the correct image from the srcset.

Key tip: Always include width descriptors (w) in srcset when using sizes. Without them, the browser can’t calculate which image fits best.

Using the <picture> Element for Art Direction

Sometimes, you don’t just want to change the image’s resolution — you want to change the image itself based on the screen size. That’s where the <picture> element comes in.

It works like <video> or <audio>, using <source> tags to define different image sources under different conditions.

For example, a landscape-oriented hero image on desktop might be too cluttered on mobile. With <picture>, you can serve a cropped or simplified version instead.

<picture>
  <source media="(max-width: 799px)" srcset="cropped-mobile.jpg">
  <source media="(min-width: 800px)" srcset="full-desktop.jpg">
  <img src="/static/imghw/default1.png"  data-src="full-desktop.jpg"  class="lazy" alt="Hero banner">
</picture>

How it works:

• The browser checks each <source>'s media condition from top to bottom.
• It uses the first one that matches.
• The <img src="/static/imghw/default1.png" data-src="large-800w.jpg" class="lazy" alt="用SRCSET和元素掌握響應(yīng)式圖像" > tag is required as a fallback.

This is called art direction — changing composition, not just resolution.

When to Use srcset vs <picture>

It’s easy to get confused about which tool to use. Here’s a simple rule:

• Use srcset with sizes when you’re serving the same image content at different resolutions (e.g., retina vs. standard screens).
• Use <picture> when you need to change the image content or aspect ratio based on the viewport (e.g., cropped mobile version).

You can even combine both:

<picture>
  <source media="(max-width: 600px)"
          srcset="small-400w.jpg 400w, 
                  small-800w.jpg 800w"
          sizes="100vw">
  <source media="(min-width: 601px)"
          srcset="large-800w.jpg 800w, 
                  large-1600w.jpg 1600w"
          sizes="67vw">
  <img src="/static/imghw/default1.png"  data-src="large-800w.jpg"  class="lazy" alt="Combined approach">
</picture>

This gives you both art direction and resolution switching.

Best Practices and Common Pitfalls

• Always include an img element inside <picture>. It’s required and acts as a fallback.

• Use modern formats like WebP in <source> for better compression:

  <picture>
    <source srcset="image.webp" type="image/webp">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Fallback for non-WebP browsers">
  </picture>

• Don’t overdo image variants. 2–3 sizes are usually enough. Too many can overwhelm the browser’s choice logic.

• Test on real devices. Emulation in dev tools doesn’t always reflect real-world network and DPI conditions.

---

Basically, srcset and <picture></picture> give you fine-grained control over responsive images. Use srcset for resolution switching, <picture></picture> for art direction or format switching, and combine them when you need both. It’s not magic — but with a little planning, it makes your images smarter and your site faster.

以上是用SRCSET和元素掌握響應(yīng)式圖像的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！