§

படத்தை இடுங்கள் அல்லது தேர்ந்தெடுக்கக் கிளிக் செய்யுங்கள்

PNG, JPEG, WebP, GIF, BMP — ஒரு கோப்பிற்கு 30 MB வரை. தொகுப்பு ஆதரிக்கப்படுகிறது.

தொகுப்பாக மாற்ற பல படங்களை இடுங்கள் — அனைத்து மாற்றங்களும் உங்கள் சாதனத்தில் நடைபெறுகின்றன.

இலக்கு வடிவம்
JPEG மற்றும் WebP மட்டும் — PNG இழப்பற்றது

தமிழகத்தின் வலைக் குழுக்கள் இந்தச் சுழற்சியை நாள்தோறும் சந்திக்கின்றன. ஒரு வடிவமைப்பாளர் Figma ஏற்றுமதியை PNG ஆகத் தருகிறார், தளத்திற்கு Core Web Vitals-க்காக WebP தேவை, ஆனால் கட்டமைப்புத் தொடரோடை இன்னும் தயாராகவில்லை. கோப்புகளை இங்கே இடுங்கள், 0.8 தரத்தில் WebP ஐத் தேர்ந்தெடுங்கள், மாற்று என்பதை அழுத்துங்கள், ZIP ஐப் பதிவிறக்குங்கள். முழு வேலையும் சுமார் பத்து வினாடிகளில் முடிகிறது, மூல கோப்புகள் உங்கள் கணினியிலேயே இருக்கும். எதிர்த்திசையும் அதே வேகம்: வாடிக்கையாளர் ஒளிபுகுதன்மையை வலியுறுத்தும்போது JPEG-இலிருந்து-PNG, அல்லது CMS-க்கு ஏற்றுவதற்கு முன் 12 MB தயாரிப்பு-புகைப்படத் தொகுப்பை சுமார் 900 KB ஆகச் சுருக்க PNG-இலிருந்து-JPEG. CERT-In இன் இணைய பாதுகாப்பு வழிகாட்டுதல்களின் கீழ் இயங்கும் இந்திய நிறுவனங்கள் இதே காரணத்திற்காகவே உலாவியிலேயே இயங்கும் கருவிகளை விரும்புகின்றன: மூலப் படங்கள் வளாகத்திற்கு வெளியேயுள்ள சேவைக்குச் சட்டப்படி அனுப்ப முடியாது, மேலும் இந்தப் பக்கம் ஏற்றப்பட்ட பிறகு எந்த வலையமைப்பு அழைப்பும் இன்றி, முற்றிலும் JavaScript-ல் இயங்குகிறது.

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

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

  1. ஒவ்வொரு பதிவேற்றப்பட்ட கோப்பையும் Blob ஆக வாசித்து, பைட்டுகளைச் சேவையகத்திற்கு நகலெடுக்காமல் அல்லது வட்டில் சேமிக்காமல், உலாவி அதை உள்ளூரிலேயே குறிநீக்கம் செய்யும் வகையில் ஒரு object URL ஐ உருவாக்குகிறது.
  2. குறிநீக்கம் செய்யப்பட்ட படத்தைத் திரைக்கு வெளியேயுள்ள ஒரு Canvas கூறில் வரைகிறது, மூல விகிதவியலைப் பாதுகாத்து எந்த அளவுமாற்ற வரம்பையும் பயன்படுத்துகிறது. நீங்கள் அதிகபட்ச அகலம் அல்லது அதிகபட்சப் பரிமாணத்தைத் தேர்ந்தெடுத்திருந்தால், கீழ்அளவாக்கம் இங்கேயே நடைபெறுகிறது.
  3. பிக்செல்களை மறு-குறியாக்கம் செய்ய canvas.toBlob(callback, targetMimeType, quality) ஐ அழைக்கிறது. PNG வெளியீடு எப்போதும் இழப்பற்றது; JPEG மற்றும் WebP தர சீரியைப் பின்பற்றுகின்றன, இது நேரடியாக எழுத்தாக்கியின் quantization அமைப்பிற்கு வரைபடமாகிறது.
  4. வெளியீட்டுப் பரிமாணங்கள் மற்றும் கோப்பு அளவுடன் முன்/பின் சிறுபடத்தைக் (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. Canvas API இன் AVIF எழுத்தாக்கி Chrome 105 மற்றும் அதற்குப் பிந்தைய பதிப்புகளில் மட்டுமே உள்ளது, Safari மற்றும் Firefox-ல் இல்லை என்பதால் AVIF வெளியீடு இன்னும் ஆதரிக்கப்படவில்லை. இந்த அம்சம் ஒவ்வொரு நவீன உலாவியிலும் செயல்பட WebAssembly-அடிப்படையிலான AVIF பாதை v1.1-க்காகத் திட்டமிடப்பட்டுள்ளது.

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

ஆம், முற்றிலும். ஒவ்வொரு படத்தையும் நினைவகத்தில் குறிநீக்கம் செய்து மறு-குறியாக்கம் செய்ய இந்தப் பக்கம் உலாவியின் சொந்த 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 ஆதரவு எப்போது வரும்?

canvas.toBlob(…, 'image/avif') மூலம் AVIF குறியாக்கம் இன்று Chrome 105 மற்றும் அதற்குப் பிந்தைய பதிப்புகளில் மட்டுமே செயல்படுகிறது; Safari மற்றும் Firefox அதை இயல்பாக ஆதரிப்பதில்லை. ஒரு v1.1 வெளியீடு, இயல்பான ஆதரவுக்காகக் காத்திருக்காமல் ஒவ்வொரு நவீன உலாவியிலும் இந்த அம்சம் செயல்பட, ஒரு இலகுவான WebAssembly எழுத்தாக்கியைப் பயன்படுத்தி ஒரு விருப்பத்தேர்வு AVIF பாதையைச் சேர்க்கும். அதுவரை, வடிவத் தேர்வியில் AVIF விருப்பம் 'விரைவில் வருகிறது' எனக் காட்டப்படுகிறது, மேலும் WebP எழுத்தாக்கி பரிந்துரைக்கப்படும் மாற்றாகும். WebP ஆனது 2021 முதல் வெளிவந்த ஒவ்வொரு உலாவியாலும் ஆதரிக்கப்படுகிறது, மேலும் பெரும்பாலான நிஜ-உலகப் படங்களுக்கு AVIF இன் அளவில் 10 முதல் 20%-க்குள் கோப்புகளை உருவாக்குகிறது.

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