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 સાથે.
વિગતવાર જવાબો સાથે IT ઇન્ટરવ્યૂ પ્રશ્નોની લાઇબ્રેરી — જુનિયરથી સિનિયર સુધી.
દાન કરો