Responsive images બ્રાઉজરને ઉપકરણ માટે શ્રેષ્ઠ ઇમેજ પસંદ કરવાની મંજૂરી આપે છે — ફોન પર બેન્ડવિડ્થ બચાય છે અને high-DPI સ્ક્રીન પર તીક્ષ્ણ ઇમેજ સેવા આપે છે.
srcset + sizes — સમાન ઇમેજ, વિવિધ resolutions
html
Responsive images બ્રાઉজરને ઉપકરણ માટે શ્રેષ્ઠ ઇમેજ પસંદ કરવાની મંજૂરી આપે છે — ફોન પર બેન્ડવિડ્થ બચાય છે અને high-DPI સ્ક્રીન પર તીક્ષ્ણ ઇમેજ સેવા આપે છે.
srcset તેમના આંતરિક પહોળાઈ સાથે ઉમેદવાર ઇમેજ સૂચિબદ્ધ કરે છે (400w = 400px પહોળું).sizes બ્રાઉજરને કહે છે કે વિવિધ breakpoints પર ઇમેજ કેટલી પહોળી પ્રદર્શિત થશે (અહીં: 600px નીચે સંપૂર્ણ viewport પહોળાઈ, અન્યથા અડધું).sizes + ઉપકરણની pixel density ને જોડીને સૌથી નાની ઇમેજ પસંદ કરે છે જે હજી પણ તીક્ષ્ણ દેખાય છે — કંઈપણ ડાઉનલોડ કરતાં પહેલાં.ફોન શક્ય છે small.jpg પસંદ કરે; Retina લેપટોપ તેને 50% પહોળાઈમાં બતાવતો હોય તો 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>
બ્રાઉજર તમે પ્રથમ <source> વાપરે છે જે તે આધાર આપે/મેચ કરે. <picture> ઉપયોગ કરો જ્યારે તમને વિવિધ formats (AVIF/WebP ને JPEG fallback સાથે સેવા આપો) અથવા સ્ક્રીન સાઈઝ દીઠ વિવિધ ક્રોપ (art direction) ની જરૂર હોય — એવી વસ્તુઓ જે srcset એકલા કરી શકતું નથી.
srcset + sizes.<picture>.સાચા માપની, આધુનિક-format ઇમેજ સેવા આપવી એ વેબ માટે સૌથી મોટો performance જીત છે — તે મોબાઈલ ડેટા ઉપયોગ નાટકીય રીતે ઘટાડે છે અને Largest Contentful Paint વધારે છે.
યે મૂળ સાધનો બ્રાઉજરને આપોઆપ શ્રેષ્ઠ પસંદ કરવાની મંજૂરી આપે છે, જૂના બ્રાઉજર માટે graceful fallbacks સાથે.