റാങ്ക് എഞ്ചിൻ
ഇത് നിങ്ങൾക്കും സംഭവിച്ചിട്ടുണ്ടാകാം. Shopify-യിൽ ഒരു ഉൽപ്പന്ന പേജ് മിനുസപ്പെടുത്തിയതായി കാണപ്പെടുന്നു, എഡിറ്ററിൽ ഫോട്ടോകൾ മൂർച്ചയുള്ളതാണ്, തുടർന്ന് നിങ്ങളുടെ PageSpeed സ്കോർ അറുപതുകളിൽ സ്ഥിരമായി ഇരിക്കുമ്പോൾ മൊബൈൽ സന്ദർശകർ ബൗൺസ് ചെയ്യാൻ തുടങ്ങുന്നു. സാധാരണയായി പ്രശ്നം "മോശം ഡിസൈൻ" അല്ല. ലേഔട്ടിന് ചിത്ര ഫയൽ വലുപ്പങ്ങൾ വളരെ ഭാരമുള്ളതാണ്, കൂടാതെ ഒരു ഷോപ്പർ ഉൽപ്പന്നം, വില അല്ലെങ്കിൽ ആഡ്-ടു-കാർട്ട് ബട്ടൺ കാണുന്നതിന് മുമ്പ് ഓരോ അധിക ബൈറ്റും സഞ്ചരിക്കേണ്ടതുണ്ട്.
അതുകൊണ്ടാണ് ഒരു സ്റ്റോറിന്റെ മുൻവശത്ത് എടുക്കുന്ന ഇമേജ് തീരുമാനങ്ങൾ ഒരിക്കലും വെറും ഡിസൈൻ തീരുമാനങ്ങളല്ല. അവ പേജ് വേഗത , ദൃശ്യ നിലവാരം , Google-ന് ക്രാൾ ചെയ്യാനും റെൻഡർ ചെയ്യാനും കഴിയുന്ന പേജിന്റെ എത്രത്തോളം ഭാഗത്തെ ബാധിക്കുന്നു. ഊഹിക്കാതെ വലുപ്പം മാറ്റുന്നതിനുള്ള ഒരു പ്രായോഗിക കുറുക്കുവഴി നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, യാസിൻ മാൾട്ടിയുടെ ഇമേജ് വലുപ്പം മാറ്റൽ ഗൈഡ് നിങ്ങൾക്ക് ഉപയോഗപ്രദമായ ഒരു കൂട്ടാളിയാണ്, കാരണം അടുത്ത ബാച്ച് അപ്ലോഡ് ചെയ്യുന്നതിന് മുമ്പ് മെക്കാനിക്സ് മനസ്സിലാക്കാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു.
ഉള്ളടക്ക പട്ടിക
- ഒരു ഷോപ്പിഫൈ സ്റ്റോറിൽ ചിത്ര ഫയൽ വലുപ്പങ്ങൾ എന്തുകൊണ്ട് പ്രധാനമാണ്
- ചിത്രത്തിന്റെ വലിപ്പവും ഫയൽ വലുപ്പവും, രണ്ടും പ്രധാനമാകുന്നത് എന്തുകൊണ്ട്?
- JPEG, PNG, WebP, AVIF എന്നിവയുടെ താരതമ്യം
- റെസല്യൂഷനും കംപ്രഷനും സംഖ്യകളെ എങ്ങനെ മാറ്റുന്നു
- കോർ വെബ് വൈറ്റലുകളും ഹെവി ഇമേജുകളുടെ SEO ചെലവും
- Shopify പ്ലേസ്മെന്റ് അനുസരിച്ച് ചിത്ര ഫയൽ വലുപ്പങ്ങൾ ടാർഗെറ്റ് ചെയ്യുക
- സ്റ്റോറുകൾ മന്ദഗതിയിലാക്കുന്ന സാധാരണ തെറ്റിദ്ധാരണകൾ
- നിങ്ങളുടെ അടുത്ത ചിത്ര ബാച്ചിനായി ആവർത്തിക്കാവുന്ന ഒരു ചെക്ക്ലിസ്റ്റ്
ഒരു ഷോപ്പിഫൈ സ്റ്റോറിൽ ചിത്ര ഫയൽ വലുപ്പങ്ങൾ എന്തുകൊണ്ട് പ്രധാനമാണ്
ഷോപ്പിഫൈ അഡ്മിലെ പോളിഷ് ചെയ്ത ഉൽപ്പന്ന പേജ് നോക്കിയാലും ഒരു വ്യാപാരിക്ക് അടിസ്ഥാന പ്രശ്നം മനസ്സിലാകില്ല. വൈ-ഫൈ വഴി ലാപ്ടോപ്പിൽ പേജ് നന്നായി തോന്നിയേക്കാം, തുടർന്ന് മൊബൈലിൽ തങ്ങിനിൽക്കാം, ഹീറോ ഇമേജ് വൈകി ദൃശ്യമാകും, പേജ് തയ്യാറാണെന്ന് തോന്നുന്നതിന് മുമ്പ് ഷോപ്പർ ഫോൾഡിന് മുകളിലൂടെ സ്ക്രോൾ ചെയ്തേക്കാം. നന്നായി കാണപ്പെടുന്ന ഒരു പേജും വേഗത്തിൽ ലോഡുചെയ്യുന്ന ഒരു പേജും തമ്മിലുള്ള വിടവാണ് ചിത്ര ഫയൽ വലുപ്പങ്ങൾ ഒരു സന്ദർശനം വരുമാനമോ സംഘർഷമോ ആകണോ എന്ന് തീരുമാനിക്കുന്നത്.
എല്ലാ പേജിലും ഒളിഞ്ഞിരിക്കുന്ന മത്സരം
ഒരു കടയുടെ മുൻവശത്തുള്ള ഓരോ ചിത്രവും പകർപ്പ്, സ്ക്രിപ്റ്റുകൾ, സ്കീമ, ഉപഭോക്താവിന്റെ ക്ഷമ എന്നിവയുമായി മത്സരിക്കുന്നു. ഹീറോ ഫോട്ടോയുടെ വലുപ്പം വളരെ വലുതാണെങ്കിൽ, അത് ബാൻഡ്വിഡ്ത്ത് മാത്രമല്ല കഴിക്കുന്നത്, സന്ദർശകന് ഓഫർ വിലയിരുത്താൻ കഴിയുന്ന നിമിഷത്തെ അത് മന്ദഗതിയിലാക്കുന്നു. ഇമേജ് വെയ്റ്റ് ഒരേ സമയം ഒരു കൺവേർഷൻ ചോദ്യവും ഒരു കോർ വെബ് വൈറ്റൽസ് ചോദ്യവുമാണ്.
ഷോപ്പിഫൈ വ്യാപാരികൾ സാധാരണയായി ഉൽപ്പന്ന പേജുകളിലും കളക്ഷൻ പേജുകളിലും ഇത് ആദ്യം അനുഭവിക്കുന്നു. കുറച്ച് വലിയ ഫോട്ടോകൾ മുഴുവൻ ലേഔട്ടിനെയും ഭാരമുള്ളതായി തോന്നിപ്പിക്കും, പ്രത്യേകിച്ച് മൊബൈൽ നെറ്റ്വർക്കുകളിൽ, ആ ഭാരം ഏറ്റവും പ്രധാനപ്പെട്ട സ്ഥലങ്ങളിൽ, ഹീറോ, കളക്ഷൻ ഗ്രിഡ്, ഉൽപ്പന്ന സൂം, തംബ്നെയിലുകൾ എന്നിവയിൽ ദൃശ്യമാകും. ഒരു ഹീറോ ഇമേജിന് ഒരു തംബ്നെയിലിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ജോലിയുണ്ട്, അതിനാൽ അത് ഒരേ ഫയൽ-സൈസ് ഭാരം വഹിക്കരുത്. ആവർത്തിച്ചുള്ള ചിത്രങ്ങൾ വേഗത്തിൽ അടുക്കി വയ്ക്കുകയും ഓരോ സ്ക്രോളിലും ശിക്ഷിക്കുകയും ചെയ്യുന്ന കളക്ഷൻ ഗ്രിഡുകൾക്കും ഇത് ബാധകമാണ്.
പേജ് എത്ര വേഗത്തിൽ ഉപയോഗയോഗ്യമാകുന്നു എന്നതിനെ ചിത്ര ഫയൽ വലുപ്പം ബാധിക്കുന്നു, അതുകൊണ്ടാണ് ലേഔട്ട് പ്ലാനിംഗിന്റെ അതേ സംഭാഷണത്തിൽ ഇത് ഉൾപ്പെടുന്നത്. റോ ഇമേജ് അളവുകൾ പ്രധാനമാണ്, പക്ഷേ ഡെലിവറി ചെയ്യാവുന്ന ഫയൽ വലുപ്പമാണ് ബ്രൗസർ ലഭ്യമാക്കി ഡീകോഡ് ചെയ്യേണ്ടത്. യാസിൻ മാൾട്ടിയുടെ ഇമേജ് റീസൈസിംഗ് ഗൈഡിൽ വിശദീകരിച്ചതുപോലെ, ഒരു ചെറിയ കയറ്റുമതിക്ക് അനാവശ്യമായ ഭാരം നീക്കം ചെയ്യുമ്പോൾ ചിത്രത്തിന്റെ ദൃശ്യ പങ്ക് സംരക്ഷിക്കാൻ കഴിയും.
പ്രായോഗിക പ്രതിഫലം.
ഇത് പ്രധാനമാകാനുള്ള കാരണം ലളിതമാണ്. അടിസ്ഥാന പിക്സൽ എണ്ണം അടിസ്ഥാനരേഖ സജ്ജമാക്കുന്നു, കംപ്രഷനും ഫോർമാറ്റും അന്തിമ ഫയൽ വലുപ്പം തീരുമാനിക്കുന്നു. 24-ബിറ്റ് RGB-യിലുള്ള ഒരു 24-മെഗാപിക്സൽ ഇമേജിൽ ഏകദേശം 72 ദശലക്ഷം ബൈറ്റുകൾ റോ പിക്സൽ ഡാറ്റ അടങ്ങിയിരിക്കുന്നു, അതേസമയം അതേ ഇമേജിന് 100% ഗുണനിലവാരത്തിൽ JPEG ആയി ഏകദേശം 423.41 KB അല്ലെങ്കിൽ കയറ്റുമതി തിരഞ്ഞെടുപ്പുകളെ ആശ്രയിച്ച് JPEG 90% ഗുണനിലവാരത്തിൽ ഏകദേശം 211.7 KB ലാൻഡ് ചെയ്യാൻ കഴിയും ( Scantips ). ആ വിടവ് കൊണ്ടാണ് രണ്ട് സ്റ്റോറുകൾക്ക് ഏതാണ്ട് സമാനമായി കാണപ്പെടുന്നതും വളരെ വ്യത്യസ്തമായ വേഗത ഫലങ്ങൾ ലഭിക്കുന്നതുമായ ചിത്രങ്ങൾ ഉപയോഗിക്കാൻ കഴിയുന്നത്.
പ്രായോഗിക നിയമം: ഒരു ചിത്രം അലങ്കാരത്തേക്കാൾ വിൽപ്പനയ്ക്കാണ് പ്രധാനമെങ്കിൽ, അപ്ലോഡ് ചെയ്യുന്നതിന് മുമ്പ് അതിന് ഒരു ഫയൽ വലുപ്പ ലക്ഷ്യം നൽകുക.
അതാണ് വ്യാപാരികൾ ഉപയോഗിക്കേണ്ട സ്റ്റാൻഡേർഡ്. ഓരോ സ്റ്റോർഫ്രണ്ട് സ്ലോട്ടിനും ഒരു ബജറ്റ് സജ്ജമാക്കുക, തുടർന്ന് ഫയൽ ജോലിയുമായി പൊരുത്തപ്പെടുത്തുക. ഒരു ഹീറോ ബാനറിന് ഒരു തംബ്നെയിലിനേക്കാൾ കൂടുതൽ ഭാരം ന്യായീകരിക്കാൻ കഴിയും, എന്നാൽ ബാക്കിയുള്ള പേജ് അധിക ലഗേജ് കൊണ്ടുപോകാൻ നിർബന്ധിക്കരുത്. ആ ശീലം നിലവിൽ വന്നുകഴിഞ്ഞാൽ, ഉൽപ്പന്ന പേജുകൾ കൈകാര്യം ചെയ്യാൻ എളുപ്പമാണ്, കൂടാതെ ഓരോ പുതിയ അപ്ലോഡും മറ്റൊരു മറഞ്ഞിരിക്കുന്ന വലിച്ചിടലായി മാറുന്നതിനുപകരം യോജിക്കാൻ ഒരു സ്ഥലമുണ്ട്.
ചിത്രത്തിന്റെ വലിപ്പവും ഫയൽ വലുപ്പവും, രണ്ടും പ്രധാനമാകുന്നത് എന്തുകൊണ്ട്?
വ്യാപാരികൾ പലപ്പോഴും ഈ പദങ്ങൾ ഒരേ കാര്യം അർത്ഥമാക്കുന്നതുപോലെ ഉപയോഗിക്കുന്നു, തുടർന്ന് അഡ്മിനിൽ ഒരു ചിത്രം നന്നായി കാണപ്പെടുന്നതും സ്റ്റോർഫ്രണ്ടിന്റെ വേഗത കുറയ്ക്കുന്നതും എന്തുകൊണ്ടാണെന്ന് അവർ ആശ്ചര്യപ്പെടുന്നു. ചിത്രത്തിന്റെ വലുപ്പം പിക്സൽ അളവുകളാണ്, വീതി ഉയരത്തിനനുസരിച്ച്. ഫയൽ വലുപ്പം എന്നത് ഡിസ്കിലെ ബൈറ്റുകളിൽ കയറ്റുമതി ചെയ്ത ഫയലിന്റെ ഭാരം, സാധാരണയായി KB അല്ലെങ്കിൽ MB, ഇത് കംപ്രഷൻ, ഫോർമാറ്റ്, ബിറ്റ് ഡെപ്ത് എന്നിവയനുസരിച്ച് മാറുന്നു. രണ്ട് ചിത്രങ്ങൾക്ക് ഒരേ അളവുകൾ പങ്കിടാനും വളരെ വ്യത്യസ്തമായ ലോഡിംഗ് ചെലവുകൾ സൃഷ്ടിക്കാനും കഴിയും.
പിക്സലുകൾ പരിധി സജ്ജമാക്കുന്നു
ഫയലിന് എത്രത്തോളം ദൃശ്യ വിശദാംശങ്ങൾ ഉൾക്കൊള്ളാൻ കഴിയുമെന്ന് പിക്സലുകൾ നിർവചിക്കുന്നു. 24-ബിറ്റ് RGB-യിലുള്ള ഒരു 24-മെഗാപിക്സൽ ഇമേജിൽ ഏകദേശം 72 ദശലക്ഷം ബൈറ്റുകൾ റോ പിക്സൽ ഡാറ്റ അടങ്ങിയിരിക്കുന്നു, കാരണം ഒരു പിക്സലിന് 24 ദശലക്ഷം പിക്സലുകൾ × 3 ബൈറ്റുകൾ = 72,000,000 ബൈറ്റുകൾ . ആ റോ സംഖ്യയാണ് എക്സ്പോർട്ടിനുള്ള ആരംഭ പോയിന്റ്, ബ്രൗസറിന് ലഭിക്കുന്ന അന്തിമ ഭാരം അല്ല.
കയറ്റുമതി തിരഞ്ഞെടുപ്പുകൾ ഫലം വേഗത്തിൽ മാറ്റുന്നു. ഒരേ ഉറവിട ഫോട്ടോ 100% ഗുണനിലവാരത്തിൽ JPEG ആയി ഏകദേശം 423.41 KB ഉം JPEG 90% ഗുണനിലവാരത്തിൽ ഏകദേശം 211.7 KB ഉം ആയി പുറത്തുവരാം. പിക്സലുകൾ അതേപടി നിലനിൽക്കും, അതേസമയം കയറ്റുമതി യഥാർത്ഥ വിശദാംശങ്ങളുടെ ഏറിയോ കുറഞ്ഞോ സംരക്ഷിക്കുന്നു.
കംപ്രഷനും ഫോർമാറ്റും ഫലം തീരുമാനിക്കുന്നു
പല ഷോപ്പിഫൈ ഓഡിറ്റുകളും ഇവിടെ ഒരു വശത്തേക്ക് പോകുന്നു. ഒരു വലിയ ചിത്രം വെബിന് വളരെ ഭാരമുള്ളതായിരിക്കണമെന്ന് വ്യാപാരികൾ അനുമാനിക്കുന്നു, പക്ഷേ അളവുകളും ഫയൽ ഭാരവും വ്യത്യസ്ത തീരുമാനങ്ങളാണ്. നന്നായി എക്സ്പോർട്ട് ചെയ്താൽ ഒരു വലിയ-മാന ചിത്രം ഇപ്പോഴും ന്യായമായ ഫയലായിരിക്കാം. മിതമായ രൂപത്തിലുള്ള ഒരു ഗ്രാഫിക് തെറ്റായ ഫോർമാറ്റിലോ തെറ്റായ ഗുണനിലവാരത്തിലോ സേവ് ചെയ്താൽ അത് വീർത്തതായിത്തീരും.
സ്റ്റോർഫ്രണ്ട് റോളിനെ ആശ്രയിച്ച് ആ വ്യത്യാസം പ്രധാനമാണ്. ഒരു ഹീറോ ബാനറിന് ഒരു തംബ്നെയിലിനേക്കാൾ കൂടുതൽ വിഷ്വൽ വെയ്റ്റ് വഹിക്കാൻ കഴിയും, പക്ഷേ പേജ് വൃത്തിയായി ലോഡ് ചെയ്യുന്നതിന് ഒരു കളക്ഷൻ ഗ്രിഡ് ഇമേജ് ഇപ്പോഴും വേണ്ടത്ര ഭാരം കുറഞ്ഞതായിരിക്കണം. ഉൽപ്പന്ന സൂം ഷോട്ടുകൾക്ക് അടുത്ത് പിടിക്കാൻ ആവശ്യമായ പിക്സൽ വിശദാംശങ്ങൾ ആവശ്യമാണ്, അതേസമയം എക്സ്പോർട്ട് ലേഔട്ടിന് കാണിക്കാൻ കഴിയുന്നതിനേക്കാൾ കൂടുതൽ വിശദാംശങ്ങൾ നിലനിർത്തുകയാണെങ്കിൽ തംബ്നെയിൽ സ്ലോട്ടുകൾ സാധാരണയായി ബാൻഡ്വിഡ്ത്ത് പാഴാക്കുന്നു.
അടിസ്ഥാന നിയമം: ഇമേജിന് എത്രത്തോളം ദൃശ്യ വിശദാംശങ്ങൾ കാണിക്കാൻ കഴിയുമെന്ന് പിക്സലുകൾ നിർണ്ണയിക്കുന്നു. നിങ്ങളുടെ ഷോപ്പർ എത്രത്തോളം ഡൗൺലോഡ് ചെയ്യണമെന്ന് ഫയൽ വലുപ്പം നിർണ്ണയിക്കുന്നു.
ആ രണ്ട് സംഖ്യകളും വേർതിരിച്ച് വയ്ക്കുന്നത് ഇമേജ് പ്ലാനിംഗ് എളുപ്പമാക്കുന്നു. ഒരു ഇടുങ്ങിയ തംബ്നെയിൽ സ്ലോട്ട് വലിയ അളവുകളിൽ നിന്ന് പ്രയോജനം നേടുന്നില്ല. ഒരു ഉൽപ്പന്ന പേജ് സൂം ഇമേജിന് മൂർച്ചയുള്ളതായി കാണുന്നതിന് മതിയായ പിക്സലുകൾ ആവശ്യമാണ്, പക്ഷേ എക്സ്പോർട്ട് ചെയ്ത ഫയൽ കോർ വെബ് വൈറ്റലുകൾക്കും അതിനു ചുറ്റും ലോഡ് ചെയ്യേണ്ട പേജിന്റെ ബാക്കി ഭാഗങ്ങൾക്കും ന്യായയുക്തമായി തുടരേണ്ടതുണ്ട്.
JPEG, PNG, WebP, AVIF എന്നിവയുടെ താരതമ്യം
Shopify സ്റ്റോർഫ്രണ്ടിൽ ഓരോ ഇമേജ് ഫോർമാറ്റും വ്യത്യസ്ത ഉദ്ദേശ്യങ്ങൾ നിറവേറ്റുന്നു. ഒരേ തീമിൽ ഇരിക്കുമ്പോൾ പോലും ഒരു ഉൽപ്പന്ന ഫോട്ടോ, ലോഗോ, സ്ക്രീൻഷോട്ട് എന്നിവയ്ക്കെല്ലാം വ്യത്യസ്തമായ പരിഗണന ആവശ്യമാണ്. പേജിൽ ചിത്രം ചെയ്യേണ്ട ജോലിയെ അടിസ്ഥാനമാക്കി ഫോർമാറ്റ് തിരഞ്ഞെടുക്കുക, ശീലത്തിന്റെ അടിസ്ഥാനത്തിലല്ല.
JPEG ഉം PNG ഉം ഇപ്പോഴും അവയുടെ സ്ഥാനം നേടുന്നു
ഫോട്ടോഗ്രാഫുകൾക്കുള്ള സ്റ്റാൻഡേർഡ് ചോയ്സ് JPEG ആയി തുടരുന്നു. ഇത് നന്നായി കംപ്രസ് ചെയ്യുന്നു, മിക്കവാറും എല്ലായിടത്തും പ്രവർത്തിക്കുന്നു, കൂടാതെ സാധാരണയായി ഉൽപ്പന്ന ഇമേജറി വെബിന് ആവശ്യമായത്ര പ്രകാശം നിലനിർത്തുന്നു. മൂർച്ചയുള്ള അരികുകൾ, പരന്ന നിറം, സുതാര്യത അല്ലെങ്കിൽ വാചകം ആവശ്യമുള്ള ചിത്രങ്ങൾക്ക് PNG അനുയോജ്യമാണ്, അതുകൊണ്ടാണ് ഫയലുകൾ സാധാരണയായി ഭാരം കൂടിയതാണെങ്കിലും ലോഗോകളും UI ഗ്രാഫിക്സും പലപ്പോഴും അവിടെ ഉൾപ്പെടുന്നത്.
ഷോപ്പിഫൈയിൽ ഇത് രണ്ടും വ്യത്യസ്തമാണ്, കാരണം സ്റ്റോറുകൾ സാധാരണയായി രണ്ട് തരത്തിലുള്ള ആസ്തികളും സംയോജിപ്പിക്കുന്നു. PNG ആയി സേവ് ചെയ്യുന്ന ഒരു ലൈഫ്സ്റ്റൈൽ ഫോട്ടോ സാധാരണയായി സ്റ്റോറിന്റെ മുൻഭാഗത്തിന് വഹിക്കേണ്ടതിനേക്കാൾ ഭാരം കൂടുതലായിരിക്കും. JPEG ആയി സേവ് ചെയ്യുന്ന ഒരു ലോഗോ പരുക്കനായി തോന്നാം അല്ലെങ്കിൽ സുതാര്യത നഷ്ടപ്പെടാം, ഇത് പിന്നീട് ഒഴിവാക്കാവുന്ന ക്ലീനപ്പ് സൃഷ്ടിക്കുന്നു. ഫോർമാറ്റ് ശീലത്തെയല്ല, ജോലിയെ പിന്തുടരണം.
ഒരു കളക്ഷൻ കാർഡ് ഒരു നല്ല ഉദാഹരണമാണ്. ചിത്രം ഒരു ക്ലീൻ ഉൽപ്പന്ന ഷോട്ടാണെങ്കിൽ, വാങ്ങുന്നവർക്ക് ലഭിക്കുന്ന കാഴ്ചയെ ബാധിക്കാതെ JPEG സാധാരണയായി ഭാരം കുറയ്ക്കുന്നു. അസറ്റ് നിറമുള്ള പശ്ചാത്തലത്തിന് മുകളിൽ ഇരിക്കുന്ന ഒരു ബാഡ്ജ്, ഐക്കൺ അല്ലെങ്കിൽ ലോഗോ ആണെങ്കിൽ, PNG അരികുകൾ മികച്ച രീതിയിൽ സംരക്ഷിക്കുകയും വൃത്തികെട്ട ഹാലോകൾ ഒഴിവാക്കുകയും ചെയ്യുന്നു.
WebP, AVIF എന്നിവ ഫയൽ വലുപ്പങ്ങൾ കുറയ്ക്കാൻ സഹായിക്കുന്നു
ആധുനിക ഫോർമാറ്റുകൾ സാധാരണയായി ഫയൽ വലുപ്പം കൂടുതൽ കുറയ്ക്കുന്നു. ഉദാഹരണത്തിന്, താരതമ്യപ്പെടുത്താവുന്ന ഗുണനിലവാരമുള്ള ഒരു ഇമേജിന്, 75% ലെ JPEG ഏകദേശം 1.25–1.53 MB ആണ്, WebP ലോസ്സി ഏകദേശം 0.72–0.88 MB ആണ്, AVIF ഏകദേശം 0.57–0.69 MB ആണ്, JPEG XL ഏകദേശം 0.55–0.67 MB ആണ് ( W3Techs ). പഴയ കയറ്റുമതി ശീലങ്ങളിൽ നിന്നുള്ള അർത്ഥവത്തായ ഇടിവാണിത്, കൂടാതെ പല സ്റ്റോർഫ്രണ്ടുകളും ഫോട്ടോകൾ മൃദുവായി തോന്നിപ്പിക്കാതെ തന്നെ ഭാരം കുറയ്ക്കാൻ കഴിയുന്നത് എന്തുകൊണ്ടാണെന്ന് ഇത് വിശദീകരിക്കുന്നു.
ഫോർമാറ്റ് തിരഞ്ഞെടുക്കൽ ഇപ്പോഴും ഉള്ളടക്കത്തെ ആശ്രയിച്ചിരിക്കുന്നു എന്നതാണ് പ്രധാന കാര്യം. ഉൽപ്പന്ന ഫോട്ടോഗ്രാഫിയിൽ WebP, AVIF എന്നിവ വളരെ നന്നായി പ്രവർത്തിക്കും, എന്നാൽ സുതാര്യതയുള്ള ഗ്രാഫിക്സുകൾക്ക് വ്യത്യസ്തമായി പ്രവർത്തിക്കാൻ കഴിയും. ഒരു ഫയൽ കൂടുതലും ഒരു ഫോട്ടോഗ്രാഫാണെങ്കിൽ, ആ തരത്തിലുള്ള ഇമേജ് കാര്യക്ഷമമായി കംപ്രസ് ചെയ്യുന്ന ഒരു ഫോർമാറ്റ് ഉപയോഗിക്കുക. അത് ഒരു ലോഗോയോ സുതാര്യതയുള്ള ഗ്രാഫിക്കോ ആണെങ്കിൽ, അരികുകൾ വൃത്തിയായി സൂക്ഷിക്കുന്ന ഫോർമാറ്റ് ഉപയോഗിക്കുക.
ഒരു Shopify സ്റ്റോർഫ്രണ്ടിൽ, സാധാരണയായി ഹീറോ ബാനറിന് ഒരു ഫോർമാറ്റ്, ലോഗോയ്ക്ക് മറ്റൊന്ന്, ഉൽപ്പന്നത്തിന്റെ ക്ലോസ്-അപ്പ് ഷോട്ടുകൾക്ക് മറ്റൊന്ന് എന്നിവയാണ് ഇതിനർത്ഥം. ശരിയായ തിരഞ്ഞെടുപ്പ് എന്നത് ആധുനികമായി കാണപ്പെടുന്നതിനെക്കാൾ പേജിനെ വേഗത്തിലാക്കുന്നതും ചിത്രം അതിന്റെ യഥാർത്ഥ സ്ഥാനത്ത് വ്യക്തമായി കാണിക്കുന്നതും എന്താണ് എന്നതാണ്.
തീരുമാന നിയമം: ആളുകൾ, ഉൽപ്പന്നങ്ങൾ അല്ലെങ്കിൽ ടെക്സ്ചർ ഉപയോഗിച്ച് ഫോട്ടോഗ്രാഫ് ചെയ്യുക, JPEG അല്ലെങ്കിൽ WebP തിരഞ്ഞെടുക്കുക. ഫ്ലാറ്റ് ഗ്രാഫിക്സ്, ലോഗോകൾ അല്ലെങ്കിൽ സ്ക്രീൻഷോട്ടുകൾ, PNG തിരഞ്ഞെടുക്കുക. നിങ്ങളുടെ വർക്ക്ഫ്ലോയ്ക്ക് ഒരു ഫാൾബാക്ക് പിന്തുണയ്ക്കാൻ കഴിയുമെങ്കിൽ, AVIF അല്ലെങ്കിൽ WebP ആണ് ഏറ്റവും ക്ലീനർ ലൈവ്-സ്റ്റോർ ഓപ്ഷൻ.
റെസല്യൂഷനും കംപ്രഷനും സംഖ്യകളെ എങ്ങനെ മാറ്റുന്നു
ഒരു ഫയലിന് നിങ്ങളുടെ സ്ക്രീനിൽ നന്നായി കാണാൻ കഴിയും, എന്നാൽ അത് ആവശ്യമുള്ളതിലും വളരെ ഭാരമുള്ളതായിരിക്കും. ഷോപ്പിഫൈയിൽ വ്യാപാരികൾക്ക് ആദ്യം തോന്നുന്ന ഭാഗം അതാണ്, കാരണം ഒരേ ചിത്രം ഒരു ഹീറോ ബാനർ, കളക്ഷൻ ഗ്രിഡ് ടൈൽ, ഒരു ഉൽപ്പന്ന സൂം ഷോട്ട് അല്ലെങ്കിൽ ഒരു ചെറിയ തംബ്നെയിൽ എന്നിവ പോലെ വളരെ വ്യത്യസ്തമായി പെരുമാറാൻ കഴിയും. ബ്രൗസറിനോട് നിങ്ങൾ എത്ര പിക്സലുകൾ കൊണ്ടുപോകണമെന്ന് റെസല്യൂഷൻ നിയന്ത്രിക്കുന്നു, പേജ് ലോഡ് ചെയ്യുന്നതിന് മുമ്പ് ആ ഭാരത്തിന്റെ എത്രത്തോളം ട്രിം ചെയ്യണമെന്ന് കംപ്രഷൻ നിയന്ത്രിക്കുന്നു.
കൂടുതൽ പിക്സലുകൾ എന്നാൽ കൂടുതൽ ഡാറ്റ എന്നാണ് അർത്ഥമാക്കുന്നത്.
ഒരു വലിയ ഇമേജ് എന്നത് ഒരു വലിയ ക്യാൻവാസ് മാത്രമല്ല, ബ്രൗസറിന് പ്രോസസ്സ് ചെയ്യാൻ കൂടുതൽ റോ ഡാറ്റയാണ്. നേരത്തെ കാണിച്ചതുപോലെ, കംപ്രഷൻ ആരംഭിക്കുന്നതിന് മുമ്പ് ഒരു 24MP ഇമേജിൽ ഏകദേശം 72 ദശലക്ഷം ബൈറ്റുകൾ റോ ഡാറ്റ അടങ്ങിയിരിക്കുന്നു . സ്റ്റോർഫ്രണ്ടിന് ആവശ്യമുള്ളതിനേക്കാൾ ഉയർന്ന പിക്സൽ എണ്ണത്തിൽ നിങ്ങൾ അതേ രംഗം എക്സ്പോർട്ട് ചെയ്യുകയാണെങ്കിൽ, പ്രദർശിപ്പിച്ചുകഴിഞ്ഞാൽ ഫോട്ടോ ഏതാണ്ട് സമാനമായി തോന്നിയാലും ഫയൽ കൂടുതൽ ഭാരമുള്ളതായിത്തീരുന്നു.
അതുകൊണ്ടാണ് അമിത വലുപ്പത്തിലുള്ള കയറ്റുമതി സംഭരണ ക്ലട്ടറിനേക്കാൾ കൂടുതൽ ഉണ്ടാക്കുന്നത്. അവ ട്രാൻസ്ഫർ ഭാരം കൂട്ടുകയും ബ്രൗസറിനെ കൂടുതൽ കഠിനമാക്കുകയും ചെയ്യുന്നു, കൂടാതെ പേജ് വേഗത്തിൽ അനുഭവപ്പെടുമെന്ന് ഷോപ്പർമാർ പ്രതീക്ഷിക്കുന്ന കൃത്യമായ സ്ഥലത്ത് ചിത്രത്തിന്റെ വേഗത കുറയ്ക്കുകയും ചെയ്യുന്നു. ഒരു കളക്ഷൻ ഗ്രിഡ് ടൈലിന് സൂം ചെയ്യാവുന്ന ഉൽപ്പന്ന ഇമേജിന്റെ അതേ പേലോഡ് ആവശ്യമില്ല, കൂടാതെ ഒരു തംബ്നെയിലിന് അവയിലേതിനേക്കാളും വളരെ കുറവാണ് ആവശ്യമുള്ളത്.
കംപ്രഷൻ നിങ്ങളെ രക്ഷിക്കും, പക്ഷേ അത് അധിക പിക്സലുകൾ സൗജന്യമാക്കുന്നില്ല.
കംപ്രഷൻ ഒരു വലിയ സോഴ്സ് ഫയലിനെ Shopify കാര്യക്ഷമമായി സേവിക്കാൻ കഴിയുന്ന ഒന്നിലേക്ക് ചുരുക്കും, പക്ഷേ പ്ലേസ്മെന്റിന് ആവശ്യമുള്ളതിനേക്കാൾ കൂടുതൽ പിക്സലുകൾ ഉപയോഗിക്കുന്നതിന്റെ ചെലവ് ഇത് ഇല്ലാതാക്കുന്നില്ല. ഒരു ഉൽപ്പന്ന ഫോട്ടോ സൂം-പ്രാപ്തമാക്കിയ ഗാലറിയിലേക്കാണ് പോകുന്നതെങ്കിൽ, ഒരു നല്ല സ്ക്രീനിൽ മൂർച്ചയുള്ളതായി തുടരാൻ നിങ്ങൾക്ക് മതിയായ വിശദാംശങ്ങൾ ആവശ്യമാണ്. അതേ ചിത്രം ഒരു കളക്ഷൻ കാർഡിലേക്ക് മാത്രമേ പോകുന്നുള്ളൂവെങ്കിൽ, പൂർണ്ണ വലുപ്പത്തിലുള്ള പതിപ്പ് അയയ്ക്കുന്നത് പാഴായ പരിശ്രമമാണ്.
അതിനെക്കുറിച്ച് ചിന്തിക്കാനുള്ള ശുദ്ധമായ മാർഗം ലളിതമാണ്. പിക്സലുകൾ മാലിന്യത്തിന് അടിസ്ഥാനം ഒരുക്കുന്നു , കാരണം അമിത അളവുകൾ ഒഴിവാക്കാവുന്ന ഭാരം സൃഷ്ടിക്കുന്നു. ഗുണനിലവാര ക്രമീകരണം ലാഭിക്കുന്നതിനുള്ള പരിധി സജ്ജമാക്കുന്നു , കാരണം കയറ്റുമതി എത്രത്തോളം വിശദാംശങ്ങൾ സൂക്ഷിക്കുന്നുവെന്ന് ഇത് തീരുമാനിക്കുന്നു. ആ കംപ്രഷൻ എത്രത്തോളം സഹായിക്കുന്നുവെന്ന് ഫോർമാറ്റ് നിയന്ത്രിക്കുന്നു , കാരണം വ്യത്യസ്ത ഫയൽ തരങ്ങൾ ഒരേ രീതിയിൽ ചുരുങ്ങുന്നില്ല.
Shopify ഉപയോഗ സാഹചര്യങ്ങളുമായി ബന്ധപ്പെട്ട ഇമേജ് വലുപ്പം മാറ്റുന്നതിനുള്ള മാർഗ്ഗനിർദ്ദേശങ്ങൾക്ക്, ഈ Shopify ഇമേജ് SEO ഗൈഡ് ഉപയോഗപ്രദമായ ഒരു കൂട്ടാളിയാണ്. എല്ലാ സ്റ്റോർഫ്രണ്ട് ഇമേജുകളും ഒരേ ജോലി ചെയ്യുന്നതുപോലെ പരിഗണിക്കുന്നതിനുപകരം കയറ്റുമതി തീരുമാനത്തെ യഥാർത്ഥ പ്ലേസ്മെന്റുമായി ബന്ധിപ്പിക്കാൻ ഇത് സഹായിക്കുന്നു.
ഒരു ഹീറോ ഇമേജ്, ഒരു കളക്ഷൻ ടൈൽ, ഒരു തംബ്നെയിൽ എന്നിവയെല്ലാം വ്യത്യസ്ത തലത്തിലുള്ള വിശദാംശങ്ങൾ ആവശ്യപ്പെടുന്നു. വ്യാപാരികൾ സാധാരണയായി ശ്രദ്ധിക്കാതെ പോകുന്ന ഭാഗമാണിത്, അതുകൊണ്ടാണ് റെസല്യൂഷനിലെ ഒരു ചെറിയ മാറ്റം എഡിറ്ററിൽ ദോഷകരമല്ലെന്ന് തോന്നുന്നത്, അതേസമയം ബ്രൗസറിൽ ഒരു ഹെവിയർ സ്റ്റോർ സൃഷ്ടിക്കുകയും ചെയ്യുന്നു.
കോർ വെബ് വൈറ്റലുകളും ഹെവി ഇമേജുകളുടെ SEO ചെലവും
കനത്ത ചിത്രങ്ങൾ SEO-യെ നേരിട്ട് ബാധിക്കുന്നു, കാരണം Google അപ്ലോഡ് ചെയ്യുന്നതിന്റെ പിന്നിലെ ഉദ്ദേശ്യത്തെയല്ല, അനുഭവത്തെയാണ് അളക്കുന്നത്. പല Shopify പേജുകളിലും, ദൃശ്യമാകുന്ന ഏറ്റവും വലിയ ചിത്രമാണ് ലോഡിംഗ് അനുഭവത്തെ നിയന്ത്രിക്കാൻ ഏറ്റവും സാധ്യതയുള്ളത്. ആ ചിത്രം വളരെ ഭാരമുള്ളതാണെങ്കിൽ, ഏറ്റവും വലിയ ഉള്ളടക്ക പെയിന്റ് വേഗത കുറയ്ക്കുകയും പേജ് ഉപയോഗയോഗ്യമാണെന്ന് തോന്നുന്നതിന് മുമ്പ് സന്ദർശകൻ കൂടുതൽ സമയം കാത്തിരിക്കുകയും ചെയ്യും.
എൽസിപി സാധാരണയായി തെറ്റായ കാര്യത്തിന് കുറ്റപ്പെടുത്തപ്പെടുന്നു
വ്യാപാരികൾ പലപ്പോഴും ആപ്പുകൾ, സ്ക്രിപ്റ്റുകൾ അല്ലെങ്കിൽ തീം കോഡ് എന്നിവയെയാണ് ആദ്യം കുറ്റപ്പെടുത്തുന്നത്, ചിലപ്പോൾ അവർ പറയുന്നതും ശരിയാണ്. എന്നാൽ ഹീറോ ഇമേജ് ആണ് പലപ്പോഴും ഏറ്റവും എളുപ്പമുള്ള ഒറ്റ വിജയമായി മാറുന്നത്. ഒരു വലിയ ഹീറോ ഫോട്ടോയ്ക്ക് പേജ് അർത്ഥവത്താകുന്ന നിമിഷത്തെ തടഞ്ഞുനിർത്താൻ കഴിയും, പ്രത്യേകിച്ച് മൊബൈലിൽ, കണക്ഷൻ ഗുണനിലവാരം വ്യത്യാസപ്പെടുകയും വ്യൂപോർട്ട് ചെറുതാകുകയും ചെയ്യുന്നിടത്ത്, അമിതമായ ആസ്തികൾ എളുപ്പത്തിൽ കണ്ടെത്താൻ കഴിയും.
ചിത്രത്തിന്റെ ഭാരം ബാധിക്കുന്ന മറ്റൊരു മെട്രിക് ആണ് ക്യുമുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റ് . നിങ്ങളുടെ തീം ഇമേജുകൾക്കായി സ്ഥലം ശരിയായി റിസർവ് ചെയ്തില്ലെങ്കിൽ, അസറ്റുകൾ ലോഡ് ആകുമ്പോൾ ലേഔട്ട് ചാടും. ഇത് ഷോപ്പർമാർക്ക് മന്ദബുദ്ധിയായി തോന്നുകയും പേജ് ഉപയോഗിക്കാൻ ബുദ്ധിമുട്ടാക്കുകയും ചെയ്യുന്നു. ഷോപ്പിഫൈ തീമുകൾ പലപ്പോഴും ഈ ജോലികളിൽ ചിലത് ഇതിനകം തന്നെ ചെയ്യുന്നു, പക്ഷേ മോശം ഇമേജ് വർക്ക്ഫ്ലോയിൽ നിന്ന് ഒരു വ്യാപാരിയെ രക്ഷിക്കാൻ എല്ലായ്പ്പോഴും പര്യാപ്തമല്ല.
വലുപ്പ ലക്ഷ്യങ്ങൾ ക്രമരഹിതമല്ല.
വെബ് ഡെലിവറിക്ക് വേണ്ടിയുള്ള സാങ്കേതിക മാർഗ്ഗനിർദ്ദേശത്തിൽ സാധാരണയായി 800 മുതൽ 1000 px വരെയും 80 മുതൽ 150 KB വരെയും ഉള്ള ഉൽപ്പന്ന ഫോട്ടോകൾ, 200 KB യിൽ താഴെയുള്ള ഹീറോ ഇമേജുകൾ, 500 KB യിൽ താഴെയുള്ള മൊത്തം പേജ് ഇമേജ് ബജറ്റ് എന്നിവ ആവശ്യമാണ്. ഇതേ മാർഗ്ഗനിർദ്ദേശം JPEG-കൾ പലപ്പോഴും 200 മുതൽ 600 KB വരെയും, WebP 150 മുതൽ 450 KB വരെയും , AVIF 80 മുതൽ 300 KB വരെയും, PNG 500 മുതൽ 3 MB വരെയും ( Vizua ) സ്ഥാപിക്കുന്നു. ഇമേജ് ഭാരവും പേജ് പ്രകടനവും പരസ്പരം ബന്ധപ്പെട്ടിരിക്കുന്നതിനാൽ ആ ശ്രേണികൾ നിലനിൽക്കുന്നു.
ഒരു പേജ് വേഗത്തിൽ പ്രവർത്തിക്കാൻ കൃത്രിമമായി ചെറുതാകണമെന്നില്ല. അത് അച്ചടക്കം പാലിക്കേണ്ടതുണ്ട്. നിങ്ങളുടെ ഇമേജ് ലോഡ് വീർക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങൾ ബ്രൗസറിനെ പ്രവർത്തിപ്പിക്കുന്നത് ഷോപ്പറുടെ അനുഭവം മെച്ചപ്പെടുത്തുന്നില്ല. അത് നേരിട്ടുള്ള SEO ചെലവാണ്, സൈദ്ധാന്തിക ചെലവല്ല.
വിശാലമായ ഓഡിറ്റ് പ്രക്രിയയിൽ Shopify-കേന്ദ്രീകൃതമായ ഒരു കോണിന്, Shopify-യ്ക്കുള്ള ഈ ഇമേജ് SEO ഗൈഡ് ഉപയോഗപ്രദമായ ഒരു റഫറൻസ് പോയിന്റാണ്.
Shopify പ്ലേസ്മെന്റ് അനുസരിച്ച് ചിത്ര ഫയൽ വലുപ്പങ്ങൾ ടാർഗെറ്റ് ചെയ്യുക
ഊഹിക്കുന്നത് നിർത്താനുള്ള ഏറ്റവും എളുപ്പ മാർഗം, സ്റ്റോർഫ്രണ്ടിലെ ഓരോ വിഷ്വൽ റോളിനും ഒരു ഫയൽ വലുപ്പ ബജറ്റ് സജ്ജമാക്കുക എന്നതാണ്. ഒരു ഹീറോ ബാനർ ഒരു തംബ്നെയിലിൽ നിന്ന് വ്യത്യസ്തമായ ജോലി ചെയ്യുന്നു, കൂടാതെ സൂം ചെയ്യാവുന്ന ഉൽപ്പന്ന ചിത്രത്തിന്റെ അതേ ഭാരമുള്ള ഒരു കളക്ഷൻ ഗ്രിഡ് എക്സ്പോർട്ട് ചെയ്യാൻ പാടില്ല. വ്യാപാരികൾ യഥാർത്ഥ പ്ലേസ്മെന്റുകൾക്ക് ചിത്ര ഫയൽ വലുപ്പങ്ങൾ നൽകിക്കഴിഞ്ഞാൽ, സ്റ്റോർ വേഗത്തിൽ സൂക്ഷിക്കാൻ എളുപ്പവും ഓഡിറ്റ് ചെയ്യാൻ വളരെ എളുപ്പവുമാണ്.
നിങ്ങളുടെ കയറ്റുമതി തിരഞ്ഞെടുപ്പുകൾ സ്റ്റോർഫ്രണ്ട് ലേഔട്ട് നിർണ്ണയിക്കട്ടെ.
ചെറിയ ലേഔട്ട് ബ്ലോക്കുകളേക്കാൾ കൂടുതൽ സ്ഥലം ഫുൾ-വിഡ്ത്ത് ഇമേജുകൾക്ക് സാധാരണയായി ആവശ്യമാണ്. റെസ്പോൺസീവ് ഇമേജ് ഗൈഡൻസ് സാധാരണയായി 1600 px ഉം 200 മുതൽ 300 KB ഉം ഉള്ള ഫുൾ-വിഡ്ത്ത് ഇമേജുകളിലേക്കും, 800 px ഉം 70 മുതൽ 350 KB ഉം ഉള്ള ചെറിയ 25% മുതൽ 50% വരെ ലേഔട്ട് ഇമേജുകളിലേക്കും, ഡിസ്പ്ലേ സ്പേസിന്റെ ഏകദേശം 2× വലുപ്പമുള്ള ചിത്രങ്ങളിലേക്കും വിരൽ ചൂണ്ടുന്നു, അതിനാൽ ഉയർന്ന സാന്ദ്രതയുള്ള സ്ക്രീനുകളിൽ അവ ഇപ്പോഴും മൂർച്ചയുള്ളതായി കാണപ്പെടുന്നു. പ്രായോഗികമായി, അതായത് ഒരേ സോഴ്സ് ഫോട്ടോയ്ക്ക് പലപ്പോഴും വ്യത്യസ്ത കയറ്റുമതികൾ ആവശ്യമാണ്, ഒന്ന് അത് പൂരിപ്പിക്കുന്ന സ്ലോട്ടിനും മറ്റൊന്ന് ഒരു ഡെൻസ് സ്ക്രീൻ പ്രതീക്ഷിക്കുന്ന മൂർച്ചയുള്ള റെൻഡറിംഗിനും.
| Shopify പ്ലേസ്മെന്റ് പ്രകാരം ചിത്ര ഫയൽ വലുപ്പ ലക്ഷ്യങ്ങൾ | പ്ലേസ്മെന്റ് | ലക്ഷ്യ വീതി | ലക്ഷ്യ ഫയൽ വലുപ്പം | ശുപാർശ ചെയ്യുന്ന ഫോർമാറ്റ് |
|---|---|---|---|---|
| ഹീറോ ബാനർ | പേജിലെ ഏറ്റവും മുകളിലുള്ള ഹീറോ | ഏകദേശം 1600 പിക്സലുകൾ | 200 മുതൽ 300 കെ.ബി. വരെ | JPEG അല്ലെങ്കിൽ WebP |
| ശേഖര ഗ്രിഡ് ലഘുചിത്രം | കളക്ഷൻ ടൈലുകൾ | ഏകദേശം 400 മുതൽ 600 പിക്സലുകൾ വരെ | 40 മുതൽ 80 കെബി വരെ | JPEG അല്ലെങ്കിൽ WebP |
| ഉൽപ്പന്ന പേജ് ഫോട്ടോ | പ്രധാന ഉൽപ്പന്ന ഗാലറി | ഏകദേശം 800 മുതൽ 1200 പിക്സലുകൾ വരെ | 100 മുതൽ 200 കെബി വരെ | JPEG, WebP, അല്ലെങ്കിൽ AVIF |
| ലഘുചിത്രം അല്ലെങ്കിൽ സ്വാച്ച് ചിത്രം | ചെറിയ സപ്പോർട്ടിംഗ് സ്ലോട്ട് | ഏകദേശം 200 മുതൽ 400 പിക്സലുകൾ വരെ | കഴിയുന്നത്ര വെളിച്ചം നിലനിർത്തുക | ഉള്ളടക്കത്തെ ആശ്രയിച്ച്, JPEG അല്ലെങ്കിൽ PNG |
ഒരു ഹീറോ ഇമേജിന് കൂടുതൽ ഭാരം വഹിക്കാൻ കഴിയും, കാരണം അത് വ്യൂപോർട്ടിന്റെ കൂടുതൽ ഭാഗം നിറയ്ക്കുന്നു. ഒരു കളക്ഷൻ ടൈലിന് കഴിയില്ല. ഷോപ്പിഫൈ വിഭാഗങ്ങളിലേക്ക് ചിത്രങ്ങൾ കയറ്റുമതി ചെയ്യുമ്പോൾ വ്യാപാരികൾ മനസ്സിൽ സൂക്ഷിക്കേണ്ട വ്യത്യാസം അതാണ്, കാരണം ഫയൽ വലുപ്പം പേജിൽ ചിത്രം ഉൾക്കൊള്ളുന്ന സ്ഥലവുമായി പൊരുത്തപ്പെടണം.
ഒരേ ചിത്രത്തിന് ഒന്നിലധികം കയറ്റുമതി ആവശ്യമായി വരുന്നത് എന്തുകൊണ്ട്?
ഒരു ഉൽപ്പന്ന പേജ് പലപ്പോഴും റെസ്പോൺസീവ് മാർക്ക്അപ്പ് വഴി ഒരേ ഫയലിന്റെ നിരവധി പതിപ്പുകൾ നൽകുന്നു. അത് സാധാരണമാണ്. ചെറിയ സ്ക്രീനുകൾക്ക് ബ്രൗസറിന് ഒരു ചെറിയ ഫയൽ ലഭിക്കണം, ലേഔട്ടിന് ആവശ്യമുള്ളിടത്ത് മാത്രം വലിയ ഫയൽ ലഭിക്കണം. ആ സജ്ജീകരണം എല്ലാ സന്ദർശകർക്കും അനാവശ്യമായ ബൾക്ക് അയയ്ക്കാതെ സൂം ഗുണനിലവാരം നിലനിർത്തുന്നു.
ഉൽപ്പന്ന ഗാലറിക്ക് പുറത്തും ഇതേ യുക്തി ബാധകമാണ്. ഒരു സ്റ്റോർഫ്രണ്ടിന് പലപ്പോഴും പ്രധാന നായകന് ഒരു പരിഗണനയും, കളക്ഷൻ കാർഡുകൾക്ക് മറ്റൊന്നും, ക്ലോസ്-അപ്പ് വിശദമായ ചിത്രങ്ങൾക്കായി മറ്റൊരു പരിഗണനയും ആവശ്യമാണ്. സോഷ്യൽ, ഷെയറിംഗ് അസറ്റുകൾ സ്റ്റോർഫ്രണ്ട് വിഷ്വലുകളുമായി വിന്യസിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഉൽപ്പന്ന പേജിന് പുറത്തുള്ള ആവശ്യങ്ങളെ അതേ ഇമേജ് വർക്ക്ഫ്ലോയുമായി ബന്ധിപ്പിക്കാൻ ഈ Shopify സോഷ്യൽ ഇമേജ് ഗൈഡ് സഹായിക്കുന്നു.
Shopify യുടെ പ്രധാന നിയമം: സ്ലോട്ട് കയറ്റുമതി തീരുമാനിക്കട്ടെ. ഒരു ഹീറോയ്ക്ക് ഉദാരമതിയാകാം. ഒരു ഗ്രിഡ് ലഘുചിത്രത്തിന് കഴിയില്ല.
ഒരു വലിയ ചിത്രം അപ്ലോഡ് ചെയ്ത് തീം അത് പരിഹരിക്കുമെന്ന് പ്രതീക്ഷിക്കുന്ന സാധാരണ തെറ്റ് ആ നിയമം തടയുന്നു. തീമുകൾക്ക് സഹായിക്കാൻ കഴിയും, പക്ഷേ മോശം കയറ്റുമതി തീരുമാനം അവയ്ക്ക് പഴയപടിയാക്കാൻ കഴിയില്ല.
സ്റ്റോറുകൾ മന്ദഗതിയിലാക്കുന്ന സാധാരണ തെറ്റിദ്ധാരണകൾ
പകുതി സത്യമായ ഒരു നിയമം ഒരാൾ വിശ്വസിക്കുകയും അത് ആവർത്തിച്ചുകൊണ്ടിരിക്കുകയും ചെയ്യുന്നതിനാലാണ് പല ഷോപ്പിഫൈ സ്റ്റോറുകളും മന്ദഗതിയിലാകുന്നത്. ആ ശീലങ്ങൾ വീണ്ടും വീണ്ടും ഓഡിറ്റുകളിൽ പ്രത്യക്ഷപ്പെടുന്നു, സാധാരണയായി ഉപദേശം ആദ്യം ന്യായമായി തോന്നിയതിനാലും ഒരു സ്റ്റോർഫ്രണ്ട് എങ്ങനെ ലോഡ് ചെയ്യുന്നു എന്നതിനെതിരെ ഒരിക്കലും പരിശോധിക്കാത്തതിനാലുമാണ്. ശീലത്തെ പ്രകടനത്തിൽ നിന്ന് വേർതിരിച്ചുകഴിഞ്ഞാൽ, പരിഹാരങ്ങൾ സാധാരണയായി ലളിതമായിരിക്കും.
വയറു വീർക്കാൻ കാരണമാകുന്ന അഞ്ച് വിശ്വാസങ്ങൾ
- ഉയർന്ന റെസല്യൂഷൻ എന്നാൽ എപ്പോഴും മികച്ച നിലവാരം എന്നാണ് അർത്ഥമാക്കുന്നത്. ചിത്രം നിറയ്ക്കുന്ന സ്ഥലത്തേക്കാൾ വലുതായിക്കഴിഞ്ഞാൽ അത് സത്യമാകുന്നത് നിർത്തുന്നു. അധിക പിക്സലുകൾ വാങ്ങുന്നയാളുടെ കാഴ്ചയ്ക്ക് ഒരു പ്രയോജനവും ചെയ്യുന്നില്ല, അവ ഭാരം വർദ്ധിപ്പിക്കുക മാത്രമേ ചെയ്യുന്നുള്ളൂ.
- PNG എപ്പോഴും JPEG-യെക്കാൾ മൂർച്ചയുള്ളതാണ്. കടുപ്പമുള്ള അരികുകളുള്ള ലോഗോകൾക്കും ഗ്രാഫിക്സിനും PNG ശരിയായ തിരഞ്ഞെടുപ്പാണ്, പക്ഷേ ഉൽപ്പന്ന ഫോട്ടോകൾക്ക് സാധാരണയായി അത്രയും നഷ്ടമില്ലാത്ത ഓവർഹെഡ് ആവശ്യമില്ല.
- Shopify എല്ലാം സ്വയമേവ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു. ചില സന്ദർഭങ്ങളിൽ Shopify സഹായിക്കുന്നു, പക്ഷേ യഥാർത്ഥ അപ്ലോഡ് ഇപ്പോഴും അസറ്റിന് എത്രത്തോളം ഭാരമുണ്ടാകാമെന്ന് പരിധി നിശ്ചയിക്കുന്നു.
- ഗൂഗിളിന് WebP വായിക്കാൻ കഴിയാത്തതിനാൽ അത് SEO-യെ ദോഷകരമായി ബാധിക്കുന്നു. ആ വിശ്വാസം കാലഹരണപ്പെട്ടതാണ്. സാധാരണ ചിത്രങ്ങൾ പോലെയുള്ള ആധുനിക ഫോർമാറ്റുകൾ തിരയൽ സംവിധാനങ്ങൾക്ക് റെൻഡർ ചെയ്യാൻ കഴിയും.
- ഡെസ്ക്ടോപ്പിൽ മാത്രമേ ചിത്രത്തിന്റെ വലുപ്പം പ്രധാനമാകൂ. മൊബൈൽ ഫോൺ ഉപയോഗിക്കുന്നവർക്ക് ആദ്യം അനാവശ്യമായ ഫയൽ ഭാരം അനുഭവപ്പെടും, കാരണം അവരുടെ ഉപകരണങ്ങളിലും കണക്ഷനുകളിലും പിശകുകൾക്കുള്ള സാധ്യത കുറവാണ്.
തിരുത്തൽ വ്യാപാരികൾക്ക് ഉടനടി ഉപയോഗിക്കാം
പരിഹാരം ആരംഭിക്കുന്നത് ശീലത്തിൽ നിന്നല്ല, റോളിൽ നിന്നാണ്. ഒരു ഹീറോ ഇമേജിന് പേജിന്റെ മുകൾഭാഗം നിലനിർത്താൻ ആവശ്യമായ ഗുണനിലവാരം ആവശ്യമാണ്. ഗ്രിഡ് വൃത്തിയായി ലോഡ് ചെയ്യുന്നതിന് ഒരു കളക്ഷൻ ടൈൽ തെളിച്ചമുള്ളതായിരിക്കണം. ഒരു സൂം ഇമേജിന് കൂടുതൽ വിശദാംശങ്ങൾ വഹിക്കാൻ കഴിയും, കാരണം അത് വ്യത്യസ്തമായ ജോലിയാണ് ചെയ്യുന്നത്, അതേസമയം ഒരു തംബ്നെയിൽ അല്ലെങ്കിൽ സ്വാച്ച് ലേഔട്ട് അനുവദിക്കുന്നത്ര ചെറുതായി തുടരണം.
അതുകൊണ്ടാണ് ഓരോ ചിത്രത്തിനും ഒരു എക്സ്പോർട്ട് നിയമം പ്രശ്നമുണ്ടാക്കുന്നത്. അസറ്റ് ഒരു ഫോട്ടോയാണെങ്കിൽ, വേഗതയ്ക്കും വിശ്വസനീയമായ നിറത്തിനും എക്സ്പോർട്ട് ചെയ്യുക. ടെക്സ്റ്റോ സുതാര്യതയോ ഉള്ള ഒരു ഗ്രാഫിക് ആണെങ്കിൽ, അരികുകൾ സംരക്ഷിക്കുകയും ഫയൽ വലുതായിരിക്കാമെന്ന് അംഗീകരിക്കുകയും ചെയ്യുക. അത് ഒരു ഇടുങ്ങിയ സ്ലോട്ടിലാണ് ഉൾപ്പെടുന്നതെങ്കിൽ, പൂർണ്ണ വീതിയുള്ള ഡിസ്പ്ലേയ്ക്കായി ഉദ്ദേശിച്ചിട്ടുള്ള ഒരു ഫയൽ അപ്ലോഡ് ചെയ്യരുത്.
റെസല്യൂഷൻ വിഭാഗത്തിൽ പറഞ്ഞിരിക്കുന്നതുപോലെ, കംപ്രഷന് ശേഷം ഒരു 24MP ഇമേജിന് 2 മുതൽ 8 MB വരെ എവിടെയും ലാൻഡ് ചെയ്യാൻ കഴിയും, പിക്സൽ എണ്ണം മാത്രം ഒരു ഇമേജ് വെബ്-റെഡി ആണോ എന്ന് നിങ്ങളോട് പറയാത്തത് എന്തുകൊണ്ടെന്ന് കാണിക്കാൻ ഇത് മതിയാകും. ഫയൽ അത് നൽകുന്ന Shopify പ്ലേസ്മെന്റുമായി പൊരുത്തപ്പെടുന്നുണ്ടോ എന്നതാണ് പ്രധാന ചോദ്യം. ഒരു ഹീറോയ്ക്ക് ഒരു ഗ്രിഡ് കാർഡിനേക്കാൾ കൂടുതൽ സഹിക്കാൻ കഴിയും, ഒരു സൂം ഇമേജിന് ഒരു തംബ്നെയിലിനേക്കാൾ കൂടുതൽ സഹിക്കാൻ കഴിയും. കയറ്റുമതി റോളിന് അനുയോജ്യമായിരിക്കണം.
ഇതുമായി ബന്ധപ്പെട്ട ഒരു തെറ്റ്, എല്ലാ അസറ്റിനും ഒരേ മെറ്റാഡാറ്റ ക്ലീനപ്പ് അർഹമാണെന്ന് കരുതുക എന്നതാണ്. ചിത്രം ഫീച്ചർ ചെയ്യാൻ ആവശ്യമായത്ര പ്രധാനമാണെങ്കിൽ, ആദ്യം അത് ഓഡിറ്റ് ചെയ്യേണ്ടത് പ്രധാനമാണ്. വർക്ക്ഫ്ലോയുടെ ആ ഭാഗം സ്ഥിരതയോടെ നിലനിർത്താൻ Shopify ഇമേജുകൾക്കായി ആൾട്ട് ടെക്സ്റ്റ് ജനറേറ്റർ ഉപയോഗിക്കുക, തുടർന്ന് അത് പൂരിപ്പിക്കുന്ന സ്ലോട്ടിനെതിരെ ഫയൽ വലുപ്പം വിലയിരുത്തുക.
മിക്ക സ്റ്റോറുകളും നഷ്ടപ്പെടുത്തുന്ന ഭാഗമാണിത്. ഫയൽ ചെറുതായിരിക്കണമെന്നില്ല. അത് ഉചിതമായിരിക്കണം.
നിങ്ങളുടെ അടുത്ത ചിത്ര ബാച്ചിനായി ആവർത്തിക്കാവുന്ന ഒരു ചെക്ക്ലിസ്റ്റ്
ഏറ്റവും വൃത്തിയുള്ള ഇമേജ് വർക്ക്ഫ്ലോ നിങ്ങളുടെ ടീമിന് ഊഹിക്കാതെ തന്നെ ആവർത്തിക്കാൻ കഴിയുന്ന ഒന്നാണ്. ഒരേ പരിശോധനകൾ ഒരേ ക്രമത്തിൽ ഓരോ തവണയും നടക്കുമ്പോൾ, നിങ്ങൾക്ക് കുറച്ച് വലിയ അപ്ലോഡുകൾ, കുറച്ച് ലേഔട്ട് ആശ്ചര്യങ്ങൾ, കുറച്ച് വേഗത കുറഞ്ഞ ഉൽപ്പന്ന പേജുകൾ കാറ്റലോഗിൽ മറഞ്ഞിരിക്കുന്നത് എന്നിവ ലഭിക്കും. നിങ്ങൾ ഒരു പുതിയ ഉൽപ്പന്ന ഡ്രോപ്പ് തയ്യാറാക്കുകയോ ഒരു തീം പുതുക്കുകയോ ചെയ്യുകയാണെങ്കിൽ, എന്തെങ്കിലും തത്സമയമാകുന്നതിന് മുമ്പ് ബാച്ച് ഈ ദിനചര്യയിലൂടെ പ്രവർത്തിപ്പിക്കുക.
Shopify-യ്ക്ക് അനുയോജ്യമായ ഒരു ലളിതമായ കയറ്റുമതി ദിനചര്യ
- പ്ലേസ്മെന്റിനായി ലക്ഷ്യ വീതിയിൽ എക്സ്പോർട്ട് ചെയ്യുക. ഒരു ഹീറോ, കളക്ഷൻ കാർഡ്, ഉൽപ്പന്ന സൂം ഇമേജ്, തംബ്നെയിൽ എന്നിവയ്ക്കെല്ലാം വ്യത്യസ്ത ജോലികളുണ്ട്, അതിനാൽ ഉറവിട ചിത്രം അനുവദിക്കുന്നതിനാൽ മാത്രം വലിയ ഫയൽ അപ്ലോഡ് ചെയ്യരുത്.
- റോൾ അനുസരിച്ച് ഫോർമാറ്റ് തിരഞ്ഞെടുക്കുക. ഫോട്ടോകൾ സാധാരണയായി JPEG, WebP, അല്ലെങ്കിൽ AVIF എന്നിവയിൽ യോജിക്കും. സുതാര്യതയോ മൂർച്ചയുള്ള അരികുകളോ പ്രധാനമാകുമ്പോൾ ലോഗോകളും ടെക്സ്റ്റ്-ഹെവി ഗ്രാഫിക്സും PNG-യിൽ നന്നായി യോജിക്കും.
- ആവശ്യമെങ്കിൽ ഒരു ലൈവ്-സ്റ്റോർ പതിപ്പും ഒരു സൂം പതിപ്പും സംരക്ഷിക്കുക. സൂം ഫയലിന് കൂടുതൽ വിശദാംശങ്ങൾ സൂക്ഷിക്കാൻ കഴിയും, പക്ഷേ ലേഔട്ടിന് ശരിക്കും ആവശ്യമില്ലെങ്കിൽ ദൃശ്യമായ പേജ് ആ ഭാരം വഹിക്കരുത്.
- സാധ്യമാകുമ്പോഴെല്ലാം ഭാരം കുറഞ്ഞ മോഡേൺ ഫോർമാറ്റ് നൽകുക. ലൈവ് ഇമേജിനായി WebP അല്ലെങ്കിൽ AVIF ഉപയോഗിക്കുക, അനുയോജ്യത പ്രാധാന്യമുള്ളിടത്ത് JPEG ഫോൾബാക്കായി സൂക്ഷിക്കുക.
- പ്രസിദ്ധീകരിക്കുന്നതിന് മുമ്പ് ഇമേജ് മെറ്റാഡാറ്റയും ആൾട്ട് ടെക്സ്റ്റും പരിശോധിക്കുക. ഫീച്ചർ ചെയ്യാൻ അസറ്റ് ആവശ്യത്തിന് പ്രധാനമാണെങ്കിൽ, അത് ഓഡിറ്റ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. വർക്ക്ഫ്ലോയുടെ ആ ഭാഗം സ്ഥിരതയോടെ നിലനിർത്താൻ RankEngine-ന്റെ ആൾട്ട് ടെക്സ്റ്റ് ജനറേറ്റർ ഉപയോഗിക്കുക.
എന്ത് സ്ഥിരതയാണ് നിങ്ങളെ വാങ്ങുന്നത്?
കാറ്റലോഗിലുടനീളം ചെറിയ മെച്ചപ്പെടുത്തലുകൾ കുമിഞ്ഞുകൂടുന്നു. ഒരു ഭാരം കുറഞ്ഞ ഹീറോ ഇമേജ് കൊണ്ട് ഒരു സ്റ്റോറിനെ തന്നെ രൂപാന്തരപ്പെടുത്താൻ കഴിയില്ല, പക്ഷേ നല്ല വലിപ്പത്തിലുള്ള ഉൽപ്പന്ന ഷോട്ടുകൾ, കളക്ഷൻ ടൈലുകൾ, തംബ്നെയിലുകൾ എന്നിവയുടെ ഒരു കൂട്ടം സ്റ്റോറിന്റെ മുൻഭാഗം കൂടുതൽ വൃത്തിയുള്ളതും വേഗതയുള്ളതും ഷോപ്പിംഗ് എളുപ്പവുമാക്കും. ഫയൽ വലുപ്പങ്ങളെക്കുറിച്ച് ഒരിക്കലും സംസാരിച്ചില്ലെങ്കിലും ഉപഭോക്താക്കൾ അത് ശ്രദ്ധിക്കുന്നു.
നിങ്ങളുടെ ടീം ഇമേജ് മെറ്റാഡാറ്റ സ്കെയിലിൽ കൈകാര്യം ചെയ്യുകയാണെങ്കിൽ, ഓരോ അപ്ലോഡും ഒരു മാനുവൽ ജോലിയാക്കി മാറ്റാതെ തന്നെ റാങ്ക് എഞ്ചിന്റെ ആൾട്ട് ടെക്സ്റ്റ് ജനറേറ്ററിന് വർക്ക്ഫ്ലോയുടെ ആ ഭാഗം ചലിപ്പിച്ചുകൊണ്ടിരിക്കാൻ കഴിയും.
നിങ്ങളുടെ അടുത്ത ബാച്ചിൽ ഈ പതിവ് പ്രയോഗിക്കുക, നിങ്ങളുടെ സ്റ്റോർഫ്രണ്ട് ഉടൻ തന്നെ വേഗത്തിൽ ലോഡ് ചെയ്യും.