Responsiiviset kuvat antavat selaimen valita parhaan kuvan laitteelle — säästämällä kaistanleveyttä puhelimissa ja toimittamalla terävät kuvat korkean DPI:n näytöille.
srcset + sizes — sama kuva, eri resoluutiot
html
Responsiiviset kuvat antavat selaimen valita parhaan kuvan laitteelle — säästämällä kaistanleveyttä puhelimissa ja toimittamalla terävät kuvat korkean DPI:n näytöille.
srcset luettelee ehdokaskuvat niiden sisäisillä leveuksillä (400w = 400px leveä).sizes kertoo selaimelle, kuinka leveä kuva näytetään eri breakpointeissa (tässä: täysi näkymän leveys alle 600px, muuten puolet).sizes + laitteen pikselitiheyden valitakseen pienimmän kuvan, joka näyttää silti terävältä — ennen kuin lataa mitään.Puhelin voisi valita small.jpg; Retina-kannettava, joka näyttää sen 50% leveydellä, voisi valita 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>
Selain käyttää ensimmäistä <source>-elementtiä, jonka se tukee/vastaa. Käytä <picture>-elementtiä, kun tarvitset eri muotoja (tarjoa AVIF/WebP JPEG-fallback-varalla) tai eri rajaus näytön koon perusteella (taiteellinen ohjaus) — asioita, joita srcset yksin ei voi tehdä.
srcset + sizes.<picture>.Oikeankokoisten, modernien muodon kuvien toimittaminen on yksi verkon suurimmista suorituskykyvoitoista — se vähentää merkittävästi mobiilitiedon käyttöä ja parantaa Largest Contentful Paint -arvoa.
Nämä alkuperäiset työkalut antavat selaimelle tehdä optimaalisen valinnan automaattisesti, ja niissä on tyylikkäät fallback-vaihtoehdot vanhemmille selaimille.