உலாவி-அடிப்படையிலான படம் மாற்றம் எவ்வாறு செயல்படுகிறது
ஒவ்வொரு மாற்றமும் உங்கள் உலாவியில் இயங்கும் நான்கு-படி குழாய் ஆகும். JPEG மற்றும் PNG க்கு உலாவியின் சொந்த Canvas API நேரடியாக குறியாக்கத்தை கையாளுகிறது. Safari இல் WebP மற்றும் ஒவ்வொரு உலாவியிலும் AVIF க்கு பக்கம் தேவைக்கேற்ப இலகுவான WebAssembly கோடெக்கை ஏற்றுகிறது — இன்னும் அனைத்தும் உள்நாட்டிலேயே, உங்கள் படங்கள் சாதனத்தை விட்டு வெளியேறாது.
- ஒவ்வொரு பதிவேற்றப்பட்ட கோப்பையும் Blob ஆக வாசித்து, பைட்டுகளைச் சேவையகத்திற்கு நகலெடுக்காமல் அல்லது வட்டில் சேமிக்காமல், உலாவி அதை உள்ளூரிலேயே குறிநீக்கம் செய்யும் வகையில் ஒரு object URL ஐ உருவாக்குகிறது.
- குறிநீக்கம் செய்யப்பட்ட படத்தைத் திரைக்கு வெளியேயுள்ள ஒரு Canvas கூறில் வரைகிறது, மூல விகிதவியலைப் பாதுகாத்து எந்த அளவுமாற்ற வரம்பையும் பயன்படுத்துகிறது. நீங்கள் அதிகபட்ச அகலம் அல்லது அதிகபட்சப் பரிமாணத்தைத் தேர்ந்தெடுத்திருந்தால், கீழ்அளவாக்கம் இங்கேயே நடைபெறுகிறது.
- PNG, JPEG மற்றும் Chrome/Firefox WebP க்கான பிக்சல்களை மீண்டும் குறியாக்க
canvas.toBlob(callback, targetMimeType, quality)ஐ அழைக்கவும். Safari WebP மற்றும் AVIF குறியாக்கத்திற்கு, முதல் பயன்பாட்டில் WebAssembly கோடெக் வொர்க்கர் ஏற்றப்பட்டு பின்னணி நூலில் குறியாக்கத்தை கையாளுகிறது. PNG வெளியீடு எப்போதும் இழப்பற்றது; JPEG, WebP மற்றும் AVIF தர ஸ்லைடரைப் பின்பற்றுகின்றன, இது நேரடியாக குறியாக்கியின் அளவீட்டு அமைப்பிற்கு மேப் செய்யப்படுகிறது. - வெளியீட்டுப் பரிமாணங்கள் மற்றும் கோப்பு அளவுடன் முன்/பின் சிறுபடத்தைக் (thumbnail) காட்டுகிறது, பின்னர் ஒவ்வொரு படத்திற்கும் ஒரு பதிவிறக்கப் பொத்தான் அல்லது முழுத் தொகுப்பிற்கும் ஒரே ZIP ஐ வழங்குகிறது. ZIP ஆனது தாவலில் முற்றிலும் இயங்கும் 8 KB நிரல்தொகுப்பான fflate ஐப் பயன்படுத்தி நினைவகத்திலேயே உருவாக்கப்படுகிறது.
படம் வடிவங்களை ஏன் மாற்ற வேண்டும்?
- PNG-இலிருந்து WebP-க்கு மாறுவதால் 0.8 தரத்தில் எந்தத் தெரியக்கூடிய தர-இழப்பும் இன்றி வழக்கமான கோப்பு அளவுகள் 25 முதல் 35% வரை குறைகின்றன, இது நேரடியாகப் பக்க எடையைக் குறைத்து Core Web Vitals LCP மதிப்பெண்களை மேம்படுத்துகிறது. எட்டு முதன்மைப் படங்களைக் கொண்ட ஒரு வழக்கமான தயாரிப்பு-விவரப் பக்கத்தில், இது 4 MB முதல்-வரைதலுக்கும் 2.6 MB வரைதலுக்கும் இடையிலான வேறுபாடு.
- PNG ஒளிபுகுதன்மையைப் பாதுகாக்கிறது, JPEG அதைக் கைவிடுகிறது. PNG-இலிருந்து JPEG-க்குச் செல்லும்போது ஒளிபுகும் பிக்செல்கள் வெள்ளைப் பின்னணியில் வரையப்படுகின்றன — இலக்கு (ஒரு மின்னஞ்சல் கிளையன்ட், பழைய CMS, அச்சு வார்ப்புரு) PNG ஐ முதலிலேயே ஏற்க முடியாதபோது இதுவே சரியாக நீங்கள் விரும்புவது.
- சமூகத் தளங்கள் மற்றும் விளம்பர வலையமைப்புகள் கடுமையான வடிவத் தேவைகளைக் கொண்டுள்ளன. Facebook மற்றும் LinkedIn புகைப்படப் பதிவேற்றங்களுக்கு JPEG ஐ விரும்புகின்றன, Twitter இன் OG முன்னோட்டத் தொடரோடை WebP ஐ ஏற்கிறது, மேலும் சில programmatic விளம்பரச் சேவையகங்கள் JPEG அல்லாத எதையும் நிராகரிக்கின்றன. பதிவேற்றத்திற்கு முன் ஒரு விரைவான மாற்றச் சுற்று நிராகரிக்கப்பட்ட விளம்பரங்களின் மீண்டும்-மீண்டும் வரும் தொல்லையைத் தவிர்க்கிறது.
- ஒரு CMS அல்லது DAM-க்குப் பதிவேற்றுவதற்கு முன் கலப்பு-வடிவப் படங்களின் (PNG திரைப்பிடிப்புகள், JPEG புகைப்படங்கள், வடிவமைப்பாளரிடமிருந்து வரும் WebP ஏற்றுமதிகள்) தொகுப்பை ஒரே வெளியீட்டு வடிவத்திற்குத் தரப்படுத்துவதால் ingest தொடரோடையிலிருந்து வடிவம்-கையாளும் கிளைகள் நீக்கப்படுகின்றன. ஒரு வடிவம் உள்ளே, ஒரு வடிவம் வெளியே — பின்னோட்டத்தில் மிகக் குறைவான நிபந்தனைக் குறியீட்டுப் பாதைகள்.
பொதுவான பயன்பாடுகள்
மூல வடிவமும் இலக்கின் எதிர்பார்ப்புகளும் பொருந்தாதபோதே வடிவ மாற்றம் தேவைப்படுகிறது. நாங்கள் மீண்டும் மீண்டும் காணும் மூன்று வடிவங்கள்.
- Shopify அல்லது WooCommerce கடைக்குத் தயாரிப்புப் புகைப்படங்களைத் தயார் செய்தல். JPEG மூலப் படங்கள் பொதுக் கடைமுகப்பிற்கு 0.85 தரத்தில் WebP-க்கு மாற்றப்படுகின்றன, அதே நேரத்தில் அச்சு-தயார் ஏற்றுமதிகளுக்கும் இன்னும் WebP ஐ நிராகரிக்கும் சந்தைப்பட்டியல்களுக்கும் PNG நகல்கள் தனியே வைக்கப்படுகின்றன.
- React அல்லது Next.js கட்டமைப்பிற்குள் நுழைவதற்கு முன் வடிவமைப்பாளர் வழங்கிய PNG ஏற்றுமதிகளை JPEG அல்லது WebP-க்கு மாற்றுதல். கட்டமைப்பின் படத் தொடரோடை சிறிய மூலத்தை எடுத்து, தயாரிப்புத் தொகுப்பு ஒவ்வொரு பாதைக்கும் குறைவான பைட்டுகளை அனுப்புகிறது.
- ஒரு QA இயக்கத்திலிருந்து வரும் திரைப்பிடிப்புகளின் கோப்புறையைத் தொகுப்பாகச் செயலாக்குதல். 0.9 தரத்தில் PNG-இலிருந்து JPEG-க்கு மாற்றுவது வழக்கமாக 50-திரைப்பிடிப்புக் காப்பகத்தை, அது வழுப் பதிவேட்டுச் சீட்டுடன் இணைக்கப்படுவதற்கு முன், சுமார் 120 MB-இலிருந்து 20 MB-க்கும் குறைவாகச் சுருக்குகிறது.
ஒரு செயல்முறை எடுத்துக்காட்டு: 2 MB PNG-இலிருந்து 300 KB WebP-க்கு
2400×1600 பிக்செல்களில் ஒரு 2 MB PNG hero படம் சந்தைப்படுத்தல் இறங்குதளப் பக்கங்களில் ஒரு பொதுவான சுமை. மாற்றம் ஒரு நிஜப் பக்கத்தில் என்ன சேமிக்கிறது என்பதற்கு இது ஒரு நியாயமான அளவுகோல்.
PNG ஐப் பதிவேற்ற மண்டலத்தில் இடுங்கள், இலக்கு வடிவமாக WebP ஐத் தேர்ந்தெடுங்கள், தரத்தை 0.8 ஆக அமைக்கவும், மேலும் பிக்செல் பரிமாணங்களைப் பாதியாக்க அதிகபட்ச அகலத்தை 1200 ஆக அமைக்கவும். Canvas தொடரோடை விகிதவியலைப் பாதுகாத்துப் படத்தை 1200×800-ல் வரைந்து, பின்னர் WebP-க்கு மறு-குறியாக்கம் செய்கிறது. வெளியீட்டு அட்டை முடிவைக் காட்டுகிறது, வழக்கமாக 280 முதல் 320 KB வரம்பில், இது அசலுடன் ஒப்பிடும்போது சுமார் 85% குறைப்பு. ஒற்றைக் கோப்பைப் பெற அட்டையில் பதிவிறக்கு கிளிக் செய்யுங்கள், அல்லது ஒரே சுற்றில் பல படங்களை மாற்றியிருந்தால் பலகத்தின் கீழே உள்ள .zip பதிவிறக்கு ஐக் கிளிக் செய்யுங்கள். இடுவதிலிருந்து பதிவிறக்கம் வரையிலான முழுச் சுற்றும் இந்த அளவிலான ஒரு படத்திற்குச் சில நூறு மில்லிவினாடிகளில் இயங்குகிறது, மேலும் பக்கம் ஏற்றப்பட்ட பிறகு பூஜ்ஜியக் கடத்தலகலத்தை நுகர்கிறது.
எந்த வடிவங்கள் ஆதரிக்கப்படுகின்றன?
உள்ளீட்டுப் பக்கத்தில், உலாவியால் குறிவிலக்கம் செய்யக்கூடிய எந்த வடிவமும் ஏற்கப்படுகிறது: PNG, JPEG, WebP, GIF மற்றும் BMP ஒரு வடிவமைப்பாளர் அல்லது ஸ்கிரீன்ஷாட் கருவி உருவாக்கும் கிட்டத்தட்ட ஒவ்வொரு கோப்பையும் உள்ளடக்கியது. வெளியீட்டு வடிவங்கள் PNG (எப்போதும் இழப்பற்றது), JPEG, WebP மற்றும் AVIF ஆகும். AVIF வெளியீடு ஒவ்வொரு உலாவியிலும் தேவைக்கேற்ப ஏற்றப்படும் WebAssembly குறியாக்கி மூலம் ஆதரிக்கப்படுகிறது — பூர்வீக Canvas குறியாக்கி தேவையில்லை.
இது என் சாதனத்தில் நடைபெறுகிறதா?
ஆம், முற்றிலும். ஒவ்வொரு படத்தையும் நினைவகத்தில் குறிநீக்கம் செய்து மறு-குறியாக்கம் செய்ய இந்தப் பக்கம் உலாவியின் சொந்த Canvas API மற்றும் Web File API ஐப் பயன்படுத்துகிறது. எந்தப் படத் தரவும் சேவையகத்திற்கு அனுப்பப்படுவதில்லை, தற்காலிகப் பதிவேற்றம் இல்லை, கிளவுட் சுற்று இல்லை. நீங்களே சரிபார்க்கலாம்: DevTools ஐத் திறந்து, Network பலகத்திற்கு மாறி, ஒரு மாற்றத்தை இயக்குங்கள். நீங்கள் காணும் ஒரே வெளிச்செல்லும் கோரிக்கைகள் தொடக்கப் பக்க ஏற்றம் மற்றும் விளம்பர அழைப்புகள் மட்டுமே. படம் போன்ற எதுவும் தாவலை விட்டு வெளியே செல்வதில்லை.
PNG மற்றும் JPEG இடையிலான தரப் பரிமாற்றம் என்ன?
PNG ஒரு இழப்பற்ற வடிவம். ஒவ்வொரு பிக்செலும் குறியாக்கச் சுழற்சியைச் சரியாகத் தாண்டி நிலைத்திருக்கிறது, இது திரைப்பிடிப்புகள், UI பதிவுகள் மற்றும் கூர்மையான விளிம்புகள் அல்லது பெரிய தட்டையான-நிறப் பகுதிகளைக் கொண்ட எந்தப் படத்திற்கும் PNG ஐச் சரியான தேர்வாக்குகிறது. JPEG ஆனது DCT அமுக்கத்தைப் பயன்படுத்தி, கண் அரிதாகவே கவனிக்கும் நுண் விவரங்களைக் கைவிடுகிறது, இது புகைப்படங்களுக்குச் சரியான தேர்வாக்குகிறது. தரம் 0.8 என்பது ஒரு பொதுவான உகந்த புள்ளி ஆகும், இங்கே அசலிலிருந்து வரும் காட்சி வேறுபாட்டைக் கண்டுபிடிப்பது கடினம் ஆனால் கோப்பு PNG சமமானதைவிட 4 முதல் 6 மடங்கு சிறியதாக அமைகிறது. WebP இழப்பற்ற மற்றும் இழப்புள்ள இரு முறைகளிலும் செயல்பட முடியும்; இங்குள்ள தர சீரி இழப்புள்ள எழுத்தாக்கியை இயக்குகிறது, மேலும் 0.85 தரத்தில் WebP இயற்கைப்-புகைப்பட உள்ளடக்கத்தில் JPEG ஐ வழக்கமாக 25 முதல் 30% வரை மிஞ்சுகிறது.
AVIF வெளியீடு எவ்வாறு செயல்படுகிறது?
AVIF குறியாக்கமானது நீங்கள் முதலில் AVIF வடிவத்தைத் தேர்ந்தெடுக்கும் போது தேவைக்கேற்ப ஏற்றப்படும் WebAssembly கோடெக்கைப் பயன்படுத்துகிறது — செருகுநிரல் இல்லை, உலாவி கொடி இல்லை, எதிர்கால Chrome வெளியீட்டிற்காக காத்திருக்க வேண்டியதில்லை. WASM பைனரி எங்கள் சொந்த மூலத்திலிருந்து வழங்கப்படுகிறது, உங்கள் படத்தை முழுவதுமாக பின்னணி நூலில் குறியாக்கம் செய்து பதிவிறக்கத்திற்குத் தயாரான நிலையான image/avif ப்ளாப்பை வழங்குகிறது. ஒரே நெட்வொர்க் கோரிக்கை கோடெக்கின் ஒரு முறை பெறுதல் ஆகும்; எந்த படத் தரவும் உங்கள் சாதனத்தை விட்டு வெளியேறாது. ஏற்றப்பட்டதும், குறியாக்கி அமர்வுக்காக இடைநிலை நினைவகத்தில் இருக்கும், எனவே அடுத்தடுத்த மாற்றங்கள் வேகமாக இருக்கும். AVIF கோப்புகள் பொதுவாக சமமான தரத்தில் WebP ஐ விட 20-30% சிறியதாகவும் JPEG ஐ விட 50% சிறியதாகவும் இருக்கும், இது செயல்திறன்-உணர்திறன் கொண்ட தளங்களுக்கு சிறந்த தேர்வாக அமைகிறது.
உங்கள் படங்களை இடுங்கள், ஒரு வடிவத்தைத் தேர்ந்தெடுங்கள், மாற்றுங்கள். அனைத்தும் உங்கள் தாவலில் இயங்குகிறது — பதிவேற்றம் இல்லை, கணக்கு இல்லை, சேவையக வரிசைக் காத்திருப்பு இல்லை.