ഇമേജ് ഒപ്റ്റിമൈസേഷനും WebP അടിസ്ഥാനകാര്യങ്ങളും

വെബ്‌സൈറ്റ് പെർഫോമൻസിൽ ചിത്രങ്ങൾ നിർണായക പങ്ക് വഹിക്കുന്നു. WordPress പേജ് സ്പീഡ് കുറയ്ക്കുന്നതിൽ പ്രധാന കാരണം കോഡല്ല, മറിച്ച് ചിത്രങ്ങളാണെന്ന് പലപ്പോഴും ചൂണ്ടിക്കാണിക്കപ്പെടുന്നു. തങ്ങളുടെ വെബ്‌സൈറ്റ് ഒപ്റ്റിമൈസ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഏതൊരാൾക്കും WebP-യെ കുറിച്ച് മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്.

എന്തുകൊണ്ട് WebP വലിപ്പത്തിൽ ചെറുതാണ്: വ്യത്യസ്തമായ ഒരു കംപ്രഷൻ രീതി

1992 മുതൽ നിലവിലുള്ള JPEG, ഡിസ്ക്രീറ്റ് കോസൈൻ ട്രാൻസ്ഫോം (DCT) കംപ്രഷൻ എന്നൊരു രീതിയാണ് ഉപയോഗിക്കുന്നത്. ഈ രീതി മികച്ചതാണെങ്കിലും, 2010-ൽ Google അവതരിപ്പിച്ച WebP മറ്റൊരു സമീപനമാണ് സ്വീകരിക്കുന്നത്. VP8 വീഡിയോ കോഡെക്കിൽ നിന്നുള്ള ഇൻട്രാ-ഫ്രെയിം കംപ്രഷൻ സാങ്കേതികവിദ്യകളാണ് WebP ഉപയോഗിക്കുന്നത്. അതായത്, വീഡിയോ ഫ്രെയിമുകൾ കൈകാര്യം ചെയ്യുന്നതിന് സമാനമായി ഒരു ഫ്രെയിമിനുള്ളിലെ വിവരങ്ങൾ മാത്രം പരിശോധിച്ച് ഇത് ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യുന്നു.

ഈ വ്യത്യസ്തമായ രീതി കാരണം, കാഴ്ചയിൽ സമാനമായ ഗുണനിലവാരം നിലനിർത്തിക്കൊണ്ടുതന്നെ JPEG-നേക്കാൾ ചെറിയ ഫയൽ സൈസുകൾ നേടാൻ WebP-ക്ക് സാധിക്കുന്നു. ഒരു വെബ്‌സൈറ്റിൽ ചിത്രങ്ങൾ വേഗത്തിൽ ലോഡ് ചെയ്യുന്നതിന് ഇതൊരു വലിയ നേട്ടമാണ്.

WebP-യുടെ വൈവിധ്യങ്ങൾ

WebP-യുടെ മറ്റൊരു നേട്ടം അതിന്റെ വൈവിധ്യമാണ്. ഇത് പലതരം കംപ്രഷനുകളെ പിന്തുണയ്ക്കുന്നു:

• Lossy കംപ്രഷൻ: ഗുണനിലവാരത്തിൽ ചെറിയ തോതിലുള്ള കുറവ് സ്വീകാര്യമായ ഫോട്ടോഗ്രാഫുകൾക്ക് അനുയോജ്യം.
• Lossless കംപ്രഷൻ: ഗുണനിലവാരം നിർബന്ധമായും നിലനിർത്തേണ്ട ലോഗോകൾ, സ്ക്രീൻഷോട്ടുകൾ തുടങ്ങിയ ചിത്രങ്ങൾക്ക് ഏറ്റവും അനുയോജ്യം.
• Alpha-channel ട്രാൻസ്പരൻസി: PNG-ക്ക് സമാനമായി സുതാര്യമായ പശ്ചാത്തലം അനുവദിക്കുന്നു.
• ലളിതമായ ആനിമേഷൻ: GIF-കൾക്ക് സമാനമായി, എന്നാൽ പലപ്പോഴും ചെറിയ ഫയൽ സൈസുകളിൽ.

അതായത്, വിവിധ ആവശ്യങ്ങൾക്കായി വെവ്വേറെ ഫോർമാറ്റുകൾ ഉപയോഗിക്കുന്നതിന് പകരം (ഫോട്ടോകൾക്ക് JPEG, ട്രാൻസ്പരൻസിക്ക് PNG, ആനിമേഷനുകൾക്ക് GIF), ഇവയ്ക്കെല്ലാം കൂടി നിങ്ങൾക്ക് WebP ഉപയോഗിക്കാൻ സാധിക്കും.

ഏത് ഫോർമാറ്റ് നൽകണമെന്ന് ബ്രൗസറുകൾ എങ്ങനെ തീരുമാനിക്കുന്നു

WebP ആദ്യമായി അവതരിപ്പിച്ചപ്പോൾ എല്ലാ ബ്രൗസറുകളും ഇതിനെ പിന്തുണച്ചിരുന്നില്ല. ഇത് കൈകാര്യം ചെയ്യാൻ HTTP content negotiation എന്നൊരു രീതിയാണ് ഉപയോഗിച്ചിരുന്നത്. ഒരു ബ്രൗസർ ഒരു ചിത്രം അഭ്യർത്ഥിക്കുമ്പോൾ, അത് പിന്തുണയ്ക്കുന്ന ഫോർമാറ്റുകൾ ഏതെല്ലാമാണെന്ന് വ്യക്തമാക്കുന്ന ഒരു ഹെഡർ ഇതുപോലെ അയയ്ക്കുന്നു:

Accept: image/webp,image/*,*/*

തുടർന്ന് സെർവറിനോ Content Delivery Network-നോ (CDN) ഈ ഹെഡർ പരിശോധിക്കാൻ കഴിയും. ബ്രൗസർ WebP-യെ പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ, സെർവർ WebP പതിപ്പ് നൽകുന്നു; ഇല്ലെങ്കിൽ, അത് JPEG അല്ലെങ്കിൽ PNG-ലേക്ക് മാറുന്നു.

HTML-ൽ നേരിട്ട് ഏത് ഫോർമാറ്റാണ് ഉപയോഗിക്കേണ്ടതെന്ന് നിങ്ങൾക്ക് വ്യക്തമാക്കാനും കഴിയും. ഇതിനായി <picture> എലമെന്റ് ഉപയോഗിക്കുന്നത് ഒരു WebP സോഴ്സും ഫോൾബാക്ക് JPEG ചിത്രവും ഉൾപ്പെടുത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു:

<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Description">
</picture>

ഇതുവഴി, ബ്രൗസറിന് ഏറ്റവും നന്നായി മനസ്സിലാക്കാൻ കഴിയുന്ന ഫോർമാറ്റ് അത് സ്വയമേവ തിരഞ്ഞെടുക്കും.

നിലവിൽ, Chrome, Firefox, Edge, Safari തുടങ്ങിയ പ്രമുഖ ബ്രൗസറുകളെല്ലാം WebP-യെ പിന്തുണയ്ക്കുന്നുണ്ട്. ഈ വ്യാപകമായ പിന്തുണ ആധുനിക വെബ് ഡെവലപ്‌മെന്റിൽ ഇതിനെ ഒരു വിശ്വസനീയമായ തെരഞ്ഞെടുപ്പാക്കി മാറ്റുന്നു.

WordPress-ലെ WebP പിന്തുണ

WordPress ക്രമേണ WebP-യെ സ്വീകരിച്ചു. വേർഷൻ 5.8-ന് മുമ്പ്, ഒരു WebP ഫയൽ അപ്‌ലോഡ് ചെയ്യാൻ ശ്രമിച്ചാൽ അതൊരു എറർ മെസ്സേജിൽ കലാശിക്കുമായിരുന്നു. എന്നാൽ, WordPress 5.8 പുറത്തിറങ്ങിയതോടെ, മീഡിയ ലൈബ്രറിയിൽ അനുവദനീയമായ ഒരു ഫോർമാറ്റായി WebP ഫയലുകൾ മാറി.

പിന്നീട് വന്ന WordPress പതിപ്പുകൾ ഒരു JPEG അപ്‌ലോഡ് ചെയ്യുമ്പോൾ അനുബന്ധ ഇമേജ് സൈസുകളെ (തംബ്‌നെയിലുകൾ പോലുള്ളവ) സ്വയമേവ WebP-യിലേക്ക് മാറ്റിക്കൊണ്ട് ഇതിനെ കൂടുതൽ വിപുലമാക്കി. ഇതിനർത്ഥം ഒറിജിനൽ JPEG ഫയൽ മാറ്റമില്ലാതെ തുടരുമെങ്കിലും, പോസ്റ്റുകളിൽ ഉപയോഗിക്കുന്ന ചെറിയ സൈസുകൾ WebP ആകാം. ഇത് പേജ് ലോഡ് ചെയ്യുമ്പോൾ കൈമാറ്റം ചെയ്യപ്പെടുന്ന ഡാറ്റയുടെ അളവ് കുറയ്ക്കുന്നു.

എന്നിരുന്നാലും, ഈ പരിവർത്തനം നടക്കുമോ എന്നത് സെർവറിന്റെ ഇമേജ് പ്രോസസ്സിംഗ് ലൈബ്രറിയെ ആശ്രയിച്ചിരിക്കുന്നു. എല്ലാ ഹോസ്റ്റിംഗ് സാഹചര്യങ്ങളും WebP ഔട്ട്പുട്ടിനെ പിന്തുണയ്ക്കണമെന്നില്ല.

ഉപസംഹാരം

ചെറിയ ഫയൽ സൈസുകൾ നൽകിക്കൊണ്ടും വിവിധ ആവശ്യങ്ങളെ പിന്തുണച്ചുകൊണ്ടും ഇമേജ് ഒപ്റ്റിമൈസേഷന് ആധുനികമായ ഒരു പരിഹാരം WebP വാഗ്ദാനം ചെയ്യുന്നു. ബ്രൗസറുകളിലും WordPress പോലുള്ള പ്ലാറ്റ്‌ഫോമുകളിലും ഇതിനുള്ള വർദ്ധിച്ചുവരുന്ന പിന്തുണയോടെ, പെർഫോമൻസ് മെച്ചപ്പെടുത്താൻ ആഗ്രഹിക്കുന്ന വെബ് ഡെവലപ്പർമാർക്കും സൈറ്റ് ഉടമകൾക്കും ഇതൊരു മികച്ച തെരഞ്ഞെടുപ്പാണ്.

മേന്മകൾ

• JPEG, PNG എന്നിവയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ചെറിയ ഫയൽ സൈസുകൾ.
• വിവിധ ഉപയോഗങ്ങളെ പിന്തുണയ്ക്കുന്നു (lossy, lossless, transparency, animation).
• ആധുനിക ബ്രൗസറുകളുടെ വ്യാപകമായ പിന്തുണ.

പോരായ്മകൾ

• ചില പഴയ ബ്രൗസറുകളും സിസ്റ്റങ്ങളും WebP-യെ പിന്തുണച്ചേക്കില്ല.
• WordPress-ൽ സ്വയമേവയുള്ള പരിവർത്തനത്തിന് സെർവർ അനുയോജ്യത ആവശ്യമാണ്.

ശ്രദ്ധിക്കുക

ഈ ലേഖനം വിദ്യാഭ്യാസപരമായ ആവശ്യങ്ങൾക്കുള്ളതാണ്. പ്രാവർത്തികമാക്കുമ്പോൾ ഏതൊരു പ്ലേസ്‌ഹോൾഡർ മൂല്യങ്ങളും യഥാർത്ഥ ഡാറ്റ ഉപയോഗിച്ച് മാറ്റണം. ആശ്രയിക്കുന്നതിന് മുമ്പ് എപ്പോഴും യഥാർത്ഥ ഉറവിടങ്ങളുമായി വിവരങ്ങൾ ഒത്തുനോക്കി ഉറപ്പുവരുത്തുക.

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ

• എന്താണ് WebP? — ഗുണനിലവാരം നിലനിർത്തിക്കൊണ്ടുതന്നെ ചെറിയ ഫയൽ സൈസ് നൽകുന്നതിനായി Google വികസിപ്പിച്ചെടുത്ത ഒരു ആധുനിക ഇമേജ് ഫോർമാറ്റാണ് WebP.
• JPEG-ന് പകരം WebP ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ട്? — സമാനമായ ഗുണനിലവാരത്തിന് JPEG-നേക്കാൾ ചെറിയ ഫയൽ സൈസ് WebP സാധാരണയായി വാഗ്ദാനം ചെയ്യുന്നു, ഇത് വെബ് പെർഫോമൻസിന് കൂടുതൽ അനുയോജ്യമാക്കുന്നു.
• ബ്രൗസറുകൾ WebP-യെ എങ്ങനെയാണ് പിന്തുണയ്ക്കുന്നത്? — ഒട്ടുമിക്ക പ്രമുഖ ബ്രൗസറുകളും WebP-യെ പിന്തുണയ്ക്കുന്നുണ്ട്, കൂടാതെ അവയുടെ ശേഷിക്കനുസരിച്ച് ഏത് ഫോർമാറ്റാണ് നൽകേണ്ടതെന്ന് തീരുമാനിക്കാൻ അവയ്ക്ക് സാധിക്കും.
• WordPress-ൽ WebP ഇമേജുകൾ ഉപയോഗിക്കാൻ കഴിയുമോ? — അതെ, WordPress 5.8 മുതൽ മീഡിയ ലൈബ്രറിയിൽ WebP ചിത്രങ്ങൾ അപ്‌ലോഡ് ചെയ്യാനും ഉപയോഗിക്കാനും സാധിക്കും.
• WebP-യുടെ നേട്ടങ്ങൾ എന്തൊക്കെയാണ്? — lossy, lossless കംപ്രഷനുകൾ, ട്രാൻസ്പരൻസി, ലളിതമായ ആനിമേഷനുകൾ എന്നിവയെല്ലാം ഒരൊറ്റ ഫോർമാറ്റിൽ WebP പിന്തുണയ്ക്കുന്നു.
• WebP ഉപയോഗിക്കുന്നതിൽ എന്തെങ്കിലും പോരായ്മകൾ ഉണ്ടോ? — ചില പഴയ സിസ്റ്റങ്ങൾ WebP-യെ പിന്തുണച്ചേക്കില്ല, അതിനാൽ ഫോൾബാക്ക് ഓപ്ഷനുകൾ ആവശ്യമായി വന്നേക്കാം.

ടാഗുകൾ

#wordpress #webp #imageoptimization #webdevelopment #compression #browsers #performance #images #tech #tutorial