ബ്രൗസർ-അടിസ്ഥാനമായ ഇമേജ് കംപ്രഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു
ഓരോ കംപ്രഷൻ പാസും മൊത്തം JavaScript-ൽ പ്രവർത്തിക്കുന്നു. ഒരു കോഡെക് ലൈബ്രറിയും ഡൗൺലോഡ് ആകില്ല, ഒരു സർവ്വറും ഉൾപ്പെടുന്നില്ല. ബ്രൗസറിന്റെ Canvas API ഇമേജ് ഡീകോഡ് ചെയ്ത്, കുറഞ്ഞ ക്വാളിറ്റിയിൽ റി-എൻകോഡ് ചെയ്ത്, പേജിന് പ്രിവ്യൂ ചെയ്യാനോ ഡൗൺലോഡ് ചെയ്യാനോ zip ചെയ്യാനോ കഴിയുന്ന ഒരു Blob നിങ്ങൾക്ക് കൈമാറുന്നു. ഓരോ ഘട്ടവും ടാബിന്റെ സാൻഡ്ബോക്സിനുള്ളിൽ ആയതിനാൽ, ഒറിജിനൽ ഫയലുകൾ ഒരിക്കലും നെറ്റ്വർക്കിൽ തൊടുന്നില്ല.
- അപ്ലോഡ് ചെയ്ത ഓരോ ഫയലും Blob ആക്കി വായിക്കുകയും ബ്രൗസർ ലോക്കലായി ഡീകോഡ് ചെയ്യാൻ ഒരു object URL ഉണ്ടാക്കുകയും ചെയ്യുന്നു — ബൈറ്റുകൾ സർവ്വറിലേക്ക് കോപ്പി ചെയ്യാതെയോ ഡിസ്കിലേക്ക് എഴുതാതെയോ.
- ഡീകോഡ് ചെയ്ത ഇമേജ് അതിന്റെ ഒറിജിനൽ പിക്സൽ ഡൈമൻഷനിൽ ഒരു offscreen Canvas എലമെന്റിൽ വരയ്ക്കുക, റി-എൻകോഡിംഗിന് തയ്യാറായി.
- പിക്സലുകൾ റി-എൻകോഡ് ചെയ്യാൻ
canvas.toBlob(callback, mimeType, quality)വിളിക്കുക. ക്വാളിറ്റി മോഡിൽ സ്ലൈഡർ മൂല്യം നേരിട്ട് എൻകോഡറിന്റെ ക്വാന്റൈസേഷൻ സെറ്റിംഗിലേക്ക് മാപ്പ് ആകുന്നു; ടാർഗറ്റ്-സൈസ് മോഡിൽ ഔട്ട്പുട്ട് blob നിങ്ങളുടെ ബൈറ്റ് ബജറ്റിനുള്ളിൽ ഒതുങ്ങുന്നതുവരെ പേജ് ക്വാളിറ്റി മൂല്യം bisect ചെയ്യുന്നു. - ഒറിജിനൽ സൈസ്, കംപ്രസ് ചെയ്ത സൈസ്, സേവിംഗ്സ് ശതമാനം എന്നിവ ഉൾപ്പെടുന്ന ബിഫോർ/ആഫ്റ്റർ റീഡൗട്ട് കാണിക്കുകയും, പിന്നെ ഓരോ ഇമേജിനും ഡൗൺലോഡ് ബട്ടൺ അല്ലെങ്കിൽ മൊത്തം ബാച്ചിന് ഒരൊറ്റ ZIP ഓഫർ ചെയ്യുകയും ചെയ്യുന്നു. ZIP ആദ്യ ഉപയോഗത്തിൽ ലോഡ് ആകുന്ന 8 KB ലൈബ്രറി fflate ഉപയോഗിച്ച് മെമ്മറിയിൽ ഉണ്ടാക്കുന്നു.
ഇമേജുകൾ എന്തിന് കംപ്രസ് ചെയ്യണം?
- ചെറിയ ഇമേജുകൾ വേഗത്തിൽ ലോഡ് ആകുന്നു. ഒരു 4 MB ഹീറോ ഇമേജ് 600 KB-ലേക്ക് കുറയ്ക്കുന്നത് Largest Contentful Paint നേരിട്ട് മെച്ചപ്പെടുത്തുന്നു, ഇത് Google റാങ്കിംഗിന് ഉപയോഗിക്കുന്ന Core Web Vitals-ൽ ഒന്നാണ്. പല ഫോട്ടോകൾ ഉള്ള ഒരു പേജിൽ ഈ ലാഭം ഒരു വേഗത്തിലുള്ള ഫസ്റ്റ് പെയിന്റ് ആയി കൂട്ടി വളരുന്നു.
- പിന്നെ അപ്ലോഡ് പരിധികളുണ്ട്. ധാരാളം CMS പ്ലാറ്റ്ഫോമുകൾ, ടിക്കറ്റിംഗ് ടൂളുകൾ, ഇമെയിൽ സിസ്റ്റങ്ങൾ 1 അല്ലെങ്കിൽ 2 MB-യ്ക്ക് മുകളിലുള്ളവ നിരസിക്കുന്നു, ഒരു ദ്രുത കംപ്രഷൻ പാസ് ഒരു ഫുൾ എഡിറ്റർ തുറക്കാതെ തന്നെ ഫോട്ടോയെ പരിധിക്ക് താഴെ കൊണ്ടുവരുന്നു.
- സ്കെയിലിൽ ബാൻഡ്വിഡ്ത്തും സ്റ്റോറേജും പണച്ചെലവുള്ളവയാണ്. ഫുൾ-സൈസ് PNG-യ്ക്ക് പകരം ക്വാളിറ്റി 0.8-ൽ WebP ഷിപ്പ് ചെയ്യുന്നത് ഇമേജ് പേലോഡ് മൂന്നിലൊന്ന് അല്ലെങ്കിൽ അതിലധികം കുറയ്ക്കാം, ഇത് CDN എഗ്രസ് ബില്ലുകളും നിങ്ങളുടെ സന്ദർശകരുടെ മൊബൈൽ ഡേറ്റ ഉപയോഗവും കുറയ്ക്കുന്നു.
- ചില ഇമേജുകൾ അൽപ്പവും അപ്ലോഡ് ചെയ്യാൻ പാടില്ല. ഇവിടെ എല്ലാം നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നതിനാൽ, ID സ്കാനുകൾ, മെഡിക്കൽ ഇമേജുകൾ, ഇന്റേണൽ സ്ക്രീൻഷോട്ടുകൾ നിങ്ങളുടെ ഉപകരണത്തിൽ തന്നെ നിൽക്കും. വിഷമിക്കാൻ ലൂപ്പിൽ TinyPNG പോലുള്ള ഒരു തേർഡ്-പാർട്ടി സർവ്വർ ഇല്ല.
സാധാരണ ഉപയോഗങ്ങൾ
ഒരു ഇമേജ് അത് പോകുന്ന ഇടത്തേക്കാൾ വലുതാകുമ്പോഴെല്ലാം കംപ്രഷൻ ആവശ്യം വരുന്നു. ഞങ്ങൾ വീണ്ടും വീണ്ടും കാണുന്ന മൂന്ന് പാറ്റേണുകൾ.
- ഒരു ഓൺലൈൻ സ്റ്റോറിനായി പ്രൊഡക്ട് ഫോട്ടോകൾ ഒരുക്കൽ. JPEG ഒറിജിനലുകൾ ക്വാളിറ്റി 0.8-ലേക്ക് (അല്ലെങ്കിൽ ഒരു 200 KB ടാർഗറ്റ്) കംപ്രസ് ചെയ്യപ്പെടുന്നു, അങ്ങനെ സ്റ്റോർഫ്രണ്ട് വേഗത്തിൽ നിന്ന് മൊബൈലിൽ Core Web Vitals ക്ലിയർ ചെയ്യുന്നു.
- ഒരു ബഗ് ട്രാക്കറിലോ wiki-യിലോ അറ്റാച്ച് ചെയ്യുന്നതിന് മുമ്പ് സ്ക്രീൻഷോട്ടുകൾ ചുരുക്കൽ. ക്വാളിറ്റി 0.85-ൽ JPEG-ലേക്ക് മാറ്റിയ PNG ക്യാപ്ചറുകളുടെ ഒരു ബാച്ച് പലപ്പോഴും പത്തുകണക്കിന് മെഗാബൈറ്റിൽ നിന്ന് ഒരുപിടി MB-ലേക്ക് വീഴുന്നു.
- ഒരു ഫോട്ടോയെ അപ്ലോഡ് പരിധിക്ക് താഴെ കൊണ്ടുവരൽ — 1 MB-യ്ക്ക് മുകളിലുള്ള ഫയലുകൾ നിരസിക്കുന്ന ഒരു ജോലി അപേക്ഷാ പോർട്ടൽ, ഒരു ഇറുകിയ അറ്റാച്ച്മെന്റ് പരിധിയുള്ള ഒരു ഇമെയിൽ സിസ്റ്റം, അല്ലെങ്കിൽ ഒരു ബൈറ്റ് ബജറ്റിന് ഒതുങ്ങേണ്ട ഒരു ഫോറം അവതാർ.
ഒരു പ്രവർത്തന ഉദാഹരണം: 4 MB JPEG-ൽ നിന്ന് 400 KB-ലേക്ക്
ഒരു ഫോൺ ക്യാമറയിൽ നിന്ന് നേരെ വരുന്ന ഒരു 4 MB JPEG അപ്ലോഡ് പരിധികളെ തടഞ്ഞ് പേജുകൾ മന്ദഗതിയിലാക്കുന്ന ഒരു സാധാരണ പേലോഡ് ആണ്. കംപ്രഷൻ എന്ത് ലാഭിക്കുന്നു എന്നതിന് ഇത് ഒരു ന്യായമായ ബെഞ്ച്മാർക്ക് ആണ്.
JPEG അപ്ലോഡ് സോണിൽ ഡ്രോപ്പ് ചെയ്യുക, ഫോർമാറ്റ് JPEG-ൽ തന്നെ വിടുക, ക്വാളിറ്റി സ്ലൈഡർ 0.7-ലേക്ക് വലിക്കുക അല്ലെങ്കിൽ ടാർഗറ്റ്-സൈസ് മോഡിലേക്ക് മാറി 400 KB ടൈപ്പ് ചെയ്യുക. ക്വാളിറ്റി മോഡിൽ Canvas പൈപ്പ്ലൈൻ ഒരിക്കൽ റി-എൻകോഡ് ചെയ്ത് ഫലം കാണിക്കുന്നു, ഫോട്ടോയനുസരിച്ച് സാധാരണ 500 മുതൽ 700 KB വരെ. ടാർഗറ്റ്-സൈസ് മോഡിൽ പേജ് കുറച്ച് ക്വാളിറ്റി മൂല്യങ്ങൾ പരീക്ഷിച്ച്, ഇപ്പോഴും 400 KB-യ്ക്കുള്ളിൽ ഒതുങ്ങുന്ന ഏറ്റവും ഉയർന്ന മൂല്യത്തിൽ ഉറയ്ക്കുകയും സേവിംഗ്സ് ശതമാനം റിപ്പോർട്ട് ചെയ്യുകയും ചെയ്യുന്നു. ഒരൊറ്റ ഫയൽ എടുക്കാൻ കാർഡിൽ ഡൗൺലോഡ് ക്ലിക്ക് ചെയ്യുക, അല്ലെങ്കിൽ നിങ്ങൾ ഒരേസമയം പല ഇമേജുകൾ കംപ്രസ് ചെയ്തെങ്കിൽ .zip ഡൗൺലോഡ് ക്ലിക്ക് ചെയ്യുക. ഈ സൈസ് ഇമേജിന് മൊത്തം റൗണ്ട്-ട്രിപ്പ് ഒരു സെക്കൻഡിന് നന്നായി താഴെ പ്രവർത്തിക്കുകയും പേജ് ലോഡ് കഴിഞ്ഞ ശേഷം പൂജ്യം ബാൻഡ്വിഡ്ത്ത് ഉപയോഗിക്കുകയും ചെയ്യുന്നു.
ക്വാളിറ്റി മോഡും ടാർഗറ്റ്-സൈസ് മോഡും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്?
ക്വാളിറ്റി മോഡ് നിങ്ങൾക്ക് 0.1 മുതൽ 1.0 വരെ ഒരു സ്ലൈഡർ തരുന്നു, ഇത് JPEG അല്ലെങ്കിൽ WebP എൻകോഡറിന്റെ ക്വാന്റൈസേഷൻ സെറ്റിംഗിലേക്ക് മാപ്പ് ആകുന്നു — കുറഞ്ഞ സംഖ്യകൾ എന്നാൽ ചെറിയ ഫയലുകളും കൂടുതൽ കാണാവുന്ന ആർട്ടിഫാക്റ്റുകളും. ടാർഗറ്റ്-സൈസ് മോഡ് പ്രശ്നം തിരിച്ചിടുന്നു: നിങ്ങൾ കിലോബൈറ്റിൽ ഒരു സൈസ് പേരിടുന്നു, പേജ് ക്വാളിറ്റി മൂല്യം bisect ചെയ്ത്, നിങ്ങളുടെ ബജറ്റിനുള്ളിൽ ഇപ്പോഴും ഒതുങ്ങുന്ന ഏറ്റവും ഉയർന്ന ക്വാളിറ്റി കണ്ടെത്തുന്നതുവരെ കുറച്ച് തവണ എൻകോഡ് ചെയ്യുന്നു. ഒരു കടുത്ത പരിധി പ്രധാനമാകുമ്പോൾ (ഒരു 1 MB അപ്ലോഡ് പരിധി, പറയാം) ടാർഗറ്റ്-സൈസ് സൗകര്യപ്രദമാണ്; നിങ്ങൾക്ക് ഒരു പ്രവചിക്കാവുന്ന ദൃശ്യ ഫലം വേണമെങ്കിൽ ക്വാളിറ്റി മോഡ് വേഗത്തിലുള്ളതും മികച്ചതുമാണ്. PNG ലോസ്ലെസ് ആയതിനാൽ ഒരു മോഡും അതിന് ബാധകമല്ല.
ഇത് എന്റെ ഉപകരണത്തിൽ തന്നെ നടക്കുമോ?
അതെ, പൂർണ്ണമായും. പേജ് ഓരോ ഇമേജും മെമ്മറിയിൽ ഡീകോഡ്, റി-എൻകോഡ് ചെയ്യാൻ ബ്രൗസറിന്റെ നേറ്റീവ് Canvas API-യും Web File API-യും ഉപയോഗിക്കുന്നു. ഒരു ഇമേജ് ഡേറ്റയും സർവ്വറിലേക്ക് അയക്കുന്നില്ല, താൽക്കാലിക അപ്ലോഡ് ഇല്ല, ക്ലൗഡ് റൗണ്ട്-ട്രിപ്പ് ഇല്ല. നിങ്ങൾക്ക് സ്വയം പരിശോധിക്കാം: DevTools തുറന്ന്, Network പാനലിലേക്ക് മാറി, ഒരു കംപ്രഷൻ പ്രവർത്തിപ്പിക്കുക. നിങ്ങൾ കാണുന്ന ഏക ഔട്ട്ബൗണ്ട് റിക്വസ്റ്റുകൾ ആദ്യ പേജ് ലോഡും ad calls-ഉം ആണ്. ഇമേജ് ആകൃതിയിലുള്ള ഒന്നും ടാബ് വിടുന്നില്ല.
ഒരു PNG കംപ്രസ് ചെയ്യുമ്പോൾ ചിലപ്പോൾ എന്തുകൊണ്ട് അത് ഏതാണ്ട് ചുരുങ്ങുന്നില്ല?
PNG ഒരു ലോസ്ലെസ് ഫോർമാറ്റ് ആണ്, അതിനാൽ Canvas API അതിനെ ചെറുതാക്കാൻ ഡീറ്റെയിൽ വലിച്ചെറിയാൻ കഴിയില്ല — അതേ പിക്സലുകൾ വീണ്ടും പായ്ക്ക് ചെയ്യാൻ മാത്രമേ കഴിയൂ. ഫോട്ടോഗ്രാഫുകൾക്ക്, ഒരു PNG ഇതിനകം വലുതാണ്, ലോസ്ലെസ് റി-എൻകോഡ് കുറച്ച് മാത്രമേ ലാഭിക്കൂ. യഥാർത്ഥ നേട്ടം ഔട്ട്പുട്ട് ഫോർമാറ്റ് JPEG അല്ലെങ്കിൽ WebP-ലേക്ക് മാറ്റുന്നതിൽ നിന്ന് വരുന്നു, ഇവ ഫോട്ടോകൾക്ക് അനുയോജ്യമായ ലോസി കംപ്രഷൻ ഉപയോഗിച്ച് സ്ഥിരമായി 4 മുതൽ 10 മടങ്ങ് വരെ ചെറുതാകുന്നു. നിങ്ങൾക്ക് ലോസ്ലെസ് ക്വാളിറ്റി അല്ലെങ്കിൽ ട്രാൻസ്പേരൻസി വേണ്ടപ്പോൾ മാത്രം PNG വയ്ക്കുക; അല്ലെങ്കിൽ ഫോട്ടോകൾക്ക് JPEG അല്ലെങ്കിൽ മികച്ച സൈസ്-ടു-ക്വാളിറ്റി സന്തുലനത്തിന് WebP തിരഞ്ഞെടുക്കുക.
ഞാൻ ഏത് ഫോർമാറ്റ് തിരഞ്ഞെടുക്കണം?
ഫോട്ടോഗ്രാഫുകൾക്ക്, ക്വാളിറ്റി 0.8-ൽ WebP മികച്ച സൈസ്-ടു-ക്വാളിറ്റി സന്തുലനം തരുന്നു, 2021 മുതൽ ഷിപ്പ് ചെയ്ത എല്ലാ ബ്രൗസറും ഇത് പിന്തുണയ്ക്കുന്നു; ഒരു ഡെസ്റ്റിനേഷൻ പഴയതോ കടുപ്പമുള്ളതോ ആകുമ്പോൾ JPEG സുരക്ഷിതമായ യൂണിവേഴ്സൽ ഫാൾബാക്ക് ആണ്. നിങ്ങൾക്ക് ലോസ്ലെസ് ക്വാളിറ്റി അല്ലെങ്കിൽ ഒരു ആൽഫ ചാനൽ വേണ്ടപ്പോൾ മാത്രം PNG തിരഞ്ഞെടുക്കുക — ലൈൻ ആർട്ട്, UI സ്ക്രീൻഷോട്ടുകൾ, ട്രാൻസ്പേരൻസിയുള്ള ലോഗോകൾ. നിങ്ങൾ പേജ് സ്പീഡിന് ഒപ്റ്റിമൈസ് ചെയ്യുകയും നിങ്ങളുടെ പ്രേക്ഷകർ ആധുനിക ബ്രൗസറുകൾ ഉപയോഗിക്കുകയും ചെയ്യുന്നുവെങ്കിൽ, WebP ഏതാണ്ട് എപ്പോഴും ശരിയായ തിരഞ്ഞെടുപ്പാണ്; നിങ്ങൾ ഒരു പഴയ CMS-നോ WebP നിരസിക്കുന്ന ഒരു പ്രിന്റ് പൈപ്പ്ലൈനിനോ ഫീഡ് ചെയ്യുന്നുവെങ്കിൽ, JPEG-ൽ തുടരുക.
നിങ്ങളുടെ ഇമേജുകൾ ഡ്രോപ്പ് ചെയ്യുക, ഒരു ക്വാളിറ്റി ലെവൽ അല്ലെങ്കിൽ ഒരു ടാർഗറ്റ് സൈസ് തിരഞ്ഞെടുക്കുക, കംപ്രസ് ചെയ്യുക. എല്ലാം നിങ്ങളുടെ ടാബിൽ പ്രവർത്തിക്കുന്നു. അപ്ലോഡ് ഇല്ല, അക്കൗണ്ട് ഇല്ല, സർവ്വർ ക്യൂവിന് കാത്തിരിപ്പ് ഇല്ല.