Imej responsif membenarkan penyemak imbas memilih imej terbaik untuk peranti — menghemat lebar jalur pada telefon dan menyajikan imej tajam pada skrin DPI tinggi.
srcset + sizes — imej yang sama, resolusi berbeza
html
Imej responsif membenarkan penyemak imbas memilih imej terbaik untuk peranti — menghemat lebar jalur pada telefon dan menyajikan imej tajam pada skrin DPI tinggi.
srcset menyenaraikan imej calon dengan lebar intrinsik mereka (400w = 400px lebar).sizes memberitahu penyemak imbas berapa lebar imej akan dipaparkan pada titik putus yang berbeza (di sini: lebar semak imbas penuh di bawah 600px, sebaliknya separuh).sizes + ketumpatan piksel peranti untuk memilih imej terkecil yang masih kelihatan tajam — sebelum memuat turun apa pun.Telefon mungkin memilih small.jpg; komputer riba Retina yang mempamernya pada 50% lebar mungkin memilih large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Penyemak imbas menggunakan pertama <source> yang disokong/dipadankan. Gunakan <picture> apabila anda memerlukan format berbeza (sajikan AVIF/WebP dengan sandaran JPEG) atau pangkasan berbeza setiap saiz skrin (arahan seni) — perkara yang srcset sahaja tidak dapat lakukan.
srcset + sizes.<picture>.Menyajikan imej bersaiz yang betul dan format moden adalah salah satu kemenangan prestasi terbesar untuk web — ia mengurangkan penggunaan data mudah alih secara drastik dan meningkatkan Largest Contentful Paint.
Alat asli ini membenarkan penyemak imbas membuat pilihan optimum secara automatik, dengan sanggahan yang elok untuk penyemak imbas yang lebih lama.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma