AI-നിർമ്മിത ഉള്ളടക്കത്തിനായുള്ള ഇമേജ് ഒപ്റ്റിമൈസേഷൻ
AI ചിത്രങ്ങൾ പ്രകടനപരമായി (performance) സവിശേഷമായ ഒരു പ്രശ്നം സൃഷ്ടിക്കുന്നു. ചിത്രം നിർമ്മിച്ചു കഴിയുന്നത് വരെ അതിന്റെ വലിപ്പം, ഫോർമാറ്റ് അല്ലെങ്കിൽ ഉള്ളടക്കം എന്നിവ നിങ്ങൾക്ക് അറിയില്ല. എങ്കിലും, പതുക്കെയുള്ള ലോഡിംഗും ലേഔട്ട് ഷിഫ്റ്റുകളും (layout shifts) തടയേണ്ടതുണ്ട്.
ഒരു സൗജന്യ AI ഇമേജ് ജനറേറ്റർ നിർമ്മിക്കുമ്പോൾ ഞാൻ ഈ ഘട്ടങ്ങളാണ് ഉപയോഗിച്ചത്.
സാധാരണ ഒപ്റ്റിമൈസേഷൻ രീതികളിൽ ചിത്രം മുൻകൂട്ടി അറിയാമെന്ന് കരുതുന്നു. നിങ്ങൾക്ക് അതിന്റെ അളവുകൾ (dimensions) കണക്കാക്കാനും ബിൽഡ് സമയത്ത് തന്നെ ഒപ്റ്റിമൈസ് ചെയ്യാനും സാധിക്കും. എന്നാൽ ജനറേറ്റഡ് ഇമേജുകൾ ഈ നിയമം ലംഘിക്കുന്നു. ഒരു ഉപയോക്താവ് ആവശ്യപ്പെടുന്നത് വരെ ആ ചിത്രം നിലവിലുണ്ടാവില്ല.
ഡെലിവറി എങ്ങനെ കൈകാര്യം ചെയ്യാം:
- AI-യിൽ നിന്നുള്ള നേരിട്ടുള്ള ഔട്ട്പുട്ട് സാധാരണയായി PNG ആയിരിക്കും. PNG ഫയലുകൾ വളരെ വലുതാണ്, പലപ്പോഴും 800KB മുതൽ 1.2MB വരെ വരാം.
- ചിത്രങ്ങൾ WebP-ലേക്ക് മാറ്റുക. ഒരേ ഗുണനിലവാരത്തിൽ തന്നെ PNG-യേക്കാൾ 25% മുതൽ 35% വരെ ചെറുതാണ് WebP ഫയലുകൾ.
- WebP-ക്ക് 85 ക്വാളിറ്റി ഉപയോഗിക്കുക. AI ചിത്രങ്ങളിൽ സ്വാഭാവികമായ ടെക്സ്ചർ നോയിസ് (texture noise) ഉണ്ടാകാറുണ്ട്. ഉയർന്ന സെറ്റിംഗുകൾ ഉപയോഗിക്കുന്നത് ദൃശ്യ ഗുണനിലവാരം വർദ്ധിപ്പിക്കാതെ തന്നെ ഫയൽ വലിപ്പം കൂട്ടുകയേ ഉള്ളൂ.
ലേഔട്ട് ഷിഫ്റ്റുകൾ എങ്ങനെ തടയാം:
ജനറേറ്റ് ചെയ്യുന്നതിന് മുമ്പ് ഉപയോക്താക്കൾ ഒരു ആസ്പെക്റ്റ് റേഷ്യോ (aspect ratio) തിരഞ്ഞെടുക്കുന്നുണ്ട്. ഇത് നിങ്ങളുടെ നേട്ടത്തിനായി ഉപയോഗിക്കുക.
- തിരഞ്ഞെടുത്ത റേഷ്യോ അടിസ്ഥാനമാക്കി (1:1, 16:9, മുതലായവ) കണ്ടെയ്നറിന്റെ വലിപ്പം മുൻകൂട്ടി നിശ്ചയിക്കുക.
- ചിത്രം വരുന്നതിന് മുമ്പ് തന്നെ കണ്ടെയ്നർ ശരിയായ വലിപ്പത്തിൽ നിലനിർത്താൻ ഇത് സഹായിക്കുന്നു.
- ഇത് കമ്മുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റ് (CLS) ഒഴിവാക്കുന്നു.
ലോഡിംഗ് വേഗത എങ്ങനെ വർദ്ധിപ്പിക്കാം:
ജനറേറ്റഡ് ചിത്രം സാധാരണയായി Largest Contentful Paint (LCP) എലമെന്റായിരിക്കും.
- നിങ്ങളുടെ കോഡിൽ ചിത്രത്തിന് മുൻഗണന (priority) നൽകുക.
- നിങ്ങളുടെ CDN-നായി ഒരു preconnect ലിങ്ക് ഉപയോഗിക്കുക. ഇത് DNS, TLS ഹാൻഡ്ഷേക്കുകൾ നേരത്തെ തന്നെ പൂർത്തിയാക്കാൻ സഹായിക്കുന്നു.
- ചിത്രം വരാൻ പോകുന്ന അതേ സ്ഥലം മുൻകൂട്ടി നികത്തുന്ന ഒരു സ്കെലിറ്റൺ ലോഡർ (skeleton loader) ഉപയോഗിക്കുക.
കാഷിംഗ് സ്ട്രാറ്റജി:
- ഇൻഫറൻസ് ലെയറിൽ (inference layer) കാഷ് ചെയ്യരുത്. ഓരോ റിക്വസ്റ്റും പുതിയതായിരിക്കണം.
- ഡെലിവറി വേഗതയ്ക്കായി CDN ലെയറിൽ കാഷ് ചെയ്യുക.
- ഓരോ ചിത്രത്തിനും ഒരു യുണീക് URL ഉള്ളതിനാൽ, അഗ്രസീവ് കാഷിംഗ് (aggressive caching) സുരക്ഷിതമാണ്.
ഈ മാറ്റങ്ങളുടെ ഫലങ്ങൾ:
- ശരാശരി വലിപ്പം: 900KB മുതൽ 200KB വരെ.
- LCP: 4.1s മുതൽ 1.9s വരെ.
- CLS: ഒഴിവാക്കപ്പെട്ടു.
പ്രവർത്തനങ്ങളുടെ സംഗ്രഹം:
- 85 ക്വാളിറ്റിയിൽ WebP-ലേക്ക് മാറ്റുക.
- തിരഞ്ഞെടുത്ത ആസ്പെക്റ്റ് റേഷ്യോ ഉപയോഗിച്ച് കണ്ടെയ്നറുകളുടെ വലിപ്പം മുൻകൂട്ടി നിശ്ചയിക്കുക.
- പ്രൈമറി ചിത്രത്തിന് പ്രയോറിറ്റി ലോഡിംഗ് നൽകുക.
- CDN തലത്തിൽ കൂടുതൽ കാഷിംഗ് നടത്തുക.
- 'below the fold' ആയ സെക്കൻഡറി ഉള്ളടക്കങ്ങൾക്ക് മാത്രം ലേസി ലോഡിംഗ് (lazy loading) ഉപയോഗിക്കുക.
Optional learning community: https://t.me/GyaanSetuAi