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

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

ஒவ்வொரு சுருக்க pass-ம் முழுவதுமாக JavaScript-ல் இயங்குகிறது. எந்த codec library-யும் download ஆவதில்லை, எந்த server-உம் involve ஆவதில்லை. உலாவியின் சொந்த Canvas API படத்தை decode செய்து, குறைந்த தரத்தில் மீண்டும் encode செய்து, page preview செய்யக்கூடிய, download செய்யக்கூடிய, அல்லது zip செய்யக்கூடிய ஒரு Blob-ஐ உங்களுக்குத் தருகிறது. ஒவ்வொரு படியும் tab-ன் sandbox-க்குள் இருப்பதால், அசல் files network-ஐ ஒருபோதும் அடைவதில்லை.

1. ஒவ்வொரு uploaded கோப்பையும் Blob ஆக படித்து உலாவி அதை locally decode செய்ய ஒரு object URL உருவாக்குங்கள் — bytes-ஐ server-க்கு copy செய்யாமல் அல்லது disk-ல் எழுதாமல்.
2. Decoded படத்தை அதன் அசல் pixel dimensions-ல் ஒரு offscreen Canvas element-ல் வரையுங்கள், மீண்டும் encode செய்ய தயாராக.
3. Pixels-ஐ மீண்டும் encode செய்ய canvas.toBlob(callback, mimeType, quality) அழைக்கவும். Quality mode-ல் slider மதிப்பு நேரடியாக encoder-ன் quantization setting-க்கு map ஆகுகிறது; target-size mode-ல் output blob உங்கள் byte budget-க்குள் பொருந்தும் வரை page quality மதிப்பை bisect செய்கிறது.
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-ல் காத்திருப்பு இல்லை.