படங்களைச் சுருக்குங்கள் _

Browser-அடிப்படை படச் சுருக்கம் எவ்வாறு வேலை செய்கிறது

ஒவ்வொரு அமுக்கப் பாஸும் உங்கள் உலாவியில் இயங்குகிறது. JPEG மற்றும் PNG க்கு உலாவியின் சொந்த Canvas API நேரடியாக குறியாக்கத்தைக் கையாளுகிறது. Safari இல் WebP மற்றும் ஒவ்வொரு உலாவியிலும் AVIF க்கு, பக்கம் தேவைக்கேற்ப இலகுவான WebAssembly கோடெக்கை ஏற்றுகிறது — இன்னும் முழுவதும் உள்ளூரில், உங்கள் படங்கள் சாதனத்தை விட்டு வெளியேறுவதில்லை.

1. ஒவ்வொரு uploaded கோப்பையும் Blob ஆக படித்து உலாவி அதை locally decode செய்ய ஒரு object URL உருவாக்குங்கள் — bytes-ஐ server-க்கு copy செய்யாமல் அல்லது disk-ல் எழுதாமல்.
2. Decoded படத்தை அதன் அசல் pixel dimensions-ல் ஒரு offscreen Canvas element-ல் வரையுங்கள், மீண்டும் encode செய்ய தயாராக.
3. JPEG, PNG மற்றும் Chrome/Firefox WebP க்கான பிக்சல்களை மீண்டும் குறியாக்க canvas.toBlob(callback, mimeType, quality) ஐ அழைக்கவும். Safari WebP மற்றும் AVIF குறியாக்கத்திற்கு, WebAssembly கோடெக் வொர்க்கர் முதல் பயன்பாட்டில் ஏற்றப்பட்டு பின்னணி நூலில் குறியாக்கத்தைக் கையாளுகிறது. தர முறையில் ஸ்லைடர் மதிப்பு நேரடியாக என்கோடரின் குவாண்டைசேஷன் அமைப்பிற்கு மேப் செய்யப்படுகிறது; இலக்கு-அளவு முறையில் பக்கம் தர மதிப்பை இருசமனாகப் பிரிக்கும், வெளியீடு ப்ளாப் உங்கள் பைட் பட்ஜெட்டின் கீழ் பொருந்தும் வரை.
4. அசல் அளவு, சுருக்கப்பட்ட அளவு மற்றும் சேமிப்பு சதவீதத்துடன் before/after readout காட்டுங்கள், பின்னர் per-image download அல்லது முழு batch-க்கு ஒரு single ZIP வழங்குங்கள். ZIP-ஐ முதல் use-ல் load ஆகும் 8 KB library ஆகிய fflate பயன்படுத்தி memory-ல் build செய்கிறது.

படங்களை ஏன் சுருக்க வேண்டும்?

• சிறிய படங்கள் வேகமாக load ஆகின்றன. ஒரு 4 MB hero image-ஐ 600 KB-க்கு குறைப்பது Largest Contentful Paint-ஐ நேரடியாக மேம்படுத்துகிறது, இது Google ranking-க்கு பயன்படுத்தும் Core Web Vitals-ல் ஒன்று. பல photos உள்ள ஒரு page-ல் சேமிப்பு ஒரு வேகமான first paint-ஆக கூட்டிப் பெருகுகிறது.
• பிறகு upload வரம்புகள் உள்ளன. பல CMS platforms, ticketing tools மற்றும் email systems 1 அல்லது 2 MB-க்கு மேல் எதையும் reject செய்கின்றன, மற்றும் ஒரு quick சுருக்க pass நீங்கள் ஒரு முழு editor-ஐ திறக்காமல் photo-ஐ வரம்புக்குள் கொண்டு வருகிறது.
• Bandwidth மற்றும் storage scale-ல் பணம் செலவாகின்றன. Full-size PNG-க்கு பதிலாக quality 0.8-ல் WebP ship செய்வது image payload-ஐ மூன்றில் ஒரு பங்கு அல்லது அதற்கு மேல் குறைக்கலாம், இது CDN egress bills-ஐயும் உங்கள் பார்வையாளர்களின் mobile data பயன்பாட்டையும் குறைக்கிறது.
• சில படங்கள் அறவே upload செய்யக்கூடாது. இங்கே எல்லாம் உங்கள் உலாவியில் இயங்குவதால், ID scans, medical images மற்றும் internal screenshots உங்கள் சாதனத்திலேயே இருக்கும். கவலைப்பட loop-ல் TinyPNG போன்ற ஒரு third-party server இல்லை.

பொதுவான பயன்பாடுகள்

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

• ஒரு online store-க்கு product photos தயார் செய்தல். JPEG originals quality 0.8-க்கு (அல்லது ஒரு 200 KB இலக்கு) சுருக்கப்படுகின்றன, இதனால் storefront வேகமாக இருந்து mobile-ல் Core Web Vitals-ஐ clear செய்கிறது.
• ஒரு bug tracker அல்லது wiki-ல் attach செய்வதற்கு முன்பு screenshots-ஐ சுருக்குதல். quality 0.85-ல் JPEG-க்கு மாற்றப்பட்ட PNG captures-ன் ஒரு batch பெரும்பாலும் பல்லாயிரக்கணக்கான megabytes-லிருந்து சில MB-க்கு வீழ்கிறது.
• ஒரு photo-ஐ upload வரம்புக்குள் கொண்டு வருதல் — 1 MB-க்கு மேல் files-ஐ reject செய்யும் ஒரு job application portal, ஒரு இறுக்கமான attachment வரம்பு கொண்ட email system, அல்லது ஒரு byte budget-க்கு பொருந்த வேண்டிய ஒரு forum avatar.

ஒரு worked example: 4 MB JPEG-லிருந்து 400 KB-க்கு

ஒரு phone camera-லிருந்து நேராக வரும் ஒரு 4 MB JPEG upload வரம்புகளை தடுக்கி pages-ஐ மெதுவாக்கும் ஒரு பொதுவான payload. சுருக்கம் என்ன சேமிக்கிறது என்பதற்கு இது ஒரு நியாயமான benchmark.

JPEG-ஐ upload zone-ல் drop செய்யுங்கள், வடிவத்தை JPEG-லேயே விட்டுவிடுங்கள், மற்றும் quality slider-ஐ 0.7-க்கு இழுக்கவும் அல்லது target-size mode-க்கு மாறி 400 KB type செய்யுங்கள். Quality mode-ல் Canvas pipeline ஒருமுறை மீண்டும் encode செய்து முடிவைக் காட்டுகிறது, photo-வைப் பொறுத்து பொதுவாக 500 முதல் 700 KB சுற்றி. Target-size mode-ல் page சில quality மதிப்புகளை முயற்சித்து, இன்னும் 400 KB-க்குள் பொருந்தும் மிக உயர்ந்த மதிப்பில் நிலைபெற்று, சேமிப்பு சதவீதத்தை report செய்கிறது. Single file-ஐ எடுக்க card-ல் பதிவிறக்கு கிளிக் செய்யுங்கள், அல்லது நீங்கள் ஒரே நேரத்தில் பல படங்களை சுருக்கினால் .zip பதிவிறக்கு கிளிக் செய்யுங்கள். இந்த அளவிலான ஒரு படத்திற்கு முழு round-trip ஒரு second-க்கு நன்கு கீழே இயங்குகிறது மற்றும் page-ஏ load ஆன பிறகு பூஜ்ஜிய bandwidth consume செய்கிறது.

Quality mode-க்கும் target-size mode-க்கும் இடையே என்ன வித்தியாசம்?

Quality mode உங்களுக்கு 0.1 முதல் 1.0 வரை ஒரு slider தருகிறது, இது JPEG அல்லது WebP encoder-ன் quantization setting-க்கு map ஆகுகிறது — குறைந்த எண்கள் என்றால் சிறிய files மற்றும் அதிக கண்ணுக்குத் தெரியும் artifacts. Target-size mode பிரச்சினையை திருப்பிப் போடுகிறது: நீங்கள் kilobytes-ல் ஒரு அளவைப் பெயரிடுகிறீர்கள், page quality மதிப்பை bisect செய்து, உங்கள் budget-க்குள் இன்னும் பொருந்தும் மிக உயர்ந்த quality-ஐ கண்டுபிடிக்கும் வரை சில முறை encode செய்கிறது. ஒரு கடினமான வரம்பு முக்கியமாக இருக்கும்போது (ஒரு 1 MB upload வரம்பு, சொல்லுங்கள்) target-size வசதியானது; உங்களுக்கு ஒரு கணிக்கக்கூடிய visual முடிவு வேண்டுமானால் quality mode வேகமானது மற்றும் சிறந்தது. PNG lossless, எனவே எந்த mode-உம் அதற்கு பொருந்தாது.

இது என் சாதனத்தில் நடைபெறுகிறதா?

ஆம், முழுவதுமாக. Page ஒவ்வொரு படத்தையும் memory-ல் decode மற்றும் மீண்டும் encode செய்ய உலாவியின் native Canvas API மற்றும் Web File API பயன்படுத்துகிறது. எந்த image data-வும் server-க்கு அனுப்பப்படவில்லை, temporary upload இல்லை, cloud round-trip இல்லை. நீங்களே verify செய்யலாம்: DevTools திறந்து, Network panel-க்கு மாறி, ஒரு சுருக்கம் இயக்கவும். நீங்கள் பார்க்கும் ஒரே outbound requests முதல் page load மற்றும் ad calls. படம் போன்ற எதுவும் tab-ஐ விட்டு வெளியேறுவதில்லை.

ஒரு PNG-ஐ சுருக்குவது சில நேரம் ஏன் கிட்டத்தட்ட சுருக்காது?

PNG ஒரு lossless format, எனவே Canvas API அதை சிறியதாக்க detail-ஐ தூக்கி எறிய முடியாது — அதே pixels-ஐ மட்டுமே மீண்டும் pack செய்ய முடியும். Photographs-க்கு, ஒரு PNG ஏற்கனவே பெரியது மற்றும் lossless மீள்-encode மிகக் குறைவாகவே சேமிக்கிறது. உண்மையான வெற்றி output வடிவத்தை JPEG அல்லது WebP-க்கு மாற்றுவதிலிருந்து வருகிறது, இவை photos-க்கு பொருத்தமான lossy compression பயன்படுத்தி வழக்கமாக 4 முதல் 10 மடங்கு சிறியதாக வருகின்றன. உங்களுக்கு lossless quality அல்லது transparency தேவைப்படும் போது மட்டுமே PNG-ஐ வைத்திருங்கள்; இல்லையெனில் photos-க்கு JPEG அல்லது சிறந்த size-to-quality சமநிலைக்கு WebP தேர்ந்தெடுங்கள்.

நான் எந்த வடிவத்தைத் தேர்ந்தெடுக்க வேண்டும்?

Photographs-க்கு, quality 0.8-ல் WebP சிறந்த size-to-quality சமநிலையைத் தருகிறது மற்றும் 2021-லிருந்து ship ஆன ஒவ்வொரு உலாவியும் ஆதரிக்கிறது; ஒரு destination பழையதாகவோ அல்லது கடுமையாகவோ இருக்கும்போது JPEG பாதுகாப்பான universal fallback. உங்களுக்கு lossless quality அல்லது ஒரு alpha channel தேவைப்படும்போது மட்டுமே PNG தேர்ந்தெடுங்கள் — line art, UI screenshots, transparency கொண்ட logos. நீங்கள் page speed-க்காக optimize செய்து உங்கள் audience modern browsers பயன்படுத்தினால், WebP கிட்டத்தட்ட எப்போதும் சரியான தேர்வு; நீங்கள் ஒரு பழைய CMS அல்லது WebP-ஐ reject செய்யும் ஒரு print pipeline-க்கு feed செய்தால், JPEG-உடன் இருங்கள்.

உங்கள் படங்களை drop செய்யுங்கள், ஒரு தர நிலை அல்லது ஒரு இலக்கு அளவைத் தேர்ந்தெடுங்கள், சுருக்குங்கள். எல்லாம் உங்கள் tab-ல் இயங்குகிறது. upload இல்லை, கணக்கு இல்லை, server queue-ல் காத்திருப்பு இல்லை.