ബ്രൗസർ-അടിസ്ഥാനമായ ഇമേജ് കൺവേർഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു
ഓരോ കൺവേർഷനും JavaScript-ൽ മാത്രം പ്രവർത്തിക്കുന്ന നാലു-ഘട്ട പൈപ്പ്ലൈൻ ആണ്. ഒരു കോഡെക് ലൈബ്രറിയും ഡൗൺലോഡ് ആകില്ല, ഒരു സർവ്വറും ഉൾപ്പെടുന്നില്ല. ബ്രൗസറിന്റെ Canvas API ഡീകോഡ്, റീസൈസ്, റി-എൻകോഡ് എല്ലാം മെമ്മറിയിൽ ചെയ്ത് ഒരു Blob കൈമാറുന്നു. ഓരോ ഘട്ടവും ടാബ് സാൻഡ്ബോക്സിൽ ആണ്, ഒറിജിനൽ ഫയൽ നെറ്റ്വർക്കിൽ ഒരിക്കലും പോകില്ല.
- അപ്ലോഡ് ചെയ്ത ഓരോ ഫയലും Blob ആക്കി വായിക്കുകയും ബ്രൗസർ ലോക്കലായി ഡീകോഡ് ചെയ്യാൻ ഒരു object URL ഉണ്ടാക്കുകയും ചെയ്യുന്നു — ബൈറ്റുകൾ സർവ്വറിലേക്ക് അയക്കുന്നില്ല.
- ഡീകോഡ് ചെയ്ത ഇമേജ് ഒരു offscreen Canvas-ൽ വരയ്ക്കുകയും ഒറിജിനൽ അസ്പെക്ട് റേഷ്യോ നിലനിർത്തി റീസൈസ് കൺസ്ട്രൈന്റ് ബാധകമാക്കുകയും ചെയ്യുന്നു.
canvas.toBlob(callback, targetMimeType, quality)ഉപയോഗിച്ച് പിക്സലുകൾ റി-എൻകോഡ് ചെയ്യുന്നു. PNG എപ്പോഴും ലോസ്ലെസ് ആണ്; JPEG, WebP ക്വാളിറ്റി സ്ലൈഡർ ഉപയോഗിക്കുന്നു.- ഔട്ട്പുട്ട് ഡൈമൻഷനും ഫയൽ സൈസും ഉൾക്കൊള്ളുന്ന ബിഫോർ/ആഫ്റ്റർ തംബ്നെയിൽ കാണിക്കുകയും ഒരൊറ്റ ഡൗൺലോഡ് ബട്ടൺ അല്ലെങ്കിൽ ബാച്ചിന് ഒരൊറ്റ ZIP ഓഫർ ചെയ്യുകയും ചെയ്യുന്നു. ZIP fflate ഉപയോഗിച്ച് മെമ്മറിയിൽ ടാബിൽ തന്നെ ഉണ്ടാക്കുന്നു.
ഇമേജ് ഫോർമാറ്റുകൾ കൺവേർട്ട് ചെയ്യേണ്ടത് എന്തുകൊണ്ട്?
- PNG-ൽ നിന്ന് WebP-ലേക്ക് മാറ്റുമ്പോൾ 0.8 ക്വാളിറ്റിയിൽ 25 മുതൽ 35% വരെ ഫയൽ സൈസ് കുറക്കും — പ്രത്യക്ഷ ഗുണനിലവാര നഷ്ടം ഇല്ലാതെ. ഇത് Core Web Vitals LCP സ്കോർ നേരിട്ട് മെച്ചപ്പെടുത്തും.
- PNG ട്രാൻസ്പേരൻസി നിലനിർത്തും, JPEG ഇല്ല. PNG-to-JPEG ആക്കുമ്പോൾ ട്രാൻസ്പേരൻറ് പിക്സലുകൾ വെള്ള ബാക്ഗ്രൗണ്ടിൽ റെൻഡർ ആകുന്നു — ഇത് ഇമെയിൽ ക്ലൈന്റ്, CMS, പ്രിന്റ് ടെംപ്ലേറ്റ് ആവശ്യങ്ങൾക്ക് ഉചിതം.
- സോഷ്യൽ പ്ലാറ്റ്ഫോമുകളും പരസ്യ നെറ്റ്വർക്കുകളും കർശനമായ ഫോർമാറ്റ് ആവശ്യകതകൾ ഉള്ളവയാണ്. അപ്ലോഡ് ചെയ്യുന്നതിന് മുൻപ് ഒരു ദ്രുത കൺവേർഷൻ rejected-creative ping-pong ഒഴിവാക്കും.
- PNG സ്ക്രീൻഷോട്ടുകൾ, JPEG ഫോട്ടോകൾ, WebP ഡിസൈനർ എക്സ്പോർട്ടുകൾ — ഇവ ഒരൊറ്റ ഫോർമാറ്റിലേക്ക് ക്രമീകരിക്കുന്നത് CMS ഇൻജസ്റ്റ് പൈപ്പ്ലൈൻ ലളിതമാക്കും.
സാധാരണ ഉപയോഗങ്ങൾ
ഉറവിട ഫോർമാറ്റും ഡെസ്റ്റിനേഷൻ ആവശ്യകതകളും പൊരുത്തപ്പെടാത്തപ്പോൾ ഫോർമാറ്റ് കൺവേർഷൻ ആവശ്യം വരുന്നു. ഇതിൽ ആവർത്തിക്കുന്ന മൂന്ന് പാറ്റേണുകൾ.
- Shopify അല്ലെങ്കിൽ WooCommerce സ്റ്റോറിനായി ഉൽപ്പന്ന ഫോട്ടോകൾ ഒരുക്കൽ. JPEG ഒറിജിനൽ ഫ്രണ്ട്സ്റ്റോർ WebP-ലേക്ക് 0.85 ക്വാളിറ്റിയിൽ, PNG കോപ്പികൾ പ്രിന്റ് ആക്സ്പോർട്ടിനായി സൂക്ഷിക്കൽ.
- ഡിസൈനർ നൽകിയ PNG എക്സ്പോർട്ടുകൾ React അല്ലെങ്കിൽ Next.js ബിൽഡിൽ കേറ്റുന്നതിന് മുൻപ് JPEG/WebP ആക്കൽ. ഇമേജ് പൈപ്പ്ലൈൻ ചെറിയ സോഴ്സ് ലഭിക്കുകയും ബണ്ടിൽ ഭാരം കുറയുകയും ചെയ്യും.
- QA ദൗത്യത്തിൽ നിന്ന് ഒരു ഫോൾഡർ സ്ക്രീൻഷോട്ടുകൾ ബാച്ച്-പ്രോസസ്സ് ചെയ്യൽ. PNG to JPEG at 0.9 ഒരു 50-സ്ക്രീൻഷോട്ട് ആർക്കൈവ് ഏകദേശം 120 MB-ൽ നിന്ന് 20 MB-ൽ താഴേക്ക് ചുരുക്കുന്നു.
ഒരു ഉദാഹരണം: 2 MB PNG-ൽ നിന്ന് 300 KB WebP-ലേക്ക്
2400×1600 പിക്സലിൽ 2 MB PNG ഹീറോ ഇമേജ് മാർക്കറ്റിംഗ് ലാൻഡിംഗ് പേജുകളിൽ സാധാരണ കാണുന്നതാണ്. ഇത് കൺവേർഷൻ ലാഭം അളക്കാൻ നല്ല ബെഞ്ച്മാർക്ക് ആണ്.
PNG അപ്ലോഡ് സോണിൽ ഡ്രോപ്പ് ചെയ്ത്, ടാർഗറ്റ് ഫോർമാറ്റ് WebP ആക്കി, ക്വാളിറ്റി 0.8 ആക്കി, max width 1200 ആക്കുക. Canvas പൈപ്പ്ലൈൻ 1200×800-ൽ ഇമേജ് വരയ്ക്കുകയും WebP-ലേക്ക് റി-എൻകോഡ് ചെയ്യുകയും ചെയ്യുന്നു. ഔട്ട്പുട്ട് കാർഡ് ഫലം കാണിക്കും — സാധാരണ 280 മുതൽ 320 KB, ഏകദേശം 85% കുറവ്. ഒരൊറ്റ ഫയലിന് Download ക്ലിക്ക് ചെയ്യുക, ബാച്ചിന് Download .zip ക്ലിക്ക് ചെയ്യുക. ഈ സൈസ് ഇമേജിന് ഡ്രോപ്പ് മുതൽ ഡൗൺലോഡ് വരെ ഏതാനും നൂറ് മില്ലിസെക്കൻഡ്, ശൂന്യ ബാൻഡ്വിഡ്ത്ത്.
ഏതൊക്കെ ഫോർമാറ്റുകൾ പിന്തുണക്കുന്നു?
ഇൻപുട്ടിൽ ബ്രൗസർ ഡീകോഡ് ചെയ്യാൻ കഴിയുന്ന ഏത് ഫോർമാറ്റും — PNG, JPEG, WebP, GIF, BMP. ഔട്ട്പുട്ട് ഫോർമാറ്റുകൾ: PNG (ലോസ്ലെസ്), JPEG, WebP. Canvas API-ൽ AVIF Safari, Firefox-ൽ ഇല്ലാത്തതിനാൽ ഇതുവരെ AVIF ഔട്ട്പുട്ട് ഇല്ല. WebAssembly-അടിസ്ഥാനമായ AVIF v1.1-ൽ ആസൂത്രിതം.
ഇത് ഉപകരണത്തിൽ തന്നെ ആകുമോ?
അതെ, പൂർണ്ണമായും. ബ്രൗസറിന്റെ Canvas API, Web File API ഉപയോഗിച്ച് ഓരോ ഇമേജും മെമ്മറിയിൽ ഡീകോഡ്, റി-എൻകോഡ് ചെയ്യുന്നു. ഇമേജ് ഡേറ്റ സർവ്വറിലേക്ക് അയക്കുന്നില്ല. DevTools-ൽ Network panel തുറന്ന് ഒരു കൺവേർഷൻ നടത്തി സ്വയം വ്യക്തമാക്കാം.
PNG-ഉം JPEG-ഉം തമ്മിൽ ക്വാളിറ്റി വ്യത്യാസം?
PNG ഒരു ലോസ്ലെസ് ഫോർമാറ്റ് ആണ്. ഓരോ പിക്സലും കൃത്യമായി ഉണ്ടാകും — സ്ക്രീൻഷോട്ടുകൾ, UI ക്യാപ്ചറുകൾ, ഷാർപ്പ് ഇഡ്ജ് ഇമേജുകൾക്ക് ഇത് ഉചിതം. JPEG DCT കമ്പ്രഷൻ ഉപയോഗിക്കുന്നു — ഫോട്ടോഗ്രാഫുകൾക്ക് ഉചിതം. 0.8 ക്വാളിറ്റി PNG-യേക്കാൾ 4 മുതൽ 6 ഇരട്ടി ചെറുത് — ദൃശ്യ വ്യത്യാസം തിരിച്ചറിയാൻ ബുദ്ധിമുട്ട്.
AVIF സപ്പോർട്ട് എപ്പോൾ വരും?
AVIF എൻകോഡിംഗ് canvas.toBlob(…, 'image/avif') Chrome 105-ൽ മാത്രം; Safari, Firefox-ൽ ഇല്ല. v1.1-ൽ ഒരു WebAssembly AVIF എൻകോഡർ ചേർക്കും. അതുവരെ AVIF 'coming soon' ആണ്, WebP ഒരു ഉത്തമ ബദൽ. 2021 മുതൽ ഷിപ്പ് ചെയ്ത എല്ലാ ബ്രൗസറും WebP പിന്തുണക്കുന്നു.
ഇമേജ് ഡ്രോപ്പ് ചെയ്ത്, ഫോർമാറ്റ് തിരഞ്ഞെടുത്ത്, കൺവേർട്ട് ചെയ്തോളൂ. എല്ലാം ടാബിൽ. അപ്ലോഡ് ഇല്ല, അക്കൗണ്ട് ഇല്ല, സർവ്വർ ക്യൂ ഇല്ല.