ஒரு நல்ல முடிவுக்குப் பின்னால் உள்ள வேலைப்பாடு, வடிவங்கள் மற்றும் சிறிய தேர்வுகள் குறித்த எங்கள் குழுவின் குறிப்புகள்.
PNG-ஐ விட WebP எப்படி சிறிய அளவுகளை அடைகிறது
WebP இரண்டு தனித்துவமான compression mode-களைப் பயன்படுத்துகிறது. lossless mode, இடம் மற்றும் நிற prediction-ஐ PNG-இன் DEFLATE-ஐ விட அதிநவீனமான ஒரு entropy stage-உடன் இணைக்கிறது, Google-இன் வெளியிடப்பட்ட அளவீட்டின்படி வழக்கமான படங்களில் சுமார் 26 சதவீதம் சிறந்த compression விகிதங்களை அடைகிறது. lossy mode, video compression-ஐ ஒத்த ஒரு block-based transform-ஐ பயன்படுத்துகிறது, கண் உண்மையில் காண்பதைத் தக்கவைத்துக்கொண்டு உணர்வுக்கு பொருந்தாத தகவலை நீக்க வடிவமைக்கப்பட்டுள்ளது. வெளிப்படைத்தன்மை அடுக்கு கொண்ட படங்களுக்கு, WebP வெளிப்படைத்தன்மை தரவுக்கு ஒரு தனி lossless sub-compression-ஐ பயன்படுத்துகிறது, RGB data-வுக்கு lossy compression-ஐ பயன்படுத்துகிறது, அதனால்தான் ஒளிபுகாநிலை கொண்ட lossy WebP சம காட்சித் தரத்தில் PNG-ஐ விட கிட்டத்தட்ட மூன்று மடங்கு சிறியதாக இருக்கலாம். PNG-இன் DEFLATE lossless மட்டுமே, lossy mode பயன்படுத்தும் உணர்வுசார் சமரசத்தைப் பயன்படுத்த முடியாது. format வேறுபாடே இந்த இடைவெளியை விளக்குகிறது.
alpha channel விரிவாக
PNG மற்றும் WebP இரண்டும் 8-bit alpha transparency-ஐ ஆதரிக்கின்றன, அதாவது ஒவ்வொரு pixel-உம் முழுமையாக ஒளிபுகாவான 0 முதல் முழுமையாக ஒளிபுகாத்த 255 வரை ஒரு opacity மதிப்பை வைத்திருக்க முடியும். browser-இன் image engine ஒரு PNG-ஐ WebP ஆக மீண்டும் எழுதும்போது, அது ஒவ்வொரு pixel-இன் RGBA மதிப்புகளை வாசித்து, alpha மதிப்புகளை நேரடியாக WebP compression-க்குள் அனுப்புகிறது, அங்கு RGB data எப்படிக் கையாளப்பட்டாலும் அவை lossless compression-உடன் தக்கவைக்கப்படுகின்றன. இதன் விளைவாக, PNG-இல் alpha 0-இல் உள்ள ஒவ்வொரு ஒளிபுகா pixel-உம், 1 முதல் 254 வரையிலான ஒவ்வொரு அரை-ஒளிபுகா pixel-உம், 255-இல் உள்ள ஒவ்வொரு ஒளிபுகாத்த pixel-உம் WebP-இல் சரியாக அதே நிலையில் வரைபடமாகின்றன. மென்மையான drop-shadow அல்லது ஒளிபுகா பின்னணியில் anti-aliased text கொண்ட logo-வுக்கு, விளிம்பின் மென்மை சேதமின்றி கடந்து செல்கிறது. இது JPG-உடன் முரண்படுகிறது, அதன் container specification-இல் alpha field இல்லை, encode செய்வதற்கு முன் படத்தை ஒரு பின்னணி நிறத்திற்கு எதிராக composite செய்ய வேண்டும்.
Core Web Vitals மற்றும் image format தேர்வு
Largest Contentful Paint, பக்கத்தின் மிகப்பெரிய காணக்கூடிய element viewport-இல் தோன்ற எவ்வளவு நேரம் ஆகிறது என்பதை அளவிடுகிறது. பெரும்பாலான content பக்கங்களுக்கு, அந்த element hero image, Google தனது Core Web Vitals மதிப்பீட்டில் LCP-ஐ ranking signal ஆகப் பயன்படுத்துகிறது. PNG படங்கள் கோப்பு அளவு காரணமாக LCP தோல்விகளின் தொடர்ந்த ஆதாரம், ஏனெனில் 4K தெளிவுத்திறனில் ஒரு புகைப்பட PNG பல megabyte எடையாக இருக்கலாம், அதே நேரத்தில் lossless-க்கு நெருக்கமான தரத்தில் சமமான WebP பொதுவாக அதன் ஒரு பகுதியே. PageSpeed Insights இதைத் தனது next-gen image format-களில் வழங்கும் audit உருப்படியில் குறிப்பாகக் குறிக்கிறது, மாற்ற வேண்டிய format ஆக PNG-ஐ பட்டியலிடுகிறது. critical render path-களில் தோன்றும் PNG-களை WebP ஆக மாற்றுவது அளவிடப்பட்ட பக்க செயல்திறனை மேம்படுத்துவதற்கான மிக அதிக-தாக்க single மாற்றங்களில் ஒன்று. browser ஆதரவு காலவரிசை இதைப் பாதுகாப்பாக்குகிறது, Chrome 2011-இல் WebP-ஐ சேர்த்தது, Firefox 2019-இல், Safari 2020-இல், Edge அதன் Chromium மறுகட்டமைப்பிலிருந்து.
lossy வெளியீடும் lossless-க்கு நெருக்கமான அமைப்பும்
WebP எழுதுதல் 0 முதல் 100 வரை ஒரு quality parameter-ஐ வழங்குகிறது, அங்கு உயர்ந்த மதிப்புகள் பெரிய கோப்புகளின் விலையில் அதிக நுணுக்கத்தைத் தக்கவைக்கின்றன. இந்த கருவி, புகைப்படங்கள், UI graphics, icon-கள் என்ற வழக்கமான web asset வகைகளுக்கு காட்சி நம்பகத்தன்மையையும் கோப்பு அளவையும் சமநிலைப்படுத்த அமைக்கப்பட்ட ஒரு நிலையான lossless-க்கு நெருக்கமான அமைப்பில் எழுதுகிறது. இந்த அமைப்பில், வழக்கமான திரை பார்வை தூரத்தில் வெளியீடு மூல PNG-இலிருந்து உணர்வு ரீதியாக வேறுபடாது. தொழில்நுட்ப ரீதியாக, உண்மையான lossless எழுதுதலுடன் ஒப்பிடும்போது சில bit-அளவு துல்லியம் இழக்கப்படுகிறது, அதாவது decode செய்யப்பட்ட WebP pixel-களுக்கும் அசல் PNG pixel-களுக்கும் இடையிலான byte-அளவு ஒப்பீடு சிறிய எண் வேறுபாடுகளைக் காட்டும். இந்த வேறுபாடுகள் புகைப்பட உள்ளடக்கத்திற்கான மனித உணர்வு வரம்பிற்குக் கீழே உள்ளன. lossless நம்பகத்தன்மை கடினமான தேவையாக இருக்கும் medical imaging, satellite photography, அல்லது archival digital preservation-க்கு, சரியான அணுகுமுறை PNG-ஐ வைத்துக்கொண்டு WebP-ஐ working copy ஆக அல்ல, delivery export ஆக மட்டுமே பயன்படுத்துவது.
metadata நடத்தை
PNG-WebP மாற்றத்திற்குப் பயன்படுத்தப்படும் pipeline வெளியீட்டிலிருந்து EXIF, IPTC, XMP metadata-ஐ அகற்றுகிறது. இது மூன்று முக்கிய browser engine-களிலும் காணப்படும் நடத்தையுடன் பொருந்துகிறது. ICC color profile-கள் சீரற்ற முறையில் கையாளப்படுகின்றன, அங்கு Chrome மற்றும் Safari WebP வெளியீட்டில் sRGB ICC profile tag-ஐ தக்கவைக்கின்றன, Firefox ICC profile உட்பட அனைத்து metadata-ஐயும் அகற்றுகிறது. நிகர விளைவு என்னவென்றால், மாற்றப்பட்ட WebP browser-கள் முழுவதும் sRGB-பாதுகாப்பானது, ஆனால் மூல PNG-இல் இருக்கும் Display-P3, Adobe RGB, அல்லது ProPhoto RGB போன்ற எந்த wide-gamut tag-உம் Firefox-இல் தக்கவைக்கப்படாது. color-critical தொழில்முறை workflow-களுக்கு, இந்த சீரின்மை முக்கியம், எனவே இறுதி வெளியீட்டிற்கு color profile நம்பகத்தன்மை தேவைப்பட்டால், ICC data-ஐ வெளிப்படையாக எழுதும் கருவியுடன் மாற்றுங்கள், அல்லது படத்திற்கான ஒரு பிரத்யேக metadata editor-ஐ பயன்படுத்தி post-processing படியாக profile tag-ஐ பயன்படுத்துங்கள்.
எப்போது PNG-ஐ வைத்திருப்பது, எப்போது WebP போதுமானது
நடைமுறை முடிவு மரம் சுருக்கமானது. படத்தின் இறுதி இலக்கு ஒரு web page அல்லது web application, மற்றும் rendering சூழல் 2020 முதல் எந்த browser-உம் என்றால், WebP சரியான export format. படம் Figma, Sketch, அல்லது Affinity Designer போன்ற ஒரு design application-இல் திறக்க வேண்டியிருந்தால், நீங்கள் பயன்படுத்தும் குறிப்பிட்ட version-இல் WebP ஆதரவைச் சரிபார்க்கவும், ஏனெனில் ஆதரவு மாறுபடும். படம் ஒரு print workflow-இல் பயன்படுத்தப்பட்டால், PNG அல்லது TIFF விரும்பப்படுகிறது, ஏனெனில் பெரும்பாலான print RIP-கள் WebP-ஐ கையாளாது. படம் email-இல் அனுப்பப்பட்டால், PNG பாதுகாப்பானது, ஏனெனில் email client-கள் நவீன format-களுடன் கட்டுக்கடங்காமல் சீரற்றவை. படம் பலமுறை திருத்தி மீண்டும் சேமிக்கப்படும் working கோப்பாகப் பயன்படுத்தப்பட்டால், PNG-ஐ master ஆக வைத்திருங்கள். lossless-க்கு நெருக்கமான தரத்தில் WebP ஒரு சிறந்த delivery format, PNG archive மற்றும் editing-க்கு சிறந்த format. சிறந்த workflow PNG-ஐ அசலாக வைத்து web வழங்கலுக்கு WebP-ஐ export செய்கிறது.