ഇമേജ് വലിപ്പം മാറ്റുക _

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

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

1. അപ്‌ലോഡ് ചെയ്‌ത ഓരോ ഫയലും Blob ആക്കി വായിക്കുകയും ബ്രൗസർ ലോക്കലായി ഡീകോഡ് ചെയ്യാൻ ഒരു object URL ഉണ്ടാക്കുകയും ചെയ്യുന്നു — ബൈറ്റുകൾ സർവ്വറിലേക്ക് അയക്കുന്നില്ല.
2. നിങ്ങൾ ഏർപ്പെടുത്തിയ മോഡ് അനുസരിച്ച് ലക്ഷ്യ അളവ് നിർണ്ണയിക്കുന്നു — ദൈർഘ്യ പരിധി, കൃത്യ വലിപ്പം, അല്ലെങ്കിൽ ശതമാനം. അനുപാതം ലോക്ക് ഒരു ഫീൽഡ് മാറ്റുമ്പോൾ അനുപാതം ശരിയായി നിലനിർത്തുന്നു.
3. ലക്ഷ്യ വലിപ്പത്തിൽ offscreen Canvas ഉണ്ടാക്കി ഡീകോഡ് ചെയ്‌ത പിക്‌സലുകൾ തിരിച്ചു വരയ്ക്കാൻ ctx.drawImage(source, 0, 0, width, height) ഉപയോഗിക്കുന്നു. ബ്രൗസർ ഇന്റർ‌പോളേഷൻ ചെയ്‌ത് സ്കേൽ ചെയ്‌ത ഫലം മൃദുവാക്കുന്നു.
4. സോഴ്‌സ് ഫോർമാറ്റിൽ റി-എൻകോഡ് ചെയ്യാൻ canvas.toBlob ഉപയോഗിക്കുന്നു. PNG ലോസ്‌ലെസ് ആണ്; JPEG, WebP ഉയർന്ന ക്വാളിറ്റിയിൽ റി-എൻകോഡ് ആകുന്നു. പേജ് ബിഫോർ/ആഫ്റ്റർ കാർഡ് കാണിക്കുകയും ഇമേജ് ഡൗൺലോഡ് ബട്ടൺ അല്ലെങ്കിൽ fflate ഉപയോഗിച്ച് മെമ്മറിയിൽ ഉണ്ടാക്കിയ ZIP ഓഫർ ചെയ്യുകയും ചെയ്യുന്നു.

ഇമേജ് വലിപ്പം മാറ്റേണ്ടത് എന്തുകൊണ്ട്?

• അമിത വലിപ്പ ഇമേജ് ആണ് പേജ് മന്ദഗതിക്ക് ഏറ്റവും കൂടുതൽ കാരണം. 600 പിക്‌സൽ ലേഔട്ടിൽ 4000×3000 ഫോൺ ഫോട്ടോ ഇടുമ്പോൾ, സ്‌ക്രീൻ കാണിക്കാൻ കഴിയുന്നതിന്റെ 40 ഇരട്ടി പിക്‌സൽ ഷിപ്പ് ചെയ്യുന്നു. അപ്‌ലോഡ് ചെയ്യുന്നതിന് മുൻപ് ദൈർഘ്യ വശം 1600 px ആക്കിയാൽ Core Web Vitals LCP നേരിട്ട് മെച്ചപ്പെടും.
• അപ്‌ലോഡ് ഫോം കഠിന അളവ് ആവശ്യപ്പെടുന്നു. അവതാർ, ID ഫോട്ടോ പോർട്ടൽ, മാർക്കറ്റ്‌പ്ലേസ് ലിസ്റ്റിംഗ്, OG കാർഡ് ഒക്കെ നിർദ്ദിഷ്ട പിക്‌സൽ വലിപ്പം ആവശ്യപ്പെടുന്നു: Open Graph-ന് 1200×630, ആപ്പ് ഐക്കണിന് 512×512, തംബ്‌നെയിലിന് 150×150. ശരി അളവ് ഇടുകയാണ് rejected-upload ലൂപ്പ് ഒഴിവാക്കൽ.
• ഇമെയിൽ, ചാറ്റ് ടൂളുകൾ വലിയ ഫയൽ നിശ്ശബ്ദമായി ചുരുക്കുന്നു — ഒരു ശുദ്ധ സ്‌ക്രീൻഷോട്ട് നശിക്കും. സ്വയം ഒരു ന്യായ വലിപ്പത്തിൽ മാറ്റിയാൽ, മറ്റൊരാളുടെ lossy പൈപ്പ്‌ലൈനിൽ ഏൽപ്പിക്കുന്നതിനേക്കാൾ ഫലം ഊഹിക്കാൻ കഴിയും.
• ഗ്യാലറിക്കും കാറ്റലോഗിനും ബാച്ച് ഏകരൂപം ആവശ്യം. മിക്‌സ്ഡ്-സൈസ് ഫോട്ടോ ഫോൾഡർ 800×800-ലേക്ക് ബാച്ച് ചെയ്‌താൽ ഗ്രിഡ് ഒത്ത് നിൽക്കും, ഒരു ഫോട്ടോ ലേഔട്ട് തകർക്കില്ല.

സാധാരണ ഉപയോഗങ്ങൾ

ഉറവിട അളവും ഡെസ്റ്റിനേഷൻ ആവശ്യകതകളും ചേരാത്തപ്പോൾ റീസൈസ് ആവശ്യമാകുന്നു. ഇതിൽ ആവർത്തിക്കുന്ന മൂന്ന് പാറ്റേണുകൾ.

• Shopify അല്ലെങ്കിൽ WooCommerce സ്‌റ്റോറിനായി ഉൽപ്പന്ന ഫോട്ടോകൾ ഒരുക്കൽ. 4000 പിക്‌സൽ ക്യാമറ ഒറിജിനൽ 1600 px ദൈർഘ്യ വശത്തിലേക്ക് ക്യാപ്‌ ചെയ്‌ത്, സ്‌റ്റോർ ഫ്രണ്ടിന്റെ വേഗം കൂട്ടുന്നു, നിഷ്‌പ്രഭ ലുക്ക് ഒഴിവാക്കി.
• ഒരൊറ്റ മാസ്റ്റർ ഫയലിൽ നിന്ന് സോഷ്യൽ, ആപ്പ് അസ്‌സെറ്റ് ഉണ്ടാക്കൽ. Open Graph-ന് 1200×630, ആപ്പ് ഐക്കണിന് 512×512, ഭാരമുള്ള എഡിറ്റർ തുറക്കാതെ ഒരു ക്ലിക്കിൽ ഓരോ ഇമേജ് ആക്കൽ.
• ടിക്കറ്റ് ലിങ്ക്ഡ് ചെയ്യുന്നതിന് മുൻപ് QA/സ്‌പോർ‌ട്ട് സ്‌ക്രീൻഷോട്ട് ബാച്ച് ചുരുക്കൽ. 50-ഷോട്ട് ഫോൾഡർ 50%-ലേക്ക് സ്കേൽ ചെയ്‌താൽ ആർക്കൈവ് വലിപ്പം ഏകദേശം മൂന്നു ഭാഗം കുറയുന്നു.

ഒരു ഉദാഹരണം: 4000 px ഫോട്ടോ — 1600 px വെബ് ഇമേജ്

ഫോണിൽ നിന്ന് നേരിട്ടുള്ള 4000×3000 ഫോട്ടോ ഏത് വെബ് ലേഔട്ടിനും അനാവശ്യ ഭാരം. ഇത് റീസൈസ് ലാഭം അളക്കാൻ നല്ല ബെഞ്ച്‌മാർക്ക് ആണ്.

ഫോട്ടോ അപ്‌ലോഡ് സോണിൽ ഡ്രോപ്പ് ചെയ്‌ത്, മോഡ് ദൈർഘ്യ വശം പരിമിതം ആക്കി, 1600 നൽകൂ. Canvas പൈപ്പ്‌ലൈൻ 1600×1200-ൽ അനുപാതം സൂക്ഷിച്ച് ഇമേജ് വരയ്ക്കുകയും അസലു ഫോർമാറ്റിൽ റി-എൻകോഡ് ചെയ്യുകയും ചെയ്യുന്നു. ഔട്ട്‌പുട്ട് കാർഡ് ഫലം കാണിക്കും — ഒരു സാധാരണ JPEG ഏതാനും MB-ൽ നിന്ന് ഏതാനും നൂറ് KB-ലേക്ക് കുറയും. ഒരൊറ്റ ഫയലിന് Download ക്ലിക്ക് ചെയ്യുക, ബാച്ചിന് Download .zip ക്ലിക്ക് ചെയ്യുക. ഈ സൈസ് ഇമേജിന് ഡ്രോപ്പ് മുതൽ ഡൗൺലോഡ് വരെ ഒരു സെക്കൻഡിൽ കുറഞ്ഞ സമയം, ശൂന്യ ബാൻഡ്‌വിഡ്ത്ത്.

ഏതൊക്കെ റീസൈസ് മോഡ് ഉണ്ട്?

മൂന്ന്. ദൈർഘ്യ വശം പരിമിതം ഏറ്റവും ദൈർഘ്യം കൂടിയ വശം ഒരു പിക്‌സൽ മൂല്യത്തിൽ ക്യാപ്പ് ചെയ്‌ത് മറ്റേ വശം സ്കേൽ ചെയ്യുന്നു — ഇത് ഒരിക്കലും ഇമേജ് വക്രിക്കില്ല, അതിനാൽ ഡിഫോൾട്ട് ആണ്. കൃത്യ വീതി × ഉയരം രണ്ടു മൂല്യവും ടൈപ്പ് ചെയ്യാൻ അനുമതി നൽകുന്നു, ആദ്യ ഫീൽഡ് മാറ്റുമ്പോൾ രണ്ടാമത്തേത് സോഴ്‌സ് അനുപാതത്തിൽ നിന്ന് കണക്കാക്കുന്ന ലോക്കോടെ — ഫോം കൃത്യ അ‌-പ്രൊപ്പോർഷനൽ വലിപ്പം ചോദിക്കുമ്പോൾ ലോക്ക് ഓഫ് ചെയ്യുക. ശതമാനം രണ്ടു അളവും ഒരേ ഫ്യാക്ടർ കൊണ്ട് ഗുണിക്കുന്നു — ബാച്ച് ഒന്നടക്കം പകുതിയോ ഇരട്ടിയോ ആക്കാൻ ഉപകാരം. ആറ് ഒറ്റ ക്ലിക്ക് പ്രിസെറ്റ് (1920×1080 മുതൽ 150×150 തംബ്‌നെയിൽ) ഏറ്റവും കൂടുതൽ ആവശ്യപ്പെടുന്ന ലക്ഷ്യ വലിപ്പ ക്കൾ ഉൾക്കൊള്ളുന്നു.

ഇത് ഉപകരണത്തിൽ തന്നെ ആകുമോ?

അതെ, പൂർണ്ണമായും. ബ്രൗസറിന്റെ Canvas API, Web File API ഉപയോഗിച്ച് ഓരോ ഇമേജും മെമ്മറിയിൽ ഡീകോഡ്, ഡ്രോ, റി-എൻകോഡ് ചെയ്യുന്നു. ഇമേജ് ഡേറ്റ സർവ്വറിലേക്ക് അയക്കുന്നില്ല. DevTools-ൽ Network panel ഓൺ ആക്കി ഒരു റീസൈസ് ചെയ്‌ത് സ്വയം ഉറപ്പിക്കാം. സ്‌ക്രീൻഷോട്ടുകൾ, മെഡിക്കൽ ഇമേജ്, ആധാർ തുടങ്ങിയ സ്വകാര്യ ഡോക്യുമെന്റ് — ഒന്നും ടാബ് വിടുന്നില്ല.

റീസൈസ് ക്വാളിറ്റി കുറക്കുമോ?

ചെറുതാക്കൽ (ഡൗൺ‌സ്കേൽ) ഉദ്ദേശ്യ വ്യക്തതയോടെ ഫലം നൽകുന്നു — ബ്രൗസർ സോഴ്‌സ് പിക്‌സൽ ശരാശരി ചെയ്‌ത് കുറഞ്ഞ പിക്‌സലിൽ ഒതുക്കുന്നു, ഫയൽ ഗണ്യമായി ചെറുതാകുന്നു. ഒറിജിനൽ റെസ്സൊ ‌ ലൂഷ്യൻ കടന്ന് വലുതാക്കൽ (അപ്‌സ്കേൽ) ഇല്ലാത്ത ഡീറ്റെ ‌ ൽ ഉണ്ടാക്കില്ല — ഇത് ഓരോ റീസൈസറിന്റെയും പരിധി, ഇതിന്റെ മാത്രമല്ല. PNG ലോസ്‌ലെസ് ആണ്; JPEG, WebP ഉയർന്ന ക്വാളിറ്റി സെറ്റിംഗിൽ റി-എൻകോഡ് ആകുന്നു.

ഏതൊക്കെ ഫോർമാറ്റ് പിന്തുണക്കുന്നു?

ഇൻപുട്ടിൽ ബ്രൗസർ ഡീകോഡ് ചെയ്യാൻ കഴിയുന്ന ഏത് ഫോർമാറ്റും — PNG, JPEG, WebP, GIF, BMP. Canvas encoder സപ്പോർട്ടുള്ള ഫോർമാറ്റ് അതേ പടി ഒറിജിനൽ ഫോർമാറ്റിൽ ഔട്ട്‌പുട്ട് ആകുന്നു. GIF, BMP ഡീകോഡ് ആകുമെങ്കിലും Canvas അവ റി-എൻകോഡ് ചെയ്യില്ല, അതിനാൽ ലോസ്‌ലെസ് PNG ആക്കി സേവ് ചെയ്യുന്നു. ഫൈൽ നേം-ൽ കൊലത്തലം ഉൾക്കൊള്ളുന്നു (ഉദാ. photo-1600x1200.jpg), ബാച്ച് സോർട്ട് എളുപ്പം.

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