படங்களின் அளவை மாற்றவும் _

உலாவி-அடிப்படையிலான படம் அளவுமாற்றம் எவ்வாறு செயல்படுகிறது

ஒவ்வொரு அளவுமாற்றமும் முற்றிலும் JavaScript-ல் இயங்கும் ஒரு சிறிய தொடரோடை ஆகும். எந்தக் கோடெக் நிரல்தொகுப்பும் பதிவிறக்கப்படுவதில்லை, எந்தச் சேவையகமும் ஈடுபடுவதில்லை. உலாவியின் சொந்த Canvas API கோப்பை குறிநீக்கம் செய்து, இலக்கு அளவில் மீண்டும் தயாரித்து, நினைவகத்தில் மறு-குறியாக்கம் செய்கிறது, பின்னர் ஒரு Blob ஐத் தருகிறது — பக்கம் முன்னோட்டம் காட்டவோ அல்லது zip செய்யவோ பயன்படுகிறது. ஒவ்வொரு படியும் தாவலின் தனிமைப்படுத்தப்பட்ட சூழலுக்குள்ளேயே நிகழ்வதால், மூல கோப்புகள் வலையமைப்பை ஒருபோதும் அடைவதில்லை.

1. ஒவ்வொரு பதிவேற்றப்பட்ட கோப்பையும் Blob ஆக வாசித்து, பைட்டுகளைச் சேவையகத்திற்கு நகலெடுக்காமல் உலாவி உள்ளூரிலேயே குறிநீக்கம் செய்யும் வகையில் ஒரு object URL ஐ உருவாக்குகிறது.
2. உங்கள் தேர்ந்தெடுத்த முறையிலிருந்து இலக்குப் பரிமாணங்களை நிர்ணயிக்கிறது — நீண்ட பக்க வரம்பு, சரியான அகலம் மற்றும் உயரம், அல்லது சதவீத அளவிடல். விகிதவியல் பூட்டு ஒரு புலம் மாற்றப்படும்போது அனுபாதத்தை சரியாக வைத்திருக்கிறது.
3. இலக்கு அளவில் ஒரு திரைக்கு வெளியேயுள்ள Canvas ஐ உருவாக்கி, குறிநீக்கம் செய்யப்பட்ட பிக்செல்களை மீண்டும் தயாரிக்க ctx.drawImage(source, 0, 0, width, height) ஐ அழைக்கிறது. உலாவி interpolation ஐக் கையாண்டு அளவிடல் முடிவை மென்மையாக்குகிறது.
4. மூல வடிவத்தில் மறு-குறியாக்கம் செய்ய canvas.toBlob ஐ அழைக்கிறது. PNG இழப்பற்றதாக இருக்கும், JPEG மற்றும் WebP உயர் தரத்தில் மறு-குறியாக்கம் செய்யப்படும். பிறகு பக்கம் முன்/பின் அட்டையைக் காட்டி, ஒவ்வொரு படத்திற்கும் பதிவிறக்கம் அல்லது fflate மூலம் நினைவகத்தில் உருவாக்கப்பட்ட ஒரு ZIP வழங்குகிறது.

படங்களின் அளவை ஏன் மாற்ற வேண்டும்?

• அளவு மீறிய படங்கள் மெதுவான பக்கங்களின் மிகவும் பொதுவான காரணம். 600 பிக்செல் அகல தளவமைப்பில் நேரடியாக இடப்பட்ட 4000×3000 தொலைபேசி புகைப்படம் திரை காட்டக்கூடியதை விட சுமார் 40 மடங்கு அதிகமான பிக்செல்களை அனுப்புகிறது. பதிவேற்றுவதற்கு முன் நீண்ட பக்கத்தை 1600 px-க்குக் குறைப்பது பக்க எடையை வெகுவாகக் குறைத்து Core Web Vitals LCP ஐ மேம்படுத்துகிறது.
• பதிவேற்ற படிவங்கள் கடுமையான பரிமாணங்களை விதிக்கின்றன. அவதார் இடங்கள், ID-புகைப்பட போர்டல்கள், சந்தைப்பட்டியல்கள் மற்றும் OG சமூக அட்டைகள் அனைத்தும் குறிப்பிட்ட பிக்செல் அளவுகளை விரும்புகின்றன: Open Graph முன்னோட்டத்திற்கு 1200×630, ஆப்பிக்கு 512×512, சிறுபடத்திற்கு 150×150. சரியான எண்ணை அடைந்தால், நிராகரிக்கப்பட்ட-பதிவேற்ற சுழற்சியைத் தவிர்க்கலாம்.
• மின்னஞ்சல் மற்றும் அரட்டை கருவிகள் பெரிய எதையும் அமைதியாக மறு-அமுக்கும், இது ஒரு சுத்தமான திரைப்பிடிப்பை சேதப்படுத்தக்கூடும். நீங்களே ஒரு நியாயமான அகலத்தில் மாற்றினால் ஒருவரின் lossy தொடரோடையில் விட்டுவிடுவதைவிட முடிவு முன்கூட்டியே கணிக்கக்கூடியதாக இருக்கும்.
• கலைஞர்கள் மற்றும் அட்டவணைகளுக்கு தொகுப்பு சீரானது முக்கியம். கலந்த-அளவு புகைப்படங்களின் கோப்புறையை ஒரே 800×800 இலக்கில் இயக்குவது கட்டத்தில் ஒவ்வொரு அட்டையும் ஒரே வரிசையில் இருக்கும், எந்த திடீர் பெரிய படமும் தளவமைப்பை உடைக்காமல்.

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

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

• Shopify அல்லது WooCommerce கடைக்கு தயாரிப்பு புகைப்படங்களைத் தயார் செய்தல். 4000 பிக்செல் கேமரா அசல்களின் கோப்புறை 1600 px நீண்ட பக்கமாக மட்டுப்படுத்தப்படுகிறது, விகிதவியல் அப்படியே வைத்து எதுவும் நீட்டப்பட்டதாக தெரியாதவாறு.
• ஒரு முதன்மைக் கோப்பிலிருந்து சமூக மற்றும் ஆப் சொத்துக்களை உருவாக்குதல். Open Graph அட்டைக்கு சரியான 1200×630 அமைக்கவும், பிறகு ஆப் படத்திற்கு 512×512, எந்த கனமான திருத்திகளையும் திறக்காமல் சில கிளிக்குகளில் ஒவ்வொன்றையும் ஏற்றுமதி செய்யவும்.
• QA அல்லது ஆதரவு திரைப்பிடிப்புகளின் தொகுப்பை சீட்டில் இணைப்பதற்கு முன் சிறியதாக்குதல். 50-படப் கோப்புறையை 50%-க்குக் கீழே அளவிடுவது பொதுவாக வழுப் பதிவேட்டிற்கு அனுப்பும் முன் காப்பகத்தை சுமார் மூன்று நான்காக குறைக்கிறது.

ஒரு செயல்முறை எடுத்துக்காட்டு: 4000 px புகைப்படத்திலிருந்து 1600 px வலை படம்

தொலைபேசியிலிருந்து நேரடியாக வரும் 4000×3000 புகைப்படம் எந்த வலை தளவமைப்பின் தேவையையும் விட மிகவும் பெரியதான ஒரு பொதுவான சுமை. அளவுமாற்றம் என்ன சேமிக்கிறது என்பதற்கு இது ஒரு நியாயமான அளவுகோல்.

புகைப்படத்தை பதிவேற்ற மண்டலத்தில் இடுங்கள், முறையை நீண்ட பக்கத்தை வரம்பிடு-ல் விடுங்கள், மற்றும் மதிப்பை 1600 ஆக அமைக்கவும். Canvas தொடரோடை விகிதவியலைப் பாதுகாத்துப் படத்தை 1600×1200-ல் மீண்டும் தயாரித்து, பிறகு மூல வடிவத்தில் மறு-குறியாக்கம் செய்கிறது. வெளியீட்டு அட்டை புதிய பரிமாணங்கள் மற்றும் கோப்பு அளவைக் காட்டுகிறது, இது ஒரு வழக்கமான JPEG-க்கு பல மெகாபைட்டுகளிலிருந்து சில நூறு கிலோபைட்டுகளுக்கு வருகிறது. ஒற்றைக் கோப்பைப் பெற அட்டையில் பதிவிறக்கு கிளிக் செய்யுங்கள், அல்லது ஒரே சுற்றில் பல படங்களை மாற்றியிருந்தால் .zip பதிவிறக்கு ஐக் கிளிக் செய்யுங்கள். இந்த அளவிலான படத்திற்கு இடுவதிலிருந்து பதிவிறக்கம் வரையிலான முழுச் சுற்றும் ஒரு சில நூறு மில்லிவினாடிகளில் இயங்குகிறது மேலும் பக்கம் ஏற்றப்பட்ட பிறகு பூஜ்ஜிய கடத்தலகலம் நுகர்கிறது.

என்ன அளவுமாற்று முறைகள் உள்ளன?

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

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

ஆம், முற்றிலும். ஒவ்வொரு படத்தையும் நினைவகத்தில் குறிநீக்கம், மீண்டும் தயாரித்து மற்றும் மறு-குறியாக்கம் செய்ய இந்தப் பக்கம் உலாவியின் சொந்த Canvas API மற்றும் Web File API ஐப் பயன்படுத்துகிறது. எந்தப் படத் தரவும் சேவையகத்திற்கு அனுப்பப்படுவதில்லை, தற்காலிகப் பதிவேற்றம் இல்லை, கிளவுட் சுற்று இல்லை. நீங்களே சரிபார்க்கலாம்: DevTools ஐத் திறந்து, Network பலகத்திற்கு மாறி, ஒரு அளவுமாற்றத்தை இயக்குங்கள். நீங்கள் காணும் ஒரே வெளிச்செல்லும் கோரிக்கைகள் தொடக்கப் பக்க ஏற்றம் மற்றும் விளம்பர அழைப்புகள் மட்டுமே. ஸ்கேன் செய்யப்பட்ட ID, மருத்துவ படங்கள் மற்றும் நீங்கள் பதிவேற்ற விரும்பாத பிற பொருட்களுக்கு இது பாதுகாப்பானது.

அளவுமாற்றம் தரத்தைக் குறைக்குமா?

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

எந்த கோப்பு வடிவங்கள் ஆதரிக்கப்படுகின்றன?

உள்ளீட்டுப் பக்கத்தில், உலாவி குறிநீக்கம் செய்யக்கூடிய எந்த வடிவமும் ஏற்கப்படுகிறது: PNG, JPEG, WebP, GIF மற்றும் BMP ஆகியவை கிட்டத்தட்ட ஒவ்வொரு தொலைபேசி, கேமரா அல்லது திரைப்பிடிப்புக் கருவி உருவாக்கும் கோப்பை உள்ளடக்குகின்றன. Canvas எழுத்தாக்கி ஆதரிக்கும் இடத்தில் வெளியீடு மூல வடிவத்தை பாதுகாக்கிறது — PNG, JPEG மற்றும் WebP நேரடியாக வட்டத்தில் செல்கின்றன. Canvas API குறிநீக்கம் செய்யக்கூடிய ஆனால் மறு-குறியாக்கம் செய்ய முடியாத GIF மற்றும் BMP இழப்பற்ற PNG ஆக சேமிக்கப்படும். மாற்றிய கோப்பு பெயரில் புதிய பரிமாணங்கள் இருக்கும் (உதாரணமாக photo-1600x1200.jpg) தொகுப்பை எளிதாக வரிசைப்படுத்த.

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