பதிலளிக்கும் படங்கள் உலாவியை சாதனத்திற்கான சிறந்த படத்தைத் தேர்ந்தெடுக்க அனுமதிக்கின்றன — ஃபோன்களில் அலைவரிசையைச் சேமிக்கிறது மற்றும் உচ்च-DPI திரைகளில் தீட்சண்ணமான படங்களை வழங்குகிறது.
srcset + sizes — அதே படம், வெவ்வேறு மெருகுபடிகள்
html
பதிலளிக்கும் படங்கள் உலாவியை சாதனத்திற்கான சிறந்த படத்தைத் தேர்ந்தெடுக்க அனுமதிக்கின்றன — ஃபோன்களில் அலைவரிசையைச் சேமிக்கிறது மற்றும் உচ்च-DPI திரைகளில் தீட்சண்ணமான படங்களை வழங்குகிறது.
srcset அவற்றின் உள்ளார்ந்த அகலம் கொண்ட வேட்பாளர் படங்களை பட்டியலிடுகிறது (400w = 400px அகலம்).sizes வெவ்வேறு ব்রேக்பয়েন்টுகளில் படம் காண்பிக்கப்படும் விதம் பற்றி உலாவியைக் கூறுகிறது (இங்கே: 600px க்கு கீழே முழு viewport அகலம், இல்லையெனில் பாதி).sizes + சாதனத்தின் பிக்சல் சாంத்வ்யத்தை একত்रிত செய்து, இன்னும் தீட்சண்ணமாக இருக்கும் சிறிய படத்தைத் தேர்ந்தெடுக்கிறது — எதையும் பதிவிறக்கம் செய்வதற்கு முன்.ஒரு ஃபோன் small.jpg என்பதைத் தேர்ந்தெடுக்கலாம்; 50% அகலத்தில் காண்பிக்கும் Retina மடிக்கணினி 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> ஐ பயன்படுத்துகிறது. வெவ்வேறு வடிவங்கள் (JPEG fallback கொண்ட AVIF/WebP வழங்க) அல்லது திரை அளவுக்கு வெவ்வேறு பயிர் (கலை திசை) தேவைப்படும் போது <picture> ஐ பயன்படுத்தவும் — srcset மட்டும் செய்ய முடியாத விஷயங்கள்.
srcset + sizes.<picture>.சரியான அளவு, நவீன-வடிவ படங்களை வழங்குவது வலையின் மிகப்பெரிய செயல்திறன் வெற்றிகளில் ஒன்றாகும் — இது மொபைல் தரவு பயன்பாட்டைப் பெருமளவில் குறைக்கிறது மற்றும் Largest Contentful Paint ஐ மேம்படுத்துகிறது.
இந்த உள்ளார்ந்த கருவிகள் உலாவியை தன்னியக்கமாக உகந்த தேர்வு செய்ய அனுமதிக்கின்றன, பழைய உலாவிகளுக்கு நன்கு விழுந்த fallback ஆகியவற்றைக் கொண்டு.