இணைய செயல்திறனை மேம்படுத்த சிறந்த பட வடிவத்தை கண்டுபிடித்தல்

இது உண்மையான உண்மை: இணையத்திற்கான சிறந்த பட வடிவம் ஒன்றே இல்லை. சரியான தேர்வு எப்போதும் தந்திரமான ஒன்று, படம் என்னவென்று முழுமையாக சார்ந்துள்ளது. புகைப்படங்களுக்கு, AVIF அல்லது WebP அற்புதமான சுருக்கத்தை வழங்குகிறது. லோகோக்களுக்கு மற்றும் ஐகான்களுக்கு, SVG என்பது மறுக்க முடியாத சாம்ராஜ்யம். மற்றும் நீங்கள் ஒரு தெளிவான பின்னணி உடைய ரச்டர் கிராஃபிக் தேவைப்படும் தருணங்களில், PNG இன்னும் செல்லுபடியாகும்.

சிறந்த இணையப் படம் வடிவங்களை குறியாக்கம் செய்வது

சரியான படம் வடிவத்தை தேர்வு செய்வது என்பது காட்சி தரம், கோப்பு அளவு மற்றும் நீங்கள் தேவைப்படும் அம்சங்கள் ஆகியவற்றுக்கிடையிலான அடிக்கடி பேச்சுவார்த்தையாகும். நீங்கள் ஒரு படத்திலிருந்து குறைத்த ஒவ்வொரு கிலோபைட்டும் உங்கள் பக்கங்களை வேகமாக ஏற்ற உதவுகிறது, இது பின்னர் சிறந்த பயனர் அனுபவத்திற்கும், தேடல் தரவரிசைகளில் சிறிய ஊக்கத்திற்கும் வழிவகுக்கிறது. JPEG மற்றும் PNG போன்ற பழைய வடிவங்கள் இன்று நாம் அறிந்த காட்சியியல் இணையத்தின் அடித்தளத்தை அமைத்திருந்தாலும், WebP மற்றும் AVIF போன்ற moderne வடிவங்கள் செயல்திறனை புதிய மட்டத்திற்கு கொண்டு செல்கின்றன.

இந்த ஒற்றை முடிவு உங்கள் வலைத்தளத்தில் பரவுகிறது, சில முக்கிய பகுதிகளை பாதிக்கிறது:

• செயல்திறன்: சிறிய படங்கள் வேகமான ஏற்ற நேரங்களை குறிக்கின்றன. இது எளிதானது. இது பார்வையாளர்களை ஈர்க்கவும், Google's Core Web Vitals ஐ கடந்து செல்லவும் ஒரு பெரிய காரணி.
• தரம்: ஒவ்வொரு வடிவமும் நிறங்கள், நுணுக்கமான விவரங்கள் மற்றும் கூர்மையான தன்மைகளை கையாளுவதற்கு தனித்துவமான முறையைக் கொண்டுள்ளது. தவறான தேர்வு ஒரு அழகான புகைப்படத்தை மண் போல காட்டலாம் அல்லது ஒரு ஐகானை மங்கலாகக் காட்டலாம்.
• செயல்பாடு: நீங்கள் ஒரு தெளிவான பின்னணி உடைய லோகோவை தேவைப்படுகிறீர்களா? அல்லது யாரிடமாவது கவனத்தை ஈர்க்க ஒரு அசைவினை? சில வடிவங்கள் மட்டுமே இந்த வேலைகளை கையாள முடியும்.

இந்த தேர்வுகள் உங்கள் வலைத்தளத்தின் வேகம் மற்றும் தரத்தை எவ்வாறு பாதிக்கின்றன என்பதைக் கையாள்வதற்காக, இணையத்திற்கான சிறந்த படம் வடிவத்தை தேர்வு செய்வதற்கான இந்த விரிவான வழிகாட்டியைப் பார்க்கவும். அடிப்படைகளை சரியாகப் பெறுவது ஒரு முறையாக ஒழுங்குபடுத்தப்பட்ட வலைத்தளத்திற்கு முதல் உண்மையான படியாகும்.

இணைய படம் வடிவங்களின் விரைவான ஒப்பீடு

சத்தத்தை கடந்து செல்ல, முக்கியமான விருப்பங்கள் ஒன்றுக்கு மற்றொன்று எப்படி ஒப்பிடப்படுகின்றன என்பதைக் காண உதவுகிறது. ஒவ்வொரு வடிவமும் உண்மையில் ஒரு சிறப்பு கருவியாகும். நீங்கள் ஒரு திருகை திருப்புவதற்காக ஒரு ஹாமரைப் பயன்படுத்தமாட்டீர்கள், மேலும் நீங்கள் ஒரு சிக்கலான புகைப்படத்திற்கு PNG ஐப் பயன்படுத்தக்கூடாது.

நவீன படம் மேம்படுத்தலின் மையக் கருத்து எளிது: அதன் குறிப்பிட்ட சூழலில் இன்னும் அழகாகக் காணப்படும் சிறிய கோப்பை வழங்குங்கள். இது உங்கள் வலைத்தளத்தில் ஒரே வடிவத்தை மட்டுமே பயன்படுத்துவதற்கு பதிலாக, வடிவங்களின் கலவையைப் பயன்படுத்துவது என்றால், இது பெரும்பாலும் பொருந்தும்.

இது மிகவும் பொதுவான வடிவங்கள் மற்றும் அவற்றின் சிறந்த செயல்பாடுகளைப் பற்றிய விரைவான மேலோட்டம். ஒவ்வொன்றின் நுணுக்கங்களை ஆராய்வதற்கு முன், இந்த அட்டவணையை உங்கள் தொடக்கத்திற்கு உதவியாகக் கருதுங்கள்.

வடிவம்	சிறந்தது	சுருக்கம்	தெளிவு	அசைவுகள்
AVIF	புகைப்படங்கள், உயர் விவரக் கிராஃபிக்ஸ்	மேலான இழப்பு & இழப்பில்லா	ஆம் (அல்பா)	ஆம்
WebP	புகைப்படங்கள், கிராஃபிக்ஸ், அசைவுகள்	சிறந்த இழப்பு & இழப்பில்லா	ஆம் (அல்பா)	ஆம்
JPEG	புகைப்படங்கள் (பழைய மாற்றம்)	நல்ல இழப்பு	இல்லை	இல்லை
PNG	லோகோக்கள், ஐகான்கள், ஸ்கிரீன்ஷாட்கள்	சிறந்த இழப்பில்லா	ஆம் (அல்பா)	இல்லை
SVG	லோகோக்கள், ஐகான்கள், விளக்கப்படங்கள்	வெக்டர் (அளவிடக்கூடிய)	ஆம்	ஆம் (CSS/JS)

பழைய வடிவங்களை ஒப்பிடுதல்: JPEG, PNG, மற்றும் GIF

நவீன சக்திவாய்ந்த தொழில்நுட்பங்கள் போல WebP மற்றும் AVIF விளையாட்டை மாற்றியதற்கு முன்பு, இணையத்தின் காட்சி அடிப்படையை உருவாக்கிய மூன்று வடிவங்கள் இருந்தன. JPEG, PNG, மற்றும் GIF என்பது ஒவ்வொரு வலை மேம்பாட்டு நிபுணருக்கும் உள்ள கருவிகள். புதிய வடிவங்கள் எவ்வளவு சிறந்தவை என்பதை உணர்வதற்கு, முதலில் பழைய வடிவங்களைப் புரிந்துகொள்ள வேண்டும் - அவற்றின் பலவீனங்கள், அவற்றின் விசித்திரங்கள், மற்றும் அவற்றை உருவாக்கிய குறிப்பிட்ட சிக்கல்கள்.

இந்த பழைய வடிவங்கள் இன்னும் தங்கள் இடத்தை வைத்திருக்கின்றன, பெரும்பாலும் பழைய உலாவிகளுக்கான பாதுகாப்பான மாற்றாக. ஒவ்வொன்றும் கோப்பு அளவு, படம் தரம், மற்றும் வெளிப்படைத்தன்மை அல்லது அனிமேஷன் போன்ற சிறப்பு அம்சங்களுக்கு இடையே மாறுபட்ட சமநிலையை அடைகிறது. சரியானதை தேர்வு செய்வது எப்போதும் சூழ்நிலையின் அடிப்படையில் இருக்கும், எனவே அவற்றின் செயல்பாடு மற்றும் எங்கு இன்னும் சிறப்பாக இருக்கின்றன என்பதைப் பார்க்கலாம்.

JPEG: புகைப்படத் தரநிலை

தசாப்தங்களாக, JPEG (Joint Photographic Experts Group என்பதற்கான சுருக்கம்) ஆன்லைன் புகைப்படங்களின் அடிப்படையான அரசன் ஆக இருந்தது. இதன் ரகசிய ஆயுதம், பல மண்ணெண்ணெய் மற்றும் மென்மையான கிரேடியன்ட்களுடன் உள்ள படங்களை சுருக்குவதில் சிறந்த இழப்பான சுருக்கம் அல்காரிதம் ஆகும் - நிலத்தடி, புகைப்படங்கள், மற்றும் தயாரிப்பு புகைப்படங்களைப் பற்றி சிந்திக்கவும். இந்த அல்காரிதம் மனித கண் கவனிக்க முடியாத காட்சி தரவுகளை நீக்குவதன் மூலம் செயல்படுகிறது.

தவிர, அந்த சுருக்கம் இரட்டை கத்தி ஆகும். "இழப்பான" என்பது தரவுகள் நிரந்தரமாக அழிக்கப்பட்டது என்று பொருள். நீங்கள் சுருக்கத்தை மிகவும் கடுமையாக அழுத்தினால், நீங்கள் மோசமான கோளாறுகள் - அந்த தடிப்பான அல்லது மங்கலான பகுதியை காண்பீர்கள், இது கூர்மையான விவரங்களை அழிக்கிறது. இதனால் JPEG, லோகோக்கள், பயனர் இடைமுக உருப்படிகள், அல்லது உரை உள்ள ஸ்கிரீன்ஷாட்களைப் போன்ற கூரையான கோடுகள் உள்ள எதற்கும் மோசமான தேர்வாகிறது.

மற்றொரு முக்கிய குறைபாடு? வெளிப்படைத்தன்மை இல்லை. JPEG எப்போதும் ஒரு உறுதியான பின்னணி கொண்டிருக்கும், இது நீங்கள் வெவ்வேறு நிறத்திலான பின்னணிகளில் வைக்க வேண்டிய ஐகான்கள் அல்லது கிராபிக்களுக்கு பயனற்றதாகிறது.

PNG: குறைபாடற்ற கிராபிக்கள் மற்றும் வெளிப்படைத்தன்மைக்காக

Portable Network Graphics (PNG) வடிவம் GIFக்கு ஒரு சக்திவாய்ந்த, பாட்டெண்ட்-இல்லாத மாற்றமாக வந்தது. இதன் வரையறை அம்சம் இழப்பில்லாத சுருக்கம், இது ஒரு பிக்சலின் தகவலையும் நீக்காது என்று கூறுவதற்கான அழகான வழியாகும். நீங்கள் ஒரு PNGவை நூறு முறை சேமிக்கலாம், அது முதலில் இருந்ததைப் போலவே இருக்கும், JPEG போல ஒவ்வொரு புதிய சேமிப்புடன் குறைகிறது.

இந்த பிக்சல்-சரியான அணுகுமுறை PNGவை இங்கே பயன்படுத்துவதற்கான இடமாக்குகிறது:

• லோகோக்கள் மற்றும் ஐகான்கள்: இது கூர்மையான கோடுகள் மற்றும் உறுதியான நிறங்களை முற்றிலும் தெளிவாக வைத்திருக்கிறது.
• ஸ்கிரீன்ஷாட்கள் மற்றும் வரைபடங்கள்: உரை மற்றும் பயனர் இடைமுக உருப்படிகள் எந்த சுருக்கத்திற்கும் மங்காமல் தெளிவாகவே இருக்கும்.
• உரையுடன் உள்ள படங்கள்: இது JPEGகள் அடிக்கடி எழுத்துக்களின் சுற்றிலும் உருவாக்கும் மங்கலான "ஹேலோஸ்" ஐ தவிர்க்கிறது.

PNGக்கு உண்மையான விளையாட்டு மாற்றுபவர் அதன் ஆல்பா வெளிப்படைத்தன்மை ஆதரவு. GIF அடிப்படையான ஆன்-அல்லது-ஆஃப் வெளிப்படைத்தன்மையை மட்டுமே கையாள முடிந்த போது, PNG 256 நிலைகள் கொண்ட வெளிப்படைத்தன்மையை அனுமதிக்கிறது. இது நீங்கள் அழகான, நெகிழ்வான எல்லைகள் மற்றும் யதார்த்தமான இறக்குமதி நிழல்களை உருவாக்க அனுமதிக்கிறது, இது எந்த பின்னணியிலும் இணைந்து செல்கிறது.

இங்கு பரிமாற்றம் கோப்பு அளவாகும். ஒரு சிக்கலான புகைப்படத்திற்காக, ஒரு இழப்பில்லாத PNG, ஒப்பிடத்தக்க JPEGக்கு மாபெரும் அளவுக்கு பெரியதாக இருக்கும் - பெரும்பாலும் 5-10x பெரியது. அதனால், நீங்கள் புகைப்படத்திற்காக PNG ஐ 거의 எப்போதும் பயன்படுத்தக்கூடாது; இது செயல்திறனைப் பாதிக்கிறது. நீங்கள் PNG ஆக சேமிக்கப்பட்ட ஒரு பெரிய புகைப்படம் இருந்தால், ஒரு விரைவான மாற்றம் தேவை. இதற்காக, நீங்கள் PNG ஐ JPG க்கு மாற்றுவதற்கான எங்கள் விரிவான வழிகாட்டியில் மேலும் அறியலாம்.

GIF: எளிய, லோ-ஃபை அனிமேஷனுக்காக

Graphics Interchange Format (GIF) என்பது இந்த குழுவின் பழமையானது, மற்றும் இன்று, இதன் முக்கிய வேலை எளிய, மடக்கப்பட்ட அனிமேஷன்களை உருவாக்குவது. பல ஆண்டுகளாக, இது ஒரு பிளக்கின் தேவையின்றி ஒரு வலைப்பக்கத்தில் இயக்கத்தைப் பெறுவதற்கான ஒரே வழியாக இருந்தது. ஆனால் இந்த வடிவம், பெரும்பாலான நவீன தளங்களுக்கு பொருத்தமற்றதாக ஆக்குவதற்கான சில கடுமையான சுமைகளை கொண்டுள்ளது.

GIFகள் 256 நிறங்கள் கொண்ட ஒரு சிறிய நிறப் பட்டியலுடன் stuck ஆக உள்ளன. இதனால், அனிமேஷன் GIFகள் பெரும்பாலும் தானியங்கி அல்லது திதர்டு போல தோன்றுகின்றன, குறிப்பாக அவை முதலில் மில்லியன் நிறங்களுடன் உள்ள ஒரு வீடியோவிலிருந்து உருவாக்கப்பட்டால். அவை 1-பிட் வெளிப்படைத்தன்மையை மட்டுமே ஆதரிக்கின்றன, அதாவது ஒரு பிக்சல் 100% தெளிவாக அல்லது 100% உறுதியானதாக இருக்கும் - மென்மையான எல்லைகள் இல்லை.

GIFகள் எங்கு இருந்தாலும், அவை நீங்கள் பெற்றதற்காக பெரிய கோப்புகளை உருவாக்குகின்றன. நவீன வீடியோ வடிவங்கள் போல MP4 அல்லது WebM, ஒரே அளவிலான அனிமேஷனை சிறிய அளவுக்கு வழங்கலாம் மற்றும் நிறத்தில் மிகச் சிறந்ததாக இருக்கும். அனிமேஷன் WebP மற்றும் AVIF ஆகியவை மேலும் சிறந்த மாற்றங்கள். இன்றைய காலத்தில், GIFகளை மின்னஞ்சல் கிளையன்டுகள் அல்லது வீடியோ ஆதரவு கிடைக்காத பழைய அமைப்புகளுக்காகவே வைத்திருக்க வேண்டும்.

அவர்களின் வயதுக்கு மாறாக, இந்த வடிவங்கள் பழமையானதாக இல்லை. W3Techs ஆய்வு காட்டுகிறது, PNG பயன்பாடு 78.1% இல் முன்னணி நிலையில் உள்ள போது, JPEG ஒரு முக்கிய வேலைப்பாடு ஆக உள்ளது. அதே தரவுகள் WebP 18.7% இல் உள்ளது மற்றும் வேகமாக வளர்கிறது, பெரும்பாலும் அதன் சுருக்கம் JPEG ஐ 25-35% க்கு முந்துகிறது. அதாவது சிறிய கோப்புகள் மற்றும் வேகமான பதிவிறக்க நேரங்கள், குறிப்பாக மொபைல் பயனர்களுக்காக.

நவீன வடிவங்களுடன் கையாள்வது: WebP மற்றும் AVIF

பழைய காப்பாளர்கள் காட்சி இணையத்தை உருவாக்கினாலும், வேகம் மற்றும் செயல்திறனை அடைய முடியாத தேடல் ஏதோ சிறந்த ஒன்றை தேவைப்பட்டது. இதுதான் WebP மற்றும் AVIF வந்தது. இவை உள்ளமைவுகளை மாற்றுவதற்கான சீர்திருத்தங்கள் அல்ல; கோப்பு அளவு மற்றும் காட்சி தரத்தின் இடையே சமநிலையை முற்றிலும் மேம்படுத்துவதற்காக அடிப்படையிலிருந்து வடிவமைக்கப்பட்டன.

Google 2010 இல் WebP ஐ நவீன இணையத்திற்கான ஒரு அனைத்திற்கும் பொருந்தும் வடிவமாக வெளியிட்டது. இது தனது முந்தையவற்றின் சிறந்த பண்புகளை நுணுக்கமாக இணைக்கிறது, JPEGக்கு போட்டியாக இழப்பான சுருக்கத்தை வழங்குகிறது மற்றும் PNG ஐ அடிக்கடி முந்திக்கொள்கிறது. அதற்கு மேலாக, இது வெளிப்படைத்தன்மை மற்றும் அனிமேஷனை கையாள்கிறது, இதனால் இது ஒரு உண்மையான வேலைப்பாடு ஆகிறது.

AVIF, புதிய குழந்தை, மிகச் சக்திவாய்ந்த AV1 வீடியோ குறியீட்டின் அடிப்படையில் கட்டப்பட்டுள்ளது. இந்த மரபு, அதிக அளவிலான சுருக்கத்தை வழங்குவதற்கான ஒரு முக்கியமான முன்னணி அளிக்கிறது, இது ஒப்பிடத்தக்க தரத்திலுள்ள எந்த வடிவத்திற்கும் விட சிறிய கோப்புகளை தொடர்ந்து வழங்குகிறது. அவர்களின் படங்களில் ஒவ்வொரு கடைசி கிலோபைட்டையும் சுருக்குவதில் ஆர்வமுள்ளவர்களுக்கு, AVIF தற்போதைய தங்க தரநிலையாக உள்ளது.

WebP சுருக்கத்தின் சக்தி

WebP இன் மாயாஜாலம் அதன் நுணுக்கமான முன்னறிவிப்பு குறியீட்டில் உள்ளது. எளிய வார்த்தையில், இது ஒரு குறிப்பிட்ட பிக்சலின் சுற்றியுள்ள பிக்சல்களைப் பார்க்கிறது, அந்த பிக்சலின் மதிப்பு என்ன இருக்க வேண்டும் என்பதைக் கணிக்கிறது, பின்னர் மாறுபாடு ஐ மட்டுமே சேமிக்கிறது. இது JPEG மற்றும் PNG பயன்படுத்தும் முறையைவிட மிகவும் புத்திசாலி மற்றும் செயல்திறனான அணுகுமுறை ஆகும், இது சில மிகச் சிறந்த கோப்பு அளவுப் சேமிப்புகளை உருவாக்குகிறது.

இதன் நெகிழ்வுத்தன்மை ஒரு பெரிய வெற்றி.

நீங்கள் WebP ஐ முழு அளவிலான முறையில் பயன்படுத்தலாம்:

• புகைப்படங்கள்: குறைந்த தரம் கொண்ட WebP, அதே காட்சி தரத்திற்கான JPEG ஐ ஒப்பிடும்போது கோப்பு அளவுகளை 25-35% குறைக்கலாம்.
• தரவுகள் உள்ள கிராபிக்ஸ்: லோகோக்கள் மற்றும் ஐகான்களுக்கு, குறைவில்லா WebP பொதுவாக PNG ஐ விட சிறிய கோப்புகளை உருவாக்குகிறது, ஒவ்வொரு பிக்சலையும் சரியாகக் காப்பாற்றுகிறது.
• அனிமேஷன்கள்: அனிமேட்டெட் WebP பழைய GIF வடிவத்தை விட சிறந்த நிற ஆதரவை மற்றும் மிகவும் சிறிய கோப்புகளை வழங்குகிறது.

WebP இன் பலவகைமை அதன் மிகப்பெரிய சொத்து ஆகும். இது JPEG, PNG மற்றும் GIF ஆகியவற்றால் ஒருமுறை வகைப்படுத்தப்பட்ட தனித்துவமான பங்குகளை ஒரே, மிகவும் திறமையான வடிவத்தில் ஒருங்கிணைக்கிறது, சொத்துகளை நிர்வகிக்கும் மற்றும் வழங்கும் குழாய்களை எளிதாக்குகிறது.

இணையம் இந்த நன்மைகளை உறுதியாக ஏற்றுக்கொண்டுள்ளது. WebP ஐப் பயன்படுத்தும் வலைத்தளங்கள் 18.7% ஆக உயர்ந்துள்ளன, மேலும் அந்த எண் இன்னும் உயர்ந்து கொண்டே இருக்கிறது, ஏனெனில் உலாவி ஆதரவு தற்போது முற்றிலும் பரவலாக உள்ளது. இதன் மூலம், நீங்கள் உங்கள் பயனர்களில் பெரும்பாலானவர்களுக்கு WebP ஐ நம்பிக்கையுடன் வழங்க முடியும் மற்றும் அவர்களுக்கு வேகமான அனுபவத்தை வழங்கலாம்.

AVIF: திறமையின் புதிய ராஜா

WebP ஒரு முன்னேற்றமாக இருந்தால், AVIF மற்றொரு பெரிய முன்னேற்றமாகும். AV1 வீடியோ குறியீட்டின் மேம்பட்ட அல்காரிதங்களை பயன்படுத்துவதன் மூலம், AVIF பொதுவாக WebP ஐ விட 30% சிறியது மற்றும் JPEG ஐ விட 50% சிறியது என்ற கோப்பு அளவுகளை அடைய முடிகிறது, அனைத்து தரத்தில் எந்த கவனிக்கத்தக்க தரவின்மையும் இல்லாமல். இது சிக்கலான உருப்படிகள், விவரங்கள் மற்றும் நிற மாறுபாடுகள் உள்ள படங்களில் சிறப்பாக செயல்படுகிறது.

AVIF இன் ஒரு முக்கிய அம்சம், உயர் டைனமிக் ரேஞ்ச் (HDR) உட்பட, பரந்த நிற அளவீட்டிற்கும் உயர்ந்த பிட்டுகள் கொண்ட ஆதரவாகும். இது மேலும் உயிரோட்டமான, உண்மையான நிறங்களை மற்றும் செழுமையான எதிரொலியை உருவாக்குகிறது, இது நிறத்தின் உண்மைத்தன்மை முக்கியமான உயர் தாக்கம் கொண்ட ஹீரோ படங்கள் அல்லது தயாரிப்பு புகைப்படங்களுக்கு சிறந்த தேர்வாக இருக்கிறது.

ஆனால் அந்த சக்திக்கு சிறிய செலவுகள் உள்ளன. AVIF படங்களை குறியாக்கம் மற்றும் குறியாக்கம் செய்யும் போது, WebP அல்லது JPEG ஐ ஒப்பிடும்போது CPU இல் அதிகமான தேவைகள் இருக்கலாம். நவீன சாதனங்கள் மிகக் குறைவாகவே சோர்வடைகின்றன, ஆனால் நீங்கள் மிகவும் பழைய ஹார்ட்வேர் ஆதரிக்கிறீர்கள் என்றால், இது நினைவில் வைக்க வேண்டியது. குறியாக்க செயல்முறை கூட சில நேரங்களில் மெதுவாக இருக்கலாம், இது உடனுக்குடன் படங்களை உருவாக்குவதில் நம்பிக்கையளிக்கும் வேலைப்பாடுகளை பாதிக்கலாம்.

சரியான தேர்வைச் செய்யுதல்: WebP vs. AVIF

ஆனால், நீங்கள் எது பயன்படுத்த வேண்டும்? முடிவு பொதுவாக அதிகபட்ச அழுத்தத்தை பரந்த அளவிலான பொருந்துதலுடன் சமநிலைப்படுத்துவதில் அடிப்படையாக இருக்கும். இரண்டும் இணையத்திற்கான மேம்பாட்டுக்கு சிறந்தவை, ஆனால் அவை சற்று மாறுபட்ட சூழ்நிலைகளில் சிறப்பாக செயல்படுகின்றன.

உங்களுக்கு முடிவெடுக்க உதவ, முக்கிய அம்சங்களை விரைவான ஒப்பீட்டில் உடைப்போம்.

வலைப் படம் வடிவ அம்ச ஒப்பீடு

இந்த அட்டவணை ஒவ்வொரு வடிவமும் என்ன வழங்குகிறது என்பதற்கான ஒரு சுருக்கத்தை வழங்குகிறது, அவற்றை ஒருவருக்கொருவர் ஒப்பிடுவதில் எளிதாக்குகிறது.

அம்சம்	JPEG	PNG	GIF	WebP	AVIF	SVG
அழுத்தம்	குறைந்த தரம்	குறைவில்லா	குறைவில்லா	குறைந்த தரம் & குறைவில்லா	குறைந்த தரம் & குறைவில்லா	N/A
தரவு	இல்லை	ஆம் (ஆல்பா)	ஆம் (இண்டெக்ஸ்)	ஆம் (ஆல்பா)	ஆம் (ஆல்பா)	ஆம்
அனிமேஷன்	இல்லை	இல்லை (APNG)	ஆம்	ஆம்	ஆம்	ஆம் (SMIL)
நிற ஆழம்	24-பிட்	48-பிட் வரை	8-பிட்	24-பிட்	36-பிட் வரை	N/A
சிறந்தது	புகைப்படங்கள்	லோகோக்கள், ஐகான்கள்	சிறிய அனிமேஷன்கள்	எல்லா நோக்கங்களுக்கும்	புகைப்படங்கள், HDR	லோகோக்கள், ஐகான்கள்
உலாவி ஆதரவு	100%	100%	100%	~97%	~93%	~99%

இதைக் காணும்போது, WebP மற்றும் AVIF போன்ற நவீன வடிவங்கள் தங்கள் முந்தையவர்களை விட அதிகமான பரப்பளவை அடைக்கின்றன.

இன்றைய பெரும்பாலான வலைத்தளங்களுக்கு, WebP செயல்திறன் மற்றும் பொருந்துதலுக்கிடையில் சரியான இடத்தை அடைகிறது. அதன் அண்மைய உலகளாவிய ஆதரவுடன் (~97% உலாவிகள்) மற்றும் வேகமான குறியாக்கத்துடன், இது உங்கள் இயல்பான படம் வடிவத்திற்கு ஒரு பாதுகாப்பான, நம்பகமான மற்றும் மிகவும் திறமையான தேர்வாகும். நீங்கள் உங்கள் தற்போதைய படங்களை புதுப்பிக்க வேண்டும் என்றால், உங்களுக்கு தேவையான கருவிகள் எளிதாக கிடைக்கின்றன. JPG ஐ WebP ஆக மாற்றுவது பற்றிய எங்கள் வழிகாட்டி உங்களை தொடங்க உதவும்.

AVIF என்பது நீங்கள் மிகச் சிறிய கோப்பு அளவைக் கொண்டிருக்க வேண்டும் என்றால், ஒரு முக்கியமான மிகப்பெரிய உள்ளடக்கத்தை (LCP) கொண்ட படத்திற்கு ஒரு தரவாக இருக்கும்.

இதன் மேம்பட்ட சுருக்கம், இந்த உருவாக்கம் அல்லது உடைப்பில் நீங்கள் உண்மையான செயல்திறனை வழங்குகிறது. இது ஆதரிக்காத ~7% உலாவிகளுக்கான WebP அல்லது JPEG மாற்றத்தை அமைக்க உறுதியாக இருக்கவும்.

SVG உடன் வெக்டர் கிராஃபிக்ஸ் மீது மூழ்குதல்

இப்போது வரை நாங்கள் பார்த்த அனைத்தும்—JPEG, PNG, WebP—என்பவை ராஸ்டர் வடிவங்கள். இவை அனைத்தும் பிக்சல்களின் கிரிட் அடிப்படையில் உருவாக்கப்பட்டவை. இப்போது, நாம் முறையை மாற்றி, முற்றிலும் வேறுபட்ட ஒரு உயிரினத்தைப் பற்றி பேசலாம்: Scalable Vector Graphics (SVG).

பிக்சல் கிரிட் பதிலாக, SVG கள் வடிவங்கள், கோடுகள் மற்றும் வளைவுகளை வரைபடம் செய்ய கணித சமன்பாடுகளைப் பயன்படுத்துகின்றன. இதுவே அவற்றின் மிகப்பெரிய பலனின் ரகசியம்: அனந்த அளவீடு. ஒரு SVG-ஐ ஒரு சிறிய ஐக்கானிலிருந்து ஒரு பெரிய விளம்பர பலகைக்கு விரிக்கலாம், அது எப்போதும் மங்காது அல்லது பிக்சலேடாக மாறாது. உலாவி புதிய பரிமாணங்களுக்கு கணிதத்தை மீண்டும் இயக்குகிறது, ஒவ்வொரு கோட்டையும் முற்றிலும் தெளிவாக வைத்திருக்கிறது.

SVG-இன் ஒப்பிட முடியாத நெகிழ்வுத்தன்மை

SVG கள் உண்மையில் குறியீடு (குறிப்பாக, XML) என்பதால், அவை எளிமையான கிராஃபிக்ஸ் க்காக மிகவும் லேசாக உள்ளன. PNG ஆக 30 KB ஆக இருக்கும் ஒரு லோகோ, SVG ஆக 2-3 KB ஆக குறைக்கலாம். இது செயல்திறனுக்கான ஒரு பெரிய வெற்றி.

ஆனால் உண்மையான மாயாஜாலம், இந்த குறியீட்டை CSS மற்றும் JavaScript உடன் நேரடியாக மாற்றலாம். இது சில அற்புதமான சாத்தியக்கூறுகளை திறக்கிறது:

• இணையதள கிராஃபிக்ஸ்: நீங்கள் ஒரு ஐக்கானின் நிறத்தை மிதக்கும் போது மாற்றலாம் அல்லது பயனர் செயல்களுக்கு எதிராக பதிலளிக்கும் சிக்கலான அநிமேஷன்களை உருவாக்கலாம்.
• அணுகல்: SVG உள்ள உரை உண்மையான உரை என்பதால், இது தேடக்கூடியது, தேர்ந்தெடுக்கக்கூடியது மற்றும் திரை வாசகர்களால் படிக்கக்கூடியது. இது பயன்பாட்டிற்கான ஒரு பெரிய பிளஸ்.
• எளிதான திருத்தங்கள்: உங்கள் தளத்தின் நிறத் திட்டத்தை புதுப்பிக்க வேண்டுமா? நீங்கள் ஒரு கோடியில் CSS-ஐப் பயன்படுத்தி ஒரு லோகோவின் நிறத்தை மாற்றலாம், பத்து மாறுபட்ட பட கோப்புகளை மீண்டும் ஏற்றுமதி செய்ய வேண்டியதில்லை.

SVG-இன் சக்தி, கிராஃபிக்ஸ்களை உலாவியில் ஸ்கிரிப்ட்டபிள் பொருட்களாகக் கருதுகிறது, நிலையான பிக்சல்களாக அல்ல. இது நவீன, பதிலளிக்கும் முன்னணி வடிவமைப்பிற்கான ஒரு அடிப்படை கருவியாக்கிறது.

நீங்கள் ஒரு புகைப்படத்திற்காக SVG-ஐப் பயன்படுத்த முடியாது, இது உண்மையாகவே. ஆனால் அனைத்து திரை அளவுகள் மற்றும் தீர்வுகளில் தெளிவாக இருக்க வேண்டிய எந்த கிராஃபிக்கிற்காகவோ, இது மறுக்க முடியாத சாம்ராஜ்யம். அதன் சிறிய கோப்பு அளவு மற்றும் வடிவமைப்பு திறன்கள், அதை இணையத்திற்கான சிறந்த பட வடிவம் ஆக மாற்றுகிறது, முடிவாக.

எப்போது SVG-ஐ தேர்வு செய்வது

SVG-ஐ எப்போது பயன்படுத்துவது என்பதைப் புரிந்துகொள்வது மிகவும் எளிது. இது அளவிட வேண்டிய உறுதியான நிறங்களுடன் கூடிய புகைப்படமில்லாத கிராஃபிக் என்றால், SVG எப்போதும் சரியான அழைப்பு.

இங்கே முக்கிய பயன்பாட்டு வழிகள் உள்ளன:

• லோகோக்கள் மற்றும் பிராண்ட் அடையாளங்கள்: உங்கள் லோகோவை ஒரு சிறிய favicon-இல் இருந்து 4K திரைக்கு வரை குற்றமற்றதாக வைத்திருக்கவும்.
• UI ஐக்கான்கள்: மெனுக்கள், பொத்தான்கள் மற்றும் பிற இடைமுக உருப்படிகளுக்கான ஐக்கான்கள் எந்த அளவிலும் தெளிவாக இருக்கும், மேலும் நீங்கள் எளிதாக உங்கள் தீமையைப் பொருந்தும் நிறத்தை மாற்றலாம்.
• எளிய விளக்கங்கள் மற்றும் வரைபடங்கள்: கோடு கலை, அட்டவணைகள் மற்றும் தகவல் கிராஃபிக்ஸ் SVG க்கான சிறந்தவை மற்றும் பொதுவாக ஒப்பிடக்கூடிய PNG க்கும் மிகவும் சிறியதாக முடிகிறது.
• அனிமேஷன்கள் மற்றும் தொடர்புடைய உருப்படிகள்: எளிய GIF-ஐ விட சிக்கலான அனிமேஷன்களுக்கு, SVG என்பது சிறந்த வழி.

சில நேரங்களில், நீங்கள் JPG போன்ற ஒரு ராஸ்டர் படத்தை ஆரம்பிக்கலாம், இது அளவிடக்கூடிய கிராஃபிக்காக மாற்றப்பட வேண்டும். அந்த சூழலுக்கு, மாற்றத்தை கையாள்வதற்கான சரியான வழியைப் புரிந்துகொள்வது முக்கியம். JPG-ஐ அளவிடக்கூடிய SVG-ஆக மாற்றுவது பற்றிய எங்கள் வழிகாட்டி, இந்த வேலைப்பாட்டிற்கான சிறந்த நடைமுறைகளைப் பற்றிய விவரங்களை வழங்குகிறது. சரியான வேலைகளுக்காக SVG-ஐ ஏற்றுக்கொள்வதன் மூலம், உங்கள் மிகவும் முக்கியமான காட்சி சொத்துகள் செயல்திறனான, நெகிழ்வான மற்றும் எதிர்காலத்திற்கே தகுந்ததாக இருப்பதை உறுதி செய்கிறீர்கள்.

ஒவ்வொரு பட வடிவத்தின் விவரங்களைப் புரிந்துகொள்வது ஒன்று, ஆனால் ஒவ்வொன்றையும் எப்போது பயன்படுத்துவது என்பதைப் புரிந்துகொள்வது தான் இணைய செயல்திறனை உண்மையாக நகர்த்துகிறது. சரியான தேர்வு எப்போதும் சூழ்நிலைக்கு ஏற்ப இருக்கும். ஒரு அற்புதமான ஹீரோ படத்திற்கு சரியான வடிவம், ஒரு எளிய நிறுவன லோகோவுக்கு பேரழிவாக இருக்கும்.

இது எங்கு கொண்டு செல்கிறது. நீங்கள் சந்திக்கும் மிகவும் பொதுவான பட வகைகளைப் பார்ப்போம் மற்றும் சிறந்த வடிவத்தை தேர்வு செய்வதற்கான ஒரு நடைமுறை கட்டமைப்பை உருவாக்குவோம். இதன் மூலம், நீங்கள் எப்போதும் காட்சி தரத்தை கோப்பு அளவுடன் மற்றும் செயல்திறனுடன் சமநிலைப்படுத்தும் ஒரு உத்தியாக்கத்தை உருவாக்குகிறீர்கள்.

தொடங்குவதற்காக, முதல் முடிவு பொதுவாக ஒரு ராஸ்டர் (பிக்சல் அடிப்படையிலான) அல்லது வெக்டர் (கணித அடிப்படையிலான) வடிவத்தின் இடையே இருக்கும். இந்த ஓட்டக்கோப்பு அந்த ஆரம்பத் தேர்வை உடைக்கிறது.

நீங்கள் காணக்கூடியது போல, உங்கள் படம் பிக்சல்களின் கிரிட் மூலம் உருவாக்கப்பட்டால், புகைப்படம் போல, நீங்கள் ராஸ்டர் பகுதியில் இருக்கிறீர்கள். இது கணித சமன்பாடுகள் மூலம் வரையறுக்கப்பட்டால், லோகோ போல, வெக்டர் தெளிவான வெற்றி.

புகைப்பட உள்ளடக்கம் மற்றும் ஹீரோ படங்கள்

உண்மையான உலக விவரங்களைப் பிடிக்கும் எந்த படத்திற்காகவும்—தயாரிப்பு படங்கள், புகைப்படங்கள் அல்லது பெரிய, அழகான விளம்பரப் படங்கள்—அந்த விளையாட்டு அதிகபட்ச சுருக்கம் மற்றும் குறைந்த தரம் இழப்பில் உள்ளது. இங்கு நவீன வடிவங்கள் முழுமையாக மிளிர்கின்றன.

• முதன்மை தேர்வு: AVIF
  AVIF இன்று நீங்கள் பெறக்கூடிய மிகக் கடுமையான சுருக்கத்தை வழங்குகிறது. இது அடிக்கடி WebP க்கு 30% சிறியது மற்றும் JPEG க்கு 50% சிறியது கோப்புகளை உருவாக்குகிறது. உங்கள் Largest Contentful Paint (LCP) மதிப்பை நேரடியாக பாதிக்கும் ஒரு முக்கியமான, மேலே உள்ள ஹீரோ படத்திற்கு, அந்த வகை கோப்பு அளவின் குறைப்பு ஒரு பெரிய வெற்றி.

• இரண்டாம் தேர்வு: WebP
  WebP-ஐ ஒரு சிறந்த அனைத்திற்கும் உகந்ததாகக் கருதுங்கள். இது சிறந்த சுருக்கத்தை வழங்குகிறது, விரைவாக களையப்படுகிறது, மற்றும் நெருங்கிய உலகளாவிய உலாவி ஆதரவை ( ~97%) கொண்டுள்ளது. இது almost எந்த புகைப்படத்திற்கும் நம்பகமான, உயர் செயல்திறனுள்ள மற்றும் பாதுகாப்பான ஒரு தேர்வாகும்.

• மாற்று: JPEG
  நீங்கள் எப்போதும் JPEG மாற்றத்தை வைத்திருக்க வேண்டும்.

  இது இணைய புகைப்படங்களின் lingua franca ஆகும், பழைய உலாவிகளில் உள்ள சிறிய சதவீதமான பயனர்கள் உடைந்த படத்தை பார்த்து நிற்காமல் இருப்பதை உறுதி செய்கிறது.

இதை சரியாகச் செய்வது e-commerce இல் மிகவும் முக்கியமாகும். முக்கிய சந்தையில் இந்த தேர்வுகள் எப்படி செயல்படுகின்றன என்பதைப் பற்றிய ஆழமான ஆய்வுக்கு, அதிகாரப்பூர்வ Amazon Product Image Requirements ஐப் பார்க்கவும்.

லோகோக்கள், ஐகான்கள் மற்றும் UI கூறுகள்

கட்டுப்படுத்தப்பட்ட கோடுகள், உறுதியான நிறங்கள் மற்றும் சுத்தமான ஜியோமெட்ரிக் வடிவங்களை நம்பும் கிராபிக்ஸ் உடன் நீங்கள் வேலை செய்யும் போது, அளவிடுதல் மற்றும் தெளிவானது பேசப்படாதவை. பிக்சலேஷன் உங்கள் மோசமான எதிரி.

• முதன்மை தேர்வு: SVG
  லோகோக்கள் மற்றும் ஐகான்களுக்கு, SVG என்பது மறுக்க முடியாத சாம்ராஜ்யம். இது ஒரு வெக்டர் வடிவம் என்பதால், இது எந்த அளவுக்கு வேண்டுமானாலும் - ஒரு சிறிய favicon இருந்து ஒரு பெரிய பில்போர்ட்டு வரை - தரம் இழப்பின்றி அளவிடுகிறது. உங்கள் பிராண்ட் சொத்துகள் ஒவ்வொரு திரையில் பிக்சல்-சரியானவையாக காணப்படும். மேலும், கோப்பு அளவுகள் மிகச் சிறியவை, மேலும் CSS உடன் SVG களை வடிவமைத்து, hover-state நிற மாற்றங்கள் போன்ற தொடர்புடைய விளைவுகளை உருவாக்கலாம்.

• இரண்டாம் தேர்வு: PNG
  எந்த காரணத்திற்காக நீங்கள் SVG ஐப் பயன்படுத்த முடியாதிருந்தால் (ஒரு தளக் கட்டுப்பாடு அல்லது மிகவும் சிக்கலான விளக்கம் காரணமாக), PNG அடுத்த சிறந்தது. அதன் இழப்பில்லா கம்பிரசன் கோடுகள் மற்றும் உரைகளை முற்றிலும் தெளிவாக வைத்திருக்கிறது, மேலும் அதன் ஆல்பா தெளிவுத்தன்மை பல்வேறு நிறங்களில் லோகோக்களை வைக்க மிகவும் சிறந்தது.

தெளிவுத்தன்மை தேவைப்படும் படங்கள்

சில சமயம், ஒரு எளிய லோகோ அல்லாத படத்தில், ஒரு தயாரிப்பு வெட்டுதல் அல்லது பின்னணி நீக்கப்பட்ட ஒரு புகைப்படம் போன்ற ஒரு தெளிவான பின்னணி தேவைப்படுகிறது.

• முதன்மை தேர்வு: WebP
  WebP இங்கு ஒரு விளையாட்டு மாற்றுபவர். இது PNG போல முழுமையான ஆல்பா தெளிவுத்தன்மையை ஆதரிக்கிறது, ஆனால் பெரும்பாலும் கோப்பு அளவின் ஒரு பகுதியிலேயே. நீங்கள் இரண்டு உலகங்களின் சிறந்தவற்றைப் பெறுகிறீர்கள்: சிக்கலான புகைப்பட விவரங்கள் மற்றும் ஒரு திறமையான தெளிவான பின்னணி.

• இரண்டாம் தேர்வு: AVIF
  AVIF மேலும் சிறந்த கம்பிரசனுடன் சிறந்த தெளிவுத்தன்மை ஆதரிக்கிறது. உங்கள் முன்னணி முன்னுரிமை மிகச் சிறிய கோப்பு அளவாக இருந்தால், AVIF ஒரு சிறந்த தேர்வு.

• Fallback: PNG
  PNG தெளிவுத்தன்மைக்கான பாரம்பரிய, நம்பகமான விருப்பமாக உள்ளது. புகைப்பட உள்ளடக்கத்திற்கு அதன் கோப்புகள் பெரியதாக இருக்கலாம், ஆனால் அதன் ஆதரவு உலகளாவியமாக உள்ளது, இது அதை ஒரு குண்டு-பாதுகாப்பான fallback ஆக மாற்றுகிறது.

அனிமேஷன் கூறுகள்

ஒரு பக்கத்திற்கு இயக்கத்தைச் சேர்க்க, இலக்கு பாரம்பரிய GIF களின் பெரிதான கோப்பு அளவுகளை தவிர்க்கும் போது உயர்தர காட்சிகளை வழங்குவதாகும்.

• முதன்மை தேர்வு: MP4/WebM வீடியோ
  உண்மையில், எளிய, குறுகிய சுழற்சியிலிருந்து அதிகமாக ஏதாவது இருந்தால், நீங்கள் ஒரு நவீன வீடியோ வடிவத்தைப் பயன்படுத்த வேண்டும். ஒரு குறுகிய, சுழல்கின்ற, மௌன MP4 வீடியோ, அதே வேலை செய்யும் அனிமேட்டட் GIF க்கு விட எப்போதும் சிறியதாகவும், முடிவற்ற முறையில் சிறந்ததாகவும் இருக்கும்.

• இரண்டாம் தேர்வு: அனிமேட்டட் WebP
  ஒரு ஏற்றுமதி சுழற்சியோ அல்லது அனிமேட்டட் ஐகானோ போன்ற எளிய GIF-பாணி அனிமேஷன்களுக்கு, அனிமேட்டட் WebP ஒரு அருமையான மேம்பாடு. இது நிறங்களின் முழு வரம்பையும் மற்றும் தெளிவுத்தன்மையையும் ஆதரிக்கிறது, மேலும் அதன் முந்தையதைவிட மிகவும் சிறிய கோப்புகளை உருவாக்குகிறது.

• Fallback: GIF
  நீங்கள் கண்டிப்பாக செய்ய வேண்டும் என்றால் மட்டுமே GIF ஐப் பயன்படுத்தவும். அதன் முக்கியக் காப்பகம் மின்னஞ்சல் சந்தைப்படுத்தலில் உள்ளது, அங்கு வீடியோ ஆதரவு மிகவும் நம்பகமற்றது.

பயன்பாட்டு வழக்கின்படி பட வடிவமைப்பு பரிந்துரைகள்

விஷயங்களை மேலும் தெளிவாக செய்ய, எங்கள் பரிந்துரைகளை சுருக்கமாகக் கூறும் ஒரு விரைவு-குறிப்பு அட்டவணை இங்கே உள்ளது. இதைப் நீங்கள் ஒவ்வொரு முறையும் சரியான அழைப்பைச் செய்யும் குறிப்பு அட்டவணையாகக் கருதுங்கள்.

பயன்பாட்டு வழக்கு	முதன்மை வடிவ பரிந்துரை	Fallback வடிவ பரிந்துரை	முக்கிய கவனிக்கைகள்
புகைப்படங்கள் & ஹீரோ படங்கள்	AVIF	WebP, பின்னர் JPEG	விரைவான ஏற்றத்திற்காக மிகச் சிறிய கோப்பு அளவுக்கு முன்னுரிமை அளிக்கவும் (LCP).
லோகோக்கள் & ஐகான்கள்	SVG	PNG	அளவிடுதல் மற்றும் தெளிவானது முக்கியமாகும். எப்போது வேண்டுமானாலும் வெக்டர்களைப் பயன்படுத்தவும்.
தெளிவுத்தன்மையுடன் கூடிய படங்கள்	WebP	AVIF, பின்னர் PNG	WebP தெளிவான புகைப்படங்களுக்கு தரம் மற்றும் கோப்பு அளவின் சிறந்த சமநிலையை வழங்குகிறது.
எளிய அனிமேஷன்கள்	அனிமேட்டட் WebP	அனிமேட்டட் GIF	நவீன வடிவங்களை நோக்குங்கள்; அதிகபட்ச இணக்கத்திற்காக மட்டுமே GIF ஐப் பயன்படுத்தவும் (எ.கா., மின்னஞ்சல்).
சிக்கலான அனிமேஷன்கள்	MP4 / WebM வீடியோ	அனிமேட்டட் WebP	வீடியோ நீண்ட அல்லது உயர்தர அனிமேஷன்களுக்கு மிகவும் திறமையானது.

இந்த அட்டவணை உங்கள் படத்தின் நோக்கத்தை சிறந்த வடிவத்திற்கு விரைவாக வரைபடமாக்க உதவ வேண்டும், நீங்கள் எப்போதும் செயல்திறன் மற்றும் காட்சித் தரத்திற்காக உங்களைச் சரிசெய்யுகிறீர்கள் என்பதை உறுதி செய்கிறது.

பட வடிவமைப்புகள் குறித்த அடிக்கடி கேட்கப்படும் கேள்விகள்

நவீன பட வடிவமைப்புகளுடன் வேலை செய்வது சில நடைமுறை கேள்விகளை உருவாக்கலாம். இந்த அறிவை நடைமுறைக்கு கொண்டு செல்ல உதவ, நான் டெவலப்பர்கள் மற்றும் வடிவமைப்பாளர்களிடமிருந்து கேட்கப்படும் பொதுவான கேள்விகளைப் பார்க்கலாம்.

WebP மற்றும் AVIF ஐ எப்படி Fallbacks உடன் பயன்படுத்துவது?

இது பெரியது. நீங்கள் WebP அல்லது AVIF போன்ற சமீபத்திய, மிகவும் திறமையான வடிவங்களைப் பயன்படுத்த விரும்புகிறீர்கள், ஆனால் பழைய உலாவிகளில் உள்ள பயனர்களை நீங்கள் விலக்க முடியாது. பதில் HTML <picture> கூறு. இது உலாவியை கடுமையான வேலை செய்ய அனுமதிக்கும் அழகான எளிய தீர்வு.

இந்த <picture> குறிச்சொல், நீங்கள் பட வடிவங்களின் ஒரு மெனுவை வழங்க அனுமதிக்கிறது.

உள்ளமைவானது மேலிருந்து தொடங்கி, அது புரிந்த முதல் உருப்படியை கண்டுபிடித்து, மீதியை புறக்கணிக்கிறது.

இதன் குறியீட்டில் இது எப்படி காணப்படுகிறதென்று பாருங்கள்:

இந்த எடுத்துக்காட்டில், உலாவி முதலில் image.avif ஐ ஏற்ற முயற்சிக்கிறது. அது முடியாவிட்டால், image.webp க்கு மாறுகிறது. அது தோல்வியுற்றால், <img> டேக்கில் உள்ள பழைய image.jpg க்கு மீண்டும் செல்லுகிறது, இது எங்கும் வேலை செய்கிறது.

இந்த உத்தியை முன்னேற்றம் என்றால் அழைக்கப்படுகிறது. நீங்கள் நவீன உலாவிகளை கொண்ட பயனர்களுக்கு சிறந்த அனுபவத்தை வழங்குகிறீர்கள், மற்றவர்களுக்கு ஒரு முற்றிலும் செயல்படக்கூடிய (மற்றும் இன்னும் வேகமான) தளத்தை உறுதி செய்கிறீர்கள். இது உண்மையான வெற்றி-வெற்றி.

AVIF பரந்த அளவில் பயன்பாட்டிற்கு தயாரா?

ஆம், சில குறிப்புகளுடன். AVIF வழங்கும் சுருக்கம் எளிதாகக் கற்பனை செய்ய முடியாதது, மற்றும் உலாவி ஆதரவு இறுதியாக ஒரு சீரான புள்ளியை அடைந்துள்ளது. Chrome, Firefox, மற்றும் Safari அனைத்தும் இணைந்ததால், AVIF இப்போது உலகளாவிய பயனர்களின் சுமார் 93% க்கான ஆதரவை வழங்குகிறது.

ஆனால் நினைவில் கொள்ள வேண்டிய சில விஷயங்கள் உள்ளன:

• எழுத்தாக்க வேகம்: AVIF கோப்பை உருவாக்குவதற்கு JPEG அல்லது WebP க்கானதைவிட அதிக செயலாக்க சக்தி தேவைப்படுகிறது. உங்கள் வேலைப்பாட்டில் ஆயிரக்கணக்கான படங்களை உடனுக்குடன் உருவாக்குவது உள்ளால், இது ஒரு தடையாக இருக்கலாம்.
• விளக்க செயல்திறன்: பெரும்பாலான நவீன சாதனங்களில், AVIF உடனடியாக விளக்குகிறது. ஆனால் சில மிகவும் குறைந்த தரமான ஹார்ட்வேரில், WebP சில நேரங்களில் ஒரு சில பங்கு வினாடி வேகமாகக் காட்சி அளிக்கலாம், கோப்பு தானே கொஞ்சம் பெரியதாக இருந்தாலும்.

பெரும்பாலான தளங்களுக்கு, AVIF ஒரு அற்புதமான தேர்வு, குறிப்பாக ஒவ்வொரு கிலோபைட்டும் முக்கியமான ஹீரோ படங்கள் போன்ற உயர் தாக்கம் உள்ள காட்சிகளுக்கு. நீங்கள் எப்போதும் WebP அல்லது JPEG க்கு ஒரு மாற்று வழங்குவது என்பதை உறுதி செய்யுங்கள் <picture> கூறுகளைப் பயன்படுத்தி. இது AVIF ஆதரவு இல்லாத பயனர்களின் சிறிய சதவீதத்தை காப்பாற்றுகிறது மற்றும் எந்தவொரு எட்ஜ் வழக்குகளை கையாள்கிறது.

பட வடிவங்கள் மைய இணைய அளவீடுகளை எவ்வாறு பாதிக்கின்றன?

பட வடிவங்கள் உங்கள் மைய இணைய அளவீடுகள் க்கு மையமாக உள்ளன, குறிப்பாக மிகப்பெரிய உள்ளடக்கத்தை வரையறுக்கும் (LCP). LCP என்பது திரையில் உள்ள மிகப்பெரிய காட்சி கூறு தோன்றுவதற்கான நேரத்தை அளவிடுகிறது. மெதுவாக ஏற்றப்படும் ஹீரோ படம் ஒரு மோசமான LCP மதிப்பீட்டிற்கான மிகவும் பொதுவான காரணங்களில் ஒன்றாகும்.

இங்கே நேரடி தொடர்பு உள்ளது:

1. சிறிய கோப்புகள், வேகமான பதிவிறக்கங்கள்: JPEG இலிருந்து AVIF அல்லது WebP போன்ற நவீன வடிவத்திற்கு மாறுவது கோப்பு அளவுகளை மிகுந்த அளவுக்கு குறைக்கலாம்.
2. வேகமான பதிவிறக்கங்கள், சிறந்த LCP: கோப்பு சிறியது, அது நெட்வொர்க் வழியாக வேகமாக பயணிக்கிறது. இது உலாவி உங்கள் முக்கிய படத்தை மிகவும் விரைவாக பதிவிறக்கம் செய்து காட்சியளிக்க முடியும் என்பதைக் குறிக்கிறது, இது உங்கள் LCP நேரத்தை நேரடியாக மேம்படுத்துகிறது. இங்கே சில நூறு மில்லிசெகண்டுகளை குறைப்பது "சிறந்த" மதிப்பீட்டுக்கும் "மேம்படுத்த வேண்டும்" என்ற எச்சரிக்கைக்கு இடையே உள்ள வேறுபாடு ஆகலாம்.
3. CLS க்கு மறைமுக தாக்கம்: குறிப்பிட்ட வடிவத்துடன் தொடர்புடையதாக இல்லாத போதிலும், ஒரு நல்ல ஆப்டிமைசேஷன் செயல்முறை உங்கள் படங்களில் width மற்றும் height பண்புகளை அமைப்பதைக் கொண்டுள்ளது. இது படங்கள் ஏற்றப்படும் போது பக்கம் குதிக்காமல் இருக்கிறது, இது ஒரு நல்ல மொத்த வடிவமைப்பு மாற்றம் (CLS) மதிப்பீட்டிற்காக முக்கியமாக இருக்கிறது.

நீங்கள் இணையத்திற்கான சிறந்த படம் வடிவத்தை தேர்வு செய்யும் போது, நீங்கள் ஒரு தொழில்நுட்ப முடிவை மட்டுமல்ல, பயனர் அனுபவத்தை நேரடியாக மேம்படுத்துகிறீர்கள் மற்றும் Google க்கு முக்கியமான செயல்திறன் அளவீட்டை மேம்படுத்துகிறீர்கள்.

படங்களை மாற்றுவதற்கான சிறந்த கருவிகள் என்ன?

ஒரு வலுவான மாற்ற கருவி உங்கள் கருவிகள் தொகுப்பில் ஒரு அவசியமாகும். நல்ல செய்தி என்னவென்றால், பல சிறந்த விருப்பங்கள் உள்ளன, கடுமையான டெஸ்க்டாப் செயலிகளிலிருந்து தொடங்கி அழகான ஆன்லைன் மாற்றிகளுக்குப் போகின்றன.

எனது சில பரிந்துரைகள் இங்கே உள்ளன:

• டெஸ்க்டாப் செயலிகள்: உச்ச கட்டுப்பாட்டிற்காக, Adobe Photoshop (சரியான பிளக்-இன்களுடன்), Affinity Photo, அல்லது இலவச மற்றும் திறந்த மூல சக்தி GIMP போன்ற கருவிகளை நீங்கள் மிஞ்ச முடியாது.
• கமாண்ட்-லைன் கருவிகள்: உங்கள் வேலைப்பாட்டை தானியங்கி செய்ய வேண்டும் என்றால், கமாண்ட்-லைன் கருவிகள் செல்லவேண்டும். WebP க்கான cwebp மற்றும் AVIF க்கான avifenc ஐப் பார்க்கவும். இவை ஸ்கிரிப்டிங் மற்றும் தொகுப்பில் செயலாக்கத்திற்கு சிறந்தவை.
• ஆன்லைன் மாற்றிகள்: Google இன் Squoosh அற்புதமாக உள்ளது. இது வடிவங்கள் மற்றும் சுருக்க அளவுகளை ஒப்பிட visually செய்யும் வலை அடிப்படையிலான கருவி, இது வர்த்தகங்களை கற்றுக்கொள்ள சிறந்த வழியாக உள்ளது.

சில நேரங்களில், நீங்கள் மென்பொருளை நிறுவாமல் அல்லது உணர்வுப்பூர்வமான கோப்புகளை ஒரு சீரற்ற வலைத்தளத்திற்கு பதிவேற்றாமல் ஒரு விரைவு, சிக்கலற்ற மாற்றத்தை தேவைப்படுகிறது. அங்கு உலாவியில் உள்ள கருவிகள் உண்மையில் பிரகாசமாக உள்ளன.

---

உங்கள் உலாவியில் நேர்மறை, பாதுகாப்பான மற்றும் தனிப்பட்ட கோப்பு மாற்றங்களுக்கு, ShiftShift Extensions சக்திவாய்ந்த கருவிகளின் தொகுப்பை வழங்குகிறது. JPG, PNG, WebP, AVIF, மற்றும் SVG இடையே மாற்றவும், தொகுப்பில் செயலாக்கம் மற்றும் நுணுக்கமான தரத்தைக் கட்டுப்படுத்தவும். அனைத்து செயலாக்கமும் உள்ளூர் அளவில் நடைபெறும் என்பதால், உங்கள் கோப்புகள் உங்கள் கணினியிலிருந்து வெளியே போகாது, முழுமையான தனியுரிமை மற்றும் ஆஃப்லைன் செயல்பாட்டை உறுதி செய்கிறது.

ஒரு புத்திசாலி வேலைப்பாட்டை https://shiftshift.app இல் கண்டறியவும்.