PNG ஐ WEBP ஆக மாற்றவும்

1. அறிமுகம்

PNG இலிருந்து WebP மாற்றி என்பது வேகமான, உலாவி அடிப்படையிலான ஒரு கருவியாகும். இது PNG படங்களை நவீன WebP வடிவமாக மாற்றுகிறது, மேலும் படத்தின் தரம் மற்றும் சுருக்க (Compression) அளவை நீங்கள் கட்டுப்படுத்த அனுமதிக்கிறது. காட்சித் தரத்தில் குறிப்பிடத்தக்க இழப்பு இல்லாமல் சிறிய கோப்பு அளவைப் பெற விரும்பினால், இந்த கருவி ஒரு எளிய மற்றும் திறமையான தீர்வை வழங்குகிறது.

PNG கோப்புகள் உயர்தர கிராபிக்ஸ் மற்றும் வெளிப்படைத்தன்மை கொண்ட (Transparent) படங்களுக்காக பரவலாகப் பயன்படுத்தப்படுகின்றன, ஆனால் அவற்றின் கோப்பு அளவு பெரிதாக இருக்கலாம். மறுபுறம், WebP சிறந்த சுருக்கம் மற்றும் செயல்திறனை வழங்கும் வகையில் வடிவமைக்கப்பட்டுள்ளது. இதனால் இது இணையதளங்கள், பயன்பாடுகள் மற்றும் டிஜிட்டல் தயாரிப்புகளுக்கு மிகவும் பொருத்தமானதாகும். PNG-யை WebP ஆக மாற்றுவதன் மூலம், நீங்கள் அலைவரிசை (Bandwidth) பயன்பாட்டைக் குறைக்கலாம், பக்க ஏற்ற வேகத்தை மேம்படுத்தலாம் மற்றும் பயனர் அனுபவத்தை உயர்த்தலாம்.

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

2. இது எவ்வாறு செயல்படுகிறது

இந்த கருவி உலாவியிலேயே நடைபெறும் பட செயலாக்கத்தைப் பயன்படுத்தி PNG படத்தை WebP வடிவமாக மாற்றுகிறது. இது பாதுகாப்பாகவும் திறமையாகவும் மாற்றத்தைச் செய்ய FileReader மற்றும் HTML5 Canvas போன்ற நவீன உலாவி API-களைப் பயன்படுத்துகிறது.

உள்ளீட்டு அளவுருக்கள்

• படம் (கட்டாயம்) – நீங்கள் .png நீட்டிப்பைக் கொண்ட ஒரு கோப்பைப் பதிவேற்ற வேண்டும். மற்ற கோப்பு வகைகள் ஏற்கப்படமாட்டாது.
• தரம் (கட்டாயம்) – 1 முதல் 100 வரையிலான ஒரு எண் மதிப்பு, இது உருவாகும் WebP படத்தின் சுருக்க அளவைக் கட்டுப்படுத்துகிறது.
  • 1 = அதிகபட்ச சுருக்கம் (சிறிய கோப்பு, குறைந்த தரம்)
  • 100 = குறைந்தபட்ச சுருக்கம் (பெரிய கோப்பு, உயர்தரமான படம்)

மாற்று செயல்முறை

நீங்கள் ஒரு PNG படத்தைத் தேர்ந்தெடுக்கும்போது, கருவி FileReader-ஐப் பயன்படுத்தி கோப்பைப் படித்து அதை Base64 தரவு URL-ஆக மாற்றுகிறது. அதன் பிறகு, படத்தின் இயல்பான அகலம் மற்றும் உயரத்தைப் பெற HTML பட பொருளில் (Image Object) அது ஏற்றப்படுகிறது. அசல் தீர்மானத்தை (Resolution) பாதுகாக்க அதே பரிமாணங்களுடன் ஒரு Canvas உருவாக்கப்படுகிறது.

படம் Canvas-இல் வரையப்படுகிறது. பின்னர் குறிப்பிடப்பட்ட தர அமைப்பைப் பயன்படுத்தி Canvas image/webp வடிவத்தில் புதிய படத்தை உருவாக்குகிறது. உருவாக்கப்பட்ட WebP படம் உடனடியாக முன்னோட்டமாகக் காட்டப்பட்டு, பதிவிறக்கவும் கிடைக்கும்.

சரிபார்ப்பு விதிகள்

• .png கோப்புகள் மட்டுமே ஏற்கப்படும்.
• தர மதிப்பு 1 முதல் 100 வரையிலான எண்ணாக இருக்க வேண்டும்.
• மாற்றுவதற்கு முன் ஒரு படக் கோப்பு தேர்ந்தெடுக்கப்பட்டிருக்க வேண்டும்.

வெளியீட்டு வடிவம்

• வடிவம்: WebP (.webp)
• தீர்மானம்: அசல் PNG போலவே
• சுருக்கம்: தேர்ந்தெடுக்கப்பட்ட தர மதிப்பின் அடிப்படையில்
• முன்னோட்டம்: உலாவியில் உடனடியாகக் காட்டப்படும்

வரம்புகள்

• PNG கோப்புகளை மட்டுமே மாற்ற முடியும்.
• மிகப் பெரிய படங்கள் உலாவி நினைவகத்தை அதிகமாகப் பயன்படுத்தக்கூடும்.
• வெளிப்படைத்தன்மை ஆதரிக்கப்படுகிறது, ஆனால் குறைந்த தர நிலையில் சுருக்கம் காட்சித் தெளிவைப் பாதிக்கக்கூடும்.

3. இந்த கருவியை எவ்வாறு பயன்படுத்துவது

1. படம் புலத்தைக் கிளிக் செய்து, உங்கள் சாதனத்திலிருந்து ஒரு PNG கோப்பைத் தேர்ந்தெடுக்கவும்.
2. தர மதிப்பை 1 முதல் 100 வரை உள்ளிடவும்.
3. செயலாக்க பொத்தானைக் கிளிக் செய்யவும் (அல்லது தரத்தை மாற்றி தானாகவே மாற்றத்தைத் தொடங்கவும்).
4. மாற்றப்பட்ட WebP படத்தின் முன்னோட்டத்தை உடனடியாகப் பார்க்கவும்.
5. WebP கோப்பை உங்கள் சாதனத்தில் சேமிக்க பதிவிறக்கு பொத்தானைக் கிளிக் செய்யவும்.

4. நடைமுறை எடுத்துக்காட்டுகள்

எடுத்துக்காட்டு 1: இணையதள பட மேம்படுத்தல்

உள்ளீடு:

• கோப்பு: banner.png (1920×1080)
• தரம்: 80

வெளியீடு:

• கோப்பு: result.webp
• தீர்மானம்: 1920×1080
• காட்சித் தரத்தில் மிகக் குறைந்த வித்தியாசத்துடன் சிறிய கோப்பு அளவு

முகப்புப் பக்கத்தின் ஏற்ற நேரத்தைக் குறைத்து, தெளிவான படத் தரத்தைப் பராமரிக்க இது மிகவும் பொருத்தமானது.

எடுத்துக்காட்டு 2: சிறுபடங்களுக்கான (Thumbnail) அதிகபட்ச சுருக்கம்

உள்ளீடு:

• கோப்பு: product.png (800×800)
• தரம்: 40

வெளியீடு:

• கோப்பு: result.webp
• தீர்மானம்: 800×800
• கோப்பு அளவு குறிப்பிடத்தக்க அளவில் குறைக்கப்படுகிறது

ஒவ்வொரு பிக்சலின் முழுமையான துல்லியத்தை விட சிறிய கோப்பு அளவு முக்கியமான தயாரிப்பு பட்டியல்கள் அல்லது காட்சியக சிறுபடங்களுக்கு இது மிகவும் ஏற்றது.

5. உருவாக்குநர்களுக்கான பயன்பாட்டு நிலைகள்

- கிளையன்ட்-பக்க பட மேம்படுத்தல்

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

- CMS பட சுருக்கம்

உள்ளடக்க மேலாண்மை அமைப்பில் (CMS) வலைப்பதிவு படங்களை தானாகவே WebP ஆக மாற்றி, Core Web Vitals மற்றும் SEO செயல்திறனை மேம்படுத்துங்கள்.

- JavaScript ஒருங்கிணைப்பு எடுத்துக்காட்டு

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
const webpData = canvas.toDataURL('image/webp', 0.85);

- பதிவேற்றத்திற்கு முன் PHP சரிபார்ப்பு

if($_FILES['image']['type'] !== 'image/png') {
    die('PNG கோப்புகள் மட்டுமே அனுமதிக்கப்படுகின்றன.');
}

பாதுகாப்பு மற்றும் சரிபார்ப்பு தொடர்பான பரிசீலனைகள்

• சேவையகத்தில் MIME வகைகளை எப்போதும் சரிபார்க்கவும்.
• நினைவக பயன்பாடு அதிகரிக்காமல் இருக்க கோப்பு அளவைக் கட்டுப்படுத்தவும்.
• சேமிப்பதற்கு முன் கோப்புப் பெயர்களை பாதுகாப்பாக மாற்றவும்.
• பாதுகாப்பான படிவச் சமர்ப்பிப்புகளுக்கு CSRF பாதுகாப்பைப் பயன்படுத்தவும்.

6. அடிக்கடி கேட்கப்படும் கேள்விகள்

இந்த PNG இலிருந்து WebP மாற்றி என்ன செய்கிறது?

இது உங்கள் உலாவியிலேயே PNG படத்தை WebP வடிவமாக மாற்றுகிறது மற்றும் சுருக்கத் தரத்தை நீங்கள் கட்டுப்படுத்த அனுமதிக்கிறது.

இந்த கருவி எனது படங்களை சேவையகத்தில் பதிவேற்றுமா?

இல்லை. மாற்றம் முழுவதும் HTML5 Canvas-ஐப் பயன்படுத்தி உங்கள் உலாவியிலேயே நடைபெறுகிறது. எனவே உங்கள் படம் உங்கள் சாதனத்திலேயே இருக்கும்.

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

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

படத்தின் தீர்மானம் மாறுமா?

இல்லை. வெளியீட்டு WebP படம் அசல் PNG கோப்பின் அதே அகலத்தையும் உயரத்தையும் வைத்திருக்கும்.

வேறு கோப்பு வடிவங்களையும் மாற்ற முடியுமா?

இல்லை. இந்த கருவி WebP-க்கு மாற்றுவதற்காக PNG கோப்புகளை மட்டுமே ஏற்கிறது.

WebP வெளிப்படைத்தன்மையை ஆதரிக்கிறதா?

ஆம். PNG போலவே WebP-யும் வெளிப்படைத்தன்மையை ஆதரிக்கிறது. எனவே இது லோகோக்கள் மற்றும் UI கிராபிக்ஸ்களுக்கு ஏற்றது.

SEO-க்கு WebP சிறந்ததா?

சிறிய படக் கோப்பு அளவுகள் பக்க ஏற்ற வேகத்தை மேம்படுத்தும். இது SEO செயல்திறன் மற்றும் பயனர் அனுபவத்தில் நேர்மறையான தாக்கத்தை ஏற்படுத்தக்கூடும்.