§

ഇമേജ് ഡ്രോപ്പ് ചെയ്യുക അല്ലെങ്കിൽ ക്ലിക്ക് ചെയ്‌ത് തിരഞ്ഞെടുക്കുക

JPEG, PNG, WebP — ഫയലൊന്നിന് 30 MB വരെ. ബാച്ച് സപ്പോർട്ടുണ്ട്.

ബാച്ച് കംപ്രഷനായി ഒന്നിലധികം ഇമേജുകൾ ഡ്രോപ്പ് ചെയ്യുക — എല്ലാ പ്രോസസിംഗും നിങ്ങളുടെ ഉപകരണത്തിൽ നടക്കുന്നു.

ഔട്ട്‌പുട്ട് ഫോർമാറ്റ്
കംപ്രഷൻ മോഡ്
JPEG, WebP മാത്രം — PNG ലോസ്‌ലെസ് ആണ്

US, UK വെബ് ടീമുകൾ ഓരോ സ്‌പ്രിന്റിലും ഇതേ ഭിത്തിയിൽ ഇടിക്കുന്നു. ഒരു പ്രൊഡക്ട് ഫോട്ടോ DSLR-ൽ നിന്ന് നേരെ 4 MB ആയി വരുന്നു, Lighthouse അത് ഫ്ലാഗ് ചെയ്യുന്നു, CMS അപ്‌ലോഡ് പരിധി 1 MB ആണ്. ഫയൽ ഇവിടെ ഡ്രോപ്പ് ചെയ്യുക, JPEG ക്വാളിറ്റി 0.7-ൽ തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ 400 KB ടാർഗറ്റ് സെറ്റ് ചെയ്യുക, Compress അമർത്തുക, ഫലം ഒരു സെക്കൻഡിൽ എടുക്കുക. ഒറിജിനൽ ഫയൽ നിങ്ങളുടെ ലാപ്‌ടോപ്പിൽ തന്നെ നിൽക്കും. അതേ ഷോർട്ട്കട്ട് ഒരു Jira ടിക്കറ്റിനായി PNG സ്‌ക്രീൻഷോട്ടുകളുടെ ഒരു ബാച്ച് ചുരുക്കും, അല്ലെങ്കിൽ ഒരു Shopify സ്റ്റോർഫ്രണ്ട് Core Web Vitals ക്ലിയർ ചെയ്യാൻ ഹീറോ ഇമേജുകൾ കുറയ്ക്കും. HIPAA-യ്ക്ക് കീഴിലോ ഒരു FedRAMP ബൗണ്ടറിക്കുള്ളിലോ ഉള്ള ടീമുകൾ ഒരു കാരണത്താൽ ബ്രൗസർ-വശത്തെ ടൂളിംഗ് തിരഞ്ഞെടുക്കുന്നു: സോഴ്‌സ് ഇമേജുകൾ TinyPNG പോലുള്ള ഒരു പുറം സർവീസിനെ നിയമപരമായി തൊടാൻ പറ്റില്ല, ഈ പേജ് മൊത്തം JavaScript-ൽ പ്രവർത്തിക്കുന്നു.

ബ്രൗസർ-അടിസ്ഥാനമായ ഇമേജ് കംപ്രഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഓരോ കംപ്രഷൻ പാസും മൊത്തം JavaScript-ൽ പ്രവർത്തിക്കുന്നു. ഒരു കോഡെക് ലൈബ്രറിയും ഡൗൺലോഡ് ആകില്ല, ഒരു സർവ്വറും ഉൾപ്പെടുന്നില്ല. ബ്രൗസറിന്റെ Canvas API ഇമേജ് ഡീകോഡ് ചെയ്‌ത്, കുറഞ്ഞ ക്വാളിറ്റിയിൽ റി-എൻകോഡ് ചെയ്‌ത്, പേജിന് പ്രിവ്യൂ ചെയ്യാനോ ഡൗൺലോഡ് ചെയ്യാനോ zip ചെയ്യാനോ കഴിയുന്ന ഒരു Blob നിങ്ങൾക്ക് കൈമാറുന്നു. ഓരോ ഘട്ടവും ടാബിന്റെ സാൻഡ്‌ബോക്‌സിനുള്ളിൽ ആയതിനാൽ, ഒറിജിനൽ ഫയലുകൾ ഒരിക്കലും നെറ്റ്‌വർക്കിൽ തൊടുന്നില്ല.

  1. അപ്‌ലോഡ് ചെയ്‌ത ഓരോ ഫയലും Blob ആക്കി വായിക്കുകയും ബ്രൗസർ ലോക്കലായി ഡീകോഡ് ചെയ്യാൻ ഒരു object URL ഉണ്ടാക്കുകയും ചെയ്യുന്നു — ബൈറ്റുകൾ സർവ്വറിലേക്ക് കോപ്പി ചെയ്യാതെയോ ഡിസ്‌കിലേക്ക് എഴുതാതെയോ.
  2. ഡീകോഡ് ചെയ്‌ത ഇമേജ് അതിന്റെ ഒറിജിനൽ പിക്‌സൽ ഡൈമൻഷനിൽ ഒരു offscreen Canvas എലമെന്റിൽ വരയ്ക്കുക, റി-എൻകോഡിംഗിന് തയ്യാറായി.
  3. പിക്‌സലുകൾ റി-എൻകോഡ് ചെയ്യാൻ canvas.toBlob(callback, mimeType, quality) വിളിക്കുക. ക്വാളിറ്റി മോഡിൽ സ്ലൈഡർ മൂല്യം നേരിട്ട് എൻകോഡറിന്റെ ക്വാന്റൈസേഷൻ സെറ്റിംഗിലേക്ക് മാപ്പ് ആകുന്നു; ടാർഗറ്റ്-സൈസ് മോഡിൽ ഔട്ട്‌പുട്ട് blob നിങ്ങളുടെ ബൈറ്റ് ബജറ്റിനുള്ളിൽ ഒതുങ്ങുന്നതുവരെ പേജ് ക്വാളിറ്റി മൂല്യം bisect ചെയ്യുന്നു.
  4. ഒറിജിനൽ സൈസ്, കംപ്രസ് ചെയ്‌ത സൈസ്, സേവിംഗ്‌സ് ശതമാനം എന്നിവ ഉൾപ്പെടുന്ന ബിഫോർ/ആഫ്റ്റർ റീഡൗട്ട് കാണിക്കുകയും, പിന്നെ ഓരോ ഇമേജിനും ഡൗൺലോഡ് ബട്ടൺ അല്ലെങ്കിൽ മൊത്തം ബാച്ചിന് ഒരൊറ്റ 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-ൽ തുടരുക.

നിങ്ങളുടെ ഇമേജുകൾ ഡ്രോപ്പ് ചെയ്യുക, ഒരു ക്വാളിറ്റി ലെവൽ അല്ലെങ്കിൽ ഒരു ടാർഗറ്റ് സൈസ് തിരഞ്ഞെടുക്കുക, കംപ്രസ് ചെയ്യുക. എല്ലാം നിങ്ങളുടെ ടാബിൽ പ്രവർത്തിക്കുന്നു. അപ്‌ലോഡ് ഇല്ല, അക്കൗണ്ട് ഇല്ല, സർവ്വർ ക്യൂവിന് കാത്തിരിപ്പ് ഇല്ല.