വെബ്സൈറ്റ് വികസനത്തിൽ, പ്രകടനവും ഉപയോക്തൃ അനുഭവവും ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് ശരിയായ ഇമേജ് കൃത്രിമത്വം അത്യാവശ്യമാണ്. യുടെ വലിപ്പം കുറയ്ക്കേണ്ടതിൻ്റെ ആവശ്യകത നാം പലപ്പോഴും കണ്ടെത്താറുണ്ട് HTML-ലെ ഒരു ചിത്രം ഞങ്ങളുടെ വെബ് പേജുകളിൽ ഇത് വേഗത്തിലും കാര്യക്ഷമമായും ലോഡ് ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ. ഈ ലേഖനത്തിൽ, HTML-ൽ ഒരു ഇമേജ് ചെറുതാക്കാനുള്ള വ്യത്യസ്ത രീതികളും സാങ്കേതിക വിദ്യകളും ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും, അങ്ങനെ ഞങ്ങളുടെ ഉള്ളടക്കത്തിൻ്റെ മികച്ച ഒപ്റ്റിമൈസേഷനും ദൃശ്യവൽക്കരണവും അനുവദിക്കുന്നു. നിങ്ങളുടെ വെബ്സൈറ്റ് പ്രകടനം മെച്ചപ്പെടുത്താനും ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കാനും നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ ശരിയായ സ്ഥലത്ത് എത്തിയിരിക്കുന്നു!
1. HTML-ൽ ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള ആമുഖം
വെബ് ഡെവലപ്മെൻ്റിൽ ഇമേജുകളുടെ വലുപ്പം മാറ്റുന്നത് ഒരു സാധാരണ ജോലിയാണ്. ഞങ്ങളുടെ വെബ്സൈറ്റ് ഒപ്റ്റിമൈസ് ചെയ്യുന്ന കാര്യം വരുമ്പോൾ, ഞങ്ങളുടെ ചിത്രങ്ങൾ അവയുടെ ദൃശ്യ നിലവാരത്തിൽ വിട്ടുവീഴ്ച ചെയ്യാതെ കഴിയുന്നത്ര ഭാരം കുറഞ്ഞതാണെന്ന് ഉറപ്പാക്കേണ്ടത് പ്രധാനമാണ്. ഭാഗ്യവശാൽ, ഇത് നേടുന്നതിന് HTML ഞങ്ങൾക്ക് നിരവധി ഓപ്ഷനുകൾ വാഗ്ദാനം ചെയ്യുന്നു. ഫലപ്രദമായി.
ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം, ചിത്രത്തിൻ്റെ അളവുകൾ ക്രമീകരിക്കുന്നതിന് HTML "വീതി", "ഉയരം" പ്രോപ്പർട്ടി ഉപയോഗിക്കുക എന്നതാണ്. ഇമേജ് ടാഗിലെ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ചാണ് ഇത് നേടുന്നത്. ഉദാഹരണത്തിന്, നമുക്ക് വലുപ്പം കുറയ്ക്കണമെങ്കിൽ ഒരു ചിത്രത്തിൽ നിന്ന് പകുതിയിൽ, നമുക്ക് "വീതി", "ഉയരം" എന്നിവയുടെ മൂല്യം ചിത്രത്തിൻ്റെ യഥാർത്ഥ വലുപ്പത്തിൻ്റെ പകുതിയായി സജ്ജമാക്കാൻ കഴിയും. ഈ രീതിയിൽ, ബ്രൗസർ ചെറിയ അളവുകൾ ഉപയോഗിച്ച് ചിത്രം ലോഡ് ചെയ്യും, ഇത് പേജ് ലോഡിംഗ് സമയം മെച്ചപ്പെടുത്താൻ സഹായിക്കും.
HTML-ലെ ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള മറ്റൊരു ഓപ്ഷൻ ഇമേജ് കംപ്രഷൻ ഉപയോഗിക്കുക എന്നതാണ്. ഗുണനിലവാരം നഷ്ടപ്പെടാതെ തന്നെ ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യാൻ സഹായിക്കുന്ന നിരവധി ടൂളുകൾ ഓൺലൈനിൽ ലഭ്യമാണ്. ഈ ടൂളുകൾ ചിത്രത്തിൽ നിന്ന് അനാവശ്യ ഡാറ്റ നീക്കം ചെയ്തുകൊണ്ട് പ്രവർത്തിക്കുന്നു, ദൃശ്യ നിലവാരത്തെ കാര്യമായി ബാധിക്കാതെ ഫയൽ വലുപ്പം കുറയ്ക്കുന്നു. ഞങ്ങളുടെ വെബ്സൈറ്റിൽ ഇമേജുകൾ ഉൾച്ചേർക്കുന്നതിന് മുമ്പ് കംപ്രസ്സുചെയ്യാൻ ഈ ടൂളുകൾ ഉപയോഗിക്കാം, ഇത് ഞങ്ങളുടെ ഉപയോക്താക്കൾക്ക് വേഗത്തിൽ പേജ് ലോഡുചെയ്യുന്നതിന് കാരണമാകും.
HTML ഇമേജുകളുടെ വലുപ്പം ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ പ്രകടനം മെച്ചപ്പെടുത്തുക മാത്രമല്ല, ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു. ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കുന്നതിലൂടെ, ഞങ്ങളുടെ ഉപയോക്താക്കൾക്ക് വേഗത്തിലും കാര്യക്ഷമമായും ഉള്ളടക്കം ആക്സസ് ചെയ്യാൻ കഴിയുമെന്ന് ഞങ്ങൾ ഉറപ്പാക്കുന്നു. നിങ്ങളുടെ ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും നിങ്ങളുടെ സന്ദർശകർക്കായി കൂടുതൽ കാര്യക്ഷമവും സൗഹൃദപരവുമായ വെബ്സൈറ്റ് നേടുന്നതിനും പരാമർശിച്ചിരിക്കുന്ന ഈ സാങ്കേതിക വിദ്യകളും ഉപകരണങ്ങളും ഉപയോഗിക്കുക.
2. HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റാൻ ടാഗും ആട്രിബ്യൂട്ടുകളും
ഒരു വെബ് പേജിലെ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റാൻ ഉപയോഗിക്കാവുന്ന ടാഗുകളുടെയും ആട്രിബ്യൂട്ടുകളുടെയും ഒരു പരമ്പര HTML നൽകുന്നു. ഈ ടാഗുകളും ആട്രിബ്യൂട്ടുകളും ചിത്രങ്ങളുടെ വലുപ്പവും ലേഔട്ടും ക്രമീകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അവയുടെ മികച്ച ദൃശ്യവൽക്കരണം ഉറപ്പാക്കുന്നു വ്യത്യസ്ത ഉപകരണങ്ങൾ y pantallas.
ഒന്നാമതായി, HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം മാറ്റാൻ, നിങ്ങൾ ` ടാഗ് ഉപയോഗിക്കുന്നു`. ശരിയായ വലുപ്പം മാറ്റാൻ ഈ ടാഗിൽ നിരവധി പ്രധാന ആട്രിബ്യൂട്ടുകൾ ഉണ്ടായിരിക്കണം. ആട്രിബ്യൂട്ട് എസ്ആർസി ആട്രിബ്യൂട്ട് ആയിരിക്കുമ്പോൾ ഇമേജ് പാത്ത് വ്യക്തമാക്കാൻ ഉപയോഗിക്കുന്നു വീതി y ഉയരം ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും യഥാക്രമം വ്യക്തമാക്കാൻ അവ ഉപയോഗിക്കുന്നു. ഈ ആട്രിബ്യൂട്ടുകൾ പിക്സൽ-നിർദ്ദിഷ്ട മൂല്യങ്ങളിലേക്ക് സജ്ജീകരിക്കാം അല്ലെങ്കിൽ ആപേക്ഷിക വലുപ്പം മാറ്റാൻ അനുവദിക്കുന്നതിന് ഒരു ശതമാനം ഉപയോഗിക്കാം.
ആട്രിബ്യൂട്ട് കൂടാതെ വീതി y ഉയരം, ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റാൻ ഉപയോഗിക്കാവുന്ന മറ്റ് ആട്രിബ്യൂട്ടുകളും HTML നൽകുന്നു. ഉദാഹരണത്തിന്, ആട്രിബ്യൂട്ട് style പരമാവധി വീതി, പരമാവധി ഉയരം, ഇമേജ് വീക്ഷണാനുപാതം എന്നിവ പോലുള്ള അധിക CSS ശൈലികൾ പ്രയോഗിക്കാൻ ഉപയോഗിക്കാം. നിങ്ങൾക്ക് ആട്രിബ്യൂട്ടും ഉപയോഗിക്കാം class ഒരു ബാഹ്യ അല്ലെങ്കിൽ ആന്തരിക സ്റ്റൈൽ ഷീറ്റിൽ നിർവചിച്ചിരിക്കുന്ന നിർദ്ദിഷ്ട ശൈലികൾ പ്രയോഗിക്കാൻ. ഈ ആട്രിബ്യൂട്ടുകൾ ചിത്രത്തിൻ്റെ ലേഔട്ടിലും അന്തിമ വലുപ്പത്തിലും കൂടുതൽ നിയന്ത്രണം അനുവദിക്കുന്നു. ചുരുക്കത്തിൽ, HTML-ൽ ഉചിതമായ ടാഗുകളും ആട്രിബ്യൂട്ടുകളും ഉപയോഗിക്കുന്നതിലൂടെ, ഒരു വെബ് പേജിലെ ചിത്രങ്ങളുടെ വലുപ്പം എളുപ്പത്തിലും ഫലപ്രദമായും മാറ്റാൻ സാധിക്കും. ഈ ആശയങ്ങളെക്കുറിച്ചുള്ള അടിസ്ഥാനപരമായ ധാരണയോടെ, വെബ് ഡെവലപ്പർമാർക്ക് ചിത്രങ്ങളുടെ മികച്ച പ്രദർശനം ഉറപ്പാക്കാൻ കഴിയും വ്യത്യസ്ത ഉപകരണങ്ങളിൽ y pantallas.
3. HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും എങ്ങനെ വ്യക്തമാക്കാം
രൂപവും ലേഔട്ടും നിയന്ത്രിക്കുന്നതിന് HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും വ്യക്തമാക്കേണ്ടത് അത്യാവശ്യമാണ് ഒരു സൈറ്റിൽ നിന്ന് വെബ്. ഭാഗ്യവശാൽ, ഈ ലക്ഷ്യം നേടാൻ നിരവധി മാർഗങ്ങളുണ്ട്.
"വീതി", "ഉയരം" എന്നീ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ചാണ് ചിത്രത്തിൻ്റെ വലുപ്പം വ്യക്തമാക്കുന്നതിനുള്ള എളുപ്പവഴി. ഈ ആട്രിബ്യൂട്ടുകൾ "img" ടാഗിലേക്ക് നേരിട്ട് ചേർക്കാനും ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും പിക്സലുകളിൽ സജ്ജീകരിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്:
"`എച്ച്ടിഎംഎൽ
«``
ഇമേജ് അതിൻ്റെ യഥാർത്ഥ അനുപാതം നിലനിർത്താൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ ആട്രിബ്യൂട്ടുകളിലൊന്ന് (വീതി അല്ലെങ്കിൽ ഉയരം) മാത്രം വ്യക്തമാക്കിയാൽ മതി, മറ്റൊന്ന് അനുപാതത്തെ അടിസ്ഥാനമാക്കി യാന്ത്രികമായി ക്രമീകരിക്കാൻ അനുവദിക്കുക. "സ്റ്റൈൽ" ആട്രിബ്യൂട്ട് ഉപയോഗിച്ചും വീതിയ്ക്കോ ഉയരത്തിനോ വേണ്ടി ഒരു മൂല്യം മാത്രം വ്യക്തമാക്കുന്നതിലൂടെ ഇത് നേടാനാകും. ഉദാഹരണത്തിന്:
"`എച്ച്ടിഎംഎൽ
«``
ഇമേജ് അതിൻ്റെ കണ്ടെയ്നറുമായി താരതമ്യപ്പെടുത്തുന്നതിന് വലുപ്പം മാറ്റാൻ, നിങ്ങൾക്ക് ഒരു ശതമാനം പോലുള്ള ആപേക്ഷിക അളവെടുപ്പ് യൂണിറ്റുകളും ഉപയോഗിക്കാം. ഇത് ചെയ്യുന്നതിന്, ആവശ്യമുള്ള മൂല്യം വ്യക്തമാക്കുക, തുടർന്ന് ശതമാനം ചിഹ്നം (%) നൽകുക. ഉദാഹരണത്തിന്:
"`എച്ച്ടിഎംഎൽ
«``
HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം നിങ്ങൾ വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, ബ്രൗസർ അവയുടെ യഥാർത്ഥ വലുപ്പത്തിൽ പ്രദർശിപ്പിക്കും എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. നിങ്ങളുടെ വെബ്സൈറ്റിൽ ഒരു ഏകീകൃത ലേഔട്ട് നിലനിർത്താൻ ഈ വീതിയും ഉയരവും സ്പെസിഫിക്കേഷൻ ടെക്നിക്കുകൾ സ്ഥിരമായി ഉപയോഗിക്കുന്നത് നല്ലതാണ്. ഈ ഓപ്ഷനുകൾ പരീക്ഷിച്ച് നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് ഏറ്റവും അനുയോജ്യമായ ഒന്ന് കണ്ടെത്തുക!
4. HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വലിപ്പം കുറയ്ക്കാൻ ശതമാനം ഉപയോഗിക്കുന്നു
HTML-ൽ ശതമാനം ഉപയോഗിക്കുന്നത് ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള ഒരു ഉപയോഗപ്രദമായ മാർഗമാണ്. ലഭ്യമായ സ്ഥലത്തിനനുസരിച്ച് ചിത്രം ക്രമീകരിക്കാൻ ഈ സാങ്കേതികവിദ്യ നിങ്ങളെ അനുവദിക്കുന്നു സ്ക്രീനിൽ, വ്യത്യസ്ത ഉപകരണങ്ങൾക്കും സ്ക്രീൻ റെസല്യൂഷനുകൾക്കുമായി കൂടുതൽ വഴക്കമുള്ളതും അനുയോജ്യവുമായ അവതരണത്തിന് കാരണമാകുന്നു.
HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നതിന് ശതമാനം ഉപയോഗിക്കുന്നതിന്, ഞങ്ങൾ ഇനിപ്പറയുന്ന ഘട്ടങ്ങൾ പിന്തുടരുക:
1. ആദ്യം, ഞങ്ങൾ HTML ഇമേജ് ടാഗ് കണ്ടെത്തുന്നു () ഞങ്ങൾ അതിന് ഒരു സൈസ് ആട്രിബ്യൂട്ട് നൽകുന്നു: വീതിയും ഉയരവും. പിക്സലുകളിൽ ഒരു നിശ്ചിത മൂല്യം വ്യക്തമാക്കുന്നതിനുപകരം, ഞങ്ങൾ ഒരു ശതമാനം ഉപയോഗിക്കും. ഉദാഹരണത്തിന്, സ്ക്രീനിൻ്റെ വീതിയുടെ 50% ചിത്രം ഉൾക്കൊള്ളാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞങ്ങൾ ഇമേജ് ടാഗിൽ വീതി=»50%» ഉപയോഗിക്കും.
2. അടുത്തതായി, ഉയരം ആട്രിബ്യൂട്ടിനായി "ഓട്ടോ" CSS പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നമുക്ക് ആനുപാതികമായി ഉയരം ക്രമീകരിക്കാം. മുകളിൽ നിയുക്തമാക്കിയിരിക്കുന്ന ശതമാനം അനുസരിച്ച് ആനുപാതികമായ വീതിയെ അടിസ്ഥാനമാക്കി ഉയരം സ്വയമേവ ക്രമീകരിക്കാൻ ഇത് ഇടയാക്കും. ഉദാഹരണത്തിന്, ചിത്രത്തിന് 50% വീതിയുണ്ടെങ്കിൽ, ഉയരം സ്വയമേവ ആനുപാതികമായി ക്രമീകരിക്കും.
3. അവസാനമായി, വ്യത്യസ്ത ഉപകരണങ്ങളിലും സ്ക്രീൻ റെസല്യൂഷനുകളിലും ചിത്രം ശരിയായി യോജിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ, അധിക സ്റ്റൈലിംഗ് നിയമങ്ങൾ പ്രയോഗിക്കാവുന്നതാണ്. "max-width" CSS പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നമുക്ക് പരമാവധി വീതി സജ്ജമാക്കാൻ കഴിയും, ഇത് സ്ക്രീൻ ചെറുതാണെങ്കിൽ ചിത്രം കവിഞ്ഞൊഴുകുന്നില്ലെന്ന് ഉറപ്പാക്കും. ഉദാഹരണത്തിന്, നമുക്ക് "പരമാവധി വീതി: 100%;" ശൈലി ചേർക്കാം; ഇമേജ് ടാഗിലേക്ക്.
വ്യത്യസ്ത ഉപകരണങ്ങളിലും സ്ക്രീൻ റെസല്യൂഷനുകളിലും കൂടുതൽ അയവുള്ളതും പൊരുത്തപ്പെടുത്താവുന്നതുമായ അവതരണം ഉറപ്പാക്കുന്നതിനാൽ, HTML-ൽ ഒരു ഇമേജിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നതിന് ശതമാനം ഉപയോഗിക്കുന്നത് ശുപാർശ ചെയ്യുന്ന ഒരു പരിശീലനമാണെന്ന് ഓർമ്മിക്കുക. മുകളിൽ സൂചിപ്പിച്ച ഘട്ടങ്ങൾ പാലിക്കുന്നതിലൂടെ, നിങ്ങളുടെ ചിത്രങ്ങളുടെ ഗുണനിലവാരം നഷ്ടപ്പെടാതെയോ അവയുടെ രൂപഭാവം വികൃതമാക്കാതെയോ എളുപ്പത്തിൽ ക്രമീകരിക്കാൻ കഴിയും. നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായത് പരീക്ഷിച്ച് കണ്ടെത്തുക!
5. HTML ഇമേജുകളിൽ CSS ഉപയോഗിച്ച് വലുപ്പം മാറ്റുന്നു
ഒരു വെബ്സൈറ്റ് രൂപകൽപന ചെയ്യുമ്പോൾ പൊതുവായ വെല്ലുവിളികളിലൊന്ന് ഇമേജ് വലുപ്പങ്ങൾ കൈകാര്യം ചെയ്യുക എന്നതാണ്. പലപ്പോഴും, ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ചിത്രങ്ങൾ കൂടുതൽ ലോഡിംഗ് സമയത്തിന് കാരണമാകുകയും ഉപയോക്തൃ അനുഭവത്തെ പ്രതികൂലമായി ബാധിക്കുകയും ചെയ്യും. ഭാഗ്യവശാൽ, HTML-ലെ ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള ലളിതമായ ഒരു പരിഹാരം CSS വാഗ്ദാനം ചെയ്യുന്നു.
ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള ആദ്യപടി CSS ഉപയോഗിച്ച് അതിൻ്റെ അളവുകൾ സജ്ജമാക്കുക എന്നതാണ്. "വീതി", "ഉയരം" എന്നീ ഗുണങ്ങൾ ഉപയോഗിച്ചാണ് ഇത് നേടുന്നത്. ഉദാഹരണത്തിന്, ഒരു ചിത്രത്തിൻ്റെ വീതി 300 പിക്സലായി സജ്ജീകരിക്കണമെങ്കിൽ, CSS കോഡ് ഇതായിരിക്കും width: 300px;. ഇത് ചെയ്യുമ്പോൾ, ചിത്രം വളരെയധികം കുറച്ചാൽ അതിൻ്റെ ഗുണനിലവാരം നഷ്ടപ്പെടാം അല്ലെങ്കിൽ വികലമായി കാണപ്പെടാം എന്നത് ഓർത്തിരിക്കേണ്ടത് പ്രധാനമാണ്.
ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള മറ്റൊരു ഉപയോഗപ്രദമായ സാങ്കേതികത CSS കംപ്രഷൻ ഉപയോഗിക്കുക എന്നതാണ്. "പശ്ചാത്തല-വലിപ്പം" പ്രോപ്പർട്ടി 100%-ൽ താഴെ മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്നതിലൂടെ ഇത് നേടാനാകും. ഉദാഹരണത്തിന്, ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം പകുതിയായി കുറയ്ക്കണമെങ്കിൽ, CSS കോഡ് ആയിരിക്കും background-size: 50%;. ദൃശ്യപരമായി മാത്രം ക്രമീകരിച്ചിരിക്കുന്നതിനാൽ, ഗുണനിലവാരം നഷ്ടപ്പെടാതെ ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കാൻ ഈ സാങ്കേതികവിദ്യ നിങ്ങളെ അനുവദിക്കുന്നു. എന്നിരുന്നാലും, ഈ സാങ്കേതികവിദ്യ പശ്ചാത്തല ചിത്രങ്ങളിൽ മാത്രമേ പ്രവർത്തിക്കൂ എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. HTML പേജിൽ നേരിട്ട് പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, മുകളിൽ സൂചിപ്പിച്ച "വീതി", "ഉയരം" പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതാണ് നല്ലത്.
CSS ഉപയോഗിച്ച് HTML-ലെ ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കുന്നത് ഒരു വെബ് പേജിൻ്റെ ലോഡിംഗും പ്രകടനവും മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഒരു ഉപയോഗപ്രദമായ സാങ്കേതികതയാണ്. മുകളിൽ സൂചിപ്പിച്ച ഘട്ടങ്ങൾ പിന്തുടർന്ന്, നമുക്ക് ഒരു ചിത്രത്തിൻ്റെ അളവുകൾ ക്രമീകരിക്കാനും അതിൻ്റെ വലുപ്പം ദൃശ്യപരമായി കുറയ്ക്കുന്നതിന് CSS കംപ്രഷൻ ഉപയോഗിക്കാനും കഴിയും. ഒപ്റ്റിമൽ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കാൻ ഈ ക്രമീകരണങ്ങൾ ചെയ്യുമ്പോൾ ചിത്രത്തിൻ്റെ ഗുണനിലവാരം പരിഗണിക്കാൻ എപ്പോഴും ഓർക്കുക.
6. HTML-ൽ ചെറിയ ചിത്രങ്ങളുടെ ലോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള സാങ്കേതിക വിദ്യകൾ
HTML-ൽ ചെറിയ ഇമേജുകളുടെ ലോഡ് ഒപ്റ്റിമൈസ് ചെയ്യാൻ സഹായിക്കുന്ന നിരവധി ടെക്നിക്കുകൾ ഉണ്ട്. ഈ ലക്ഷ്യം നേടുന്നതിനുള്ള ചില ഫലപ്രദമായ തന്ത്രങ്ങൾ ചുവടെയുണ്ട്:
1. ശരിയായ ഫോർമാറ്റ് ഉപയോഗിക്കുക: നിങ്ങളുടെ വെബ്സൈറ്റിനായി ശരിയായ ഇമേജ് ഫോർമാറ്റ് തിരഞ്ഞെടുക്കേണ്ടത് അത്യാവശ്യമാണ്. ചെറിയ ഇമേജുകൾ ഉപയോഗിക്കുമ്പോൾ, JPEG അല്ലെങ്കിൽ WEBP പോലുള്ള ഫോർമാറ്റുകൾ ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു, കാരണം അവ വളരെ ഗുണനിലവാരം നഷ്ടപ്പെടാതെ ചിത്രം കംപ്രസ്സുചെയ്യുന്നു.
2. ഇമേജുകൾ കംപ്രസ് ചെയ്യുക: നിങ്ങളുടെ വെബ്സൈറ്റിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നതിന് മുമ്പ്, ദൃശ്യ നിലവാരത്തെ വളരെയധികം ബാധിക്കാതെ അവയുടെ വലുപ്പം കുറയ്ക്കുന്നതിന് അവയെ കംപ്രസ് ചെയ്യേണ്ടത് പ്രധാനമാണ്. ചിത്രങ്ങൾ വേഗത്തിലും എളുപ്പത്തിലും കംപ്രസ്സ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന നിരവധി ഓൺലൈൻ ടൂളുകൾ ഉണ്ട്.
3. ബ്രൗസർ കാഷെ പ്രയോജനപ്പെടുത്തുക: ചെറിയ ഇമേജുകൾക്കായി ശരിയായ കാഷെ കാലഹരണപ്പെടൽ സജ്ജീകരിക്കുന്നതിലൂടെ, നിങ്ങളുടെ സൈറ്റ് സന്ദർശകർ ഒരിക്കൽ മാത്രം ചിത്രങ്ങൾ ലോഡ് ചെയ്താൽ മതിയെന്ന് നിങ്ങൾക്ക് ഉറപ്പാക്കാനാകും. ഇത് ലോഡിംഗ് സമയം കുറയ്ക്കുകയും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
ഈ ടെക്നിക്കുകൾക്ക് പുറമേ, മൊബൈൽ ഉപകരണങ്ങൾക്കായി ചെറിയ ചിത്രങ്ങളും ഒപ്റ്റിമൈസ് ചെയ്യണമെന്ന് ഓർമ്മിക്കേണ്ടതാണ്. ഇമേജ് വലുപ്പം ക്രമീകരിക്കുന്നതും മൊബൈൽ ഡാറ്റ ഉപയോഗം കുറയ്ക്കുന്നതിന് അലസമായ ലോഡിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിക്കുന്നതും ഇതിൽ ഉൾപ്പെടുന്നു. ഈ തന്ത്രങ്ങൾ ശരിയായി നടപ്പിലാക്കുന്നതിലൂടെ, നിങ്ങളുടെ HTML വെബ്സൈറ്റിൽ കാര്യക്ഷമമായ ഇമേജ് ലോഡിംഗ് നേടാനാകും.
7. HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റാൻ ബാഹ്യ ലൈബ്രറികൾ ഉപയോഗിക്കുന്നു
HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുന്നതിനുള്ള ഒരു പൊതു മാർഗ്ഗം ബാഹ്യ ലൈബ്രറികൾ ഉപയോഗിക്കുക എന്നതാണ്. ചിത്രങ്ങളുടെ വലുപ്പം എളുപ്പത്തിലും കാര്യക്ഷമമായും ഉപയോഗിക്കാനാകുന്ന മുൻനിശ്ചയിച്ച പ്രവർത്തനങ്ങൾ ഈ ലൈബ്രറികൾ നൽകുന്നു.
ഈ ടാസ്ക്കിനായി ഉപയോഗിക്കാവുന്ന നിരവധി ജനപ്രിയ ലൈബ്രറികൾ ഉണ്ട് jQuery, Pillow y lazysizes. ഈ ലൈബ്രറികൾ HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുന്നതിന് വ്യത്യസ്ത രീതികളും പ്രവർത്തനങ്ങളും വാഗ്ദാനം ചെയ്യുന്നു.
ഈ ലൈബ്രറികൾ ഉപയോഗിക്കുന്നതിന്, ആദ്യം നിങ്ങളുടെ HTML പേജിൻ്റെ തലക്കെട്ടിൽ ലൈബ്രറിയിലേക്കുള്ള ലിങ്ക് ഉൾപ്പെടുത്തണം. ഉദാഹരണത്തിന്, നിങ്ങൾ jQuery ഉപയോഗിക്കാൻ തീരുമാനിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ പേജിൻ്റെ തലക്കെട്ടിൽ ഇനിപ്പറയുന്ന ലിങ്ക് ചേർക്കാവുന്നതാണ്:
"`എച്ച്ടിഎംഎൽ
«``
ലൈബ്രറിയിലേക്കുള്ള ലിങ്ക് ഉൾപ്പെടുത്തിയാൽ, നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ തുടങ്ങാം അതിന്റെ പ്രവർത്തനങ്ങൾ നിങ്ങളുടെ HTML കോഡിൽ. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് jQuery ഉപയോഗിച്ച് ഒരു ഇമേജ് വലുപ്പം മാറ്റണമെങ്കിൽ, ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും മാറ്റാൻ നിങ്ങൾക്ക് `css()` ഫംഗ്ഷൻ ഉപയോഗിക്കാം. കോഡ് എങ്ങനെയിരിക്കും എന്നതിൻ്റെ ഒരു ഉദാഹരണം ചുവടെ:
"`എച്ച്ടിഎംഎൽ
«``
നിങ്ങൾ വലുപ്പം മാറ്റാൻ ആഗ്രഹിക്കുന്ന ചിത്രത്തിൻ്റെ ഐഡൻ്റിഫയർ അല്ലെങ്കിൽ ക്ലാസ് ഉപയോഗിച്ച് "img" മാറ്റിസ്ഥാപിക്കണമെന്ന് ഓർമ്മിക്കുക. കൂടാതെ, "300px", "200px" മൂല്യങ്ങൾ നിങ്ങളുടെ സ്വന്തം വലുപ്പം മാറ്റൽ ആവശ്യങ്ങൾക്ക് ക്രമീകരിക്കാൻ കഴിയും.
നിങ്ങൾക്ക് മറ്റൊരു ലൈബ്രറി ഉപയോഗിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, ആ പ്രത്യേക ലൈബ്രറി ഉപയോഗിച്ച് ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുന്നത് എങ്ങനെയെന്ന് അറിയാൻ നിങ്ങൾക്ക് നിർദ്ദിഷ്ട ട്യൂട്ടോറിയലുകളും ഉദാഹരണങ്ങളും ഓൺലൈനിൽ തിരയാവുന്നതാണ്. ഓരോ ലൈബ്രറിക്കും അതിൻ്റേതായ വാക്യഘടനയും രീതികളും ഉണ്ടെന്ന് ഓർക്കുക, അതിനാൽ നിങ്ങൾക്ക് ആവശ്യമുള്ള ഫലങ്ങൾ ലഭിക്കുമെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന ലൈബ്രറിയുടെ നിർദ്ദേശങ്ങളും ഡോക്യുമെൻ്റേഷനും പാലിക്കേണ്ടത് പ്രധാനമാണ്.
8. HTML-ൽ ഒരു ചിത്രം ചെറുതാക്കുമ്പോൾ പ്രവേശനക്ഷമത പരിഗണനകൾ
ഒരു വെബ്സൈറ്റിൽ വലിയ ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നത് ഉപയോക്തൃ അനുഭവത്തെ പ്രതികൂലമായി ബാധിക്കും, പ്രത്യേകിച്ച് വേഗത കുറഞ്ഞ കണക്ഷനുകളുള്ള മൊബൈൽ ഉപകരണങ്ങളിൽ. അതിനാൽ, ലോഡിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും പ്രവേശനക്ഷമത മെച്ചപ്പെടുത്തുന്നതിനും ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കേണ്ടത് പലപ്പോഴും ആവശ്യമാണ്. അടുത്തതായി, HTML-ൽ ഇത് എങ്ങനെ ചെയ്യാമെന്ന് ഞങ്ങൾ വിശദീകരിക്കും.
1. നിങ്ങളുടെ പേജിലേക്ക് ചിത്രം തിരുകാൻ HTML `img` ടാഗ് ഉപയോഗിക്കുക. ചിത്രത്തിൻ്റെ ലൊക്കേഷനിൽ `src` ആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്:
"`എച്ച്ടിഎംഎൽ
«``
2. ചിത്രത്തിൻ്റെ ആവശ്യമുള്ള വീതി പിക്സലുകളിൽ വ്യക്തമാക്കാൻ `വീതി` ആട്രിബ്യൂട്ട് ചേർക്കുക. ഉദാഹരണത്തിന്, ഇമേജ് 300 പിക്സൽ വീതിയുള്ളതായിരിക്കണമെങ്കിൽ, നിങ്ങൾക്ക് അത് ഇനിപ്പറയുന്ന രീതിയിൽ ചെയ്യാം:
"`എച്ച്ടിഎംഎൽ
«``
3. ചിത്രത്തിൻ്റെ ആവശ്യമുള്ള ഉയരം പിക്സലുകളിൽ വ്യക്തമാക്കാൻ `ഉയരം` ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക. ഈ രീതിയിൽ, നിങ്ങൾക്ക് ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും നിയന്ത്രിക്കാനാകും. ഉദാഹരണത്തിന്:
"`എച്ച്ടിഎംഎൽ
«``
ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം മാറ്റുമ്പോൾ, അത് വികലമായി കാണപ്പെടാതിരിക്കാൻ നിങ്ങൾ യഥാർത്ഥ അനുപാതം നിലനിർത്തണമെന്ന് ഓർമ്മിക്കുക. ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നത് അതിൻ്റെ ഗുണനിലവാരത്തെ നേരിട്ട് ബാധിക്കില്ലെന്നത് ശ്രദ്ധിക്കുക, എന്നാൽ വേഗത്തിലുള്ള ലോഡിംഗിനും ഒപ്റ്റിമൽ ഉപയോക്തൃ അനുഭവത്തിനും വലുപ്പവും ഗുണനിലവാരവും തമ്മിലുള്ള ബാലൻസ് കണ്ടെത്തേണ്ടത് പ്രധാനമാണ്. ചിത്രത്തിൻറെ പ്രവേശനക്ഷമത മെച്ചപ്പെടുത്താൻ ചിത്രത്തെ വിവരിക്കുന്ന ആൾട്ട് ടെക്സ്റ്റ് ചേർക്കാനും മറക്കരുത്!
9. HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുമ്പോൾ ഗുണനിലവാരം നിലനിർത്തുന്നതിനുള്ള ശുപാർശകൾ
ഒരു HTML ഇമേജിൻ്റെ ഗുണനിലവാരത്തിൽ വിട്ടുവീഴ്ച ചെയ്യാതെ വലുപ്പം കുറയ്ക്കുമ്പോൾ നാം കണക്കിലെടുക്കേണ്ട വിവിധ സാങ്കേതിക വിദ്യകളും ശുപാർശകളും ഉണ്ട്. ചില പ്രധാന നുറുങ്ങുകൾ ചുവടെ:
1. "വീതി", "ഉയരം" ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക: "വീതി", "ഉയരം" എന്നീ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് പിക്സലുകളിൽ ചിത്രത്തിൻ്റെ കൃത്യമായ അളവുകൾ വ്യക്തമാക്കേണ്ടത് പ്രധാനമാണ്. ഇത് ചിത്രത്തിന് മതിയായ ഇടം റിസർവ് ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു, അനാവശ്യമായ റീസ്കെയിലിംഗ് ഒഴിവാക്കി അതിൻ്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നു.
2. ചിത്രം കംപ്രസ് ചെയ്യുക: ഗുണനിലവാരം നഷ്ടപ്പെടാതെ ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യാൻ നമ്മെ അനുവദിക്കുന്ന ഓൺലൈൻ ടൂളുകളും ഇമേജ് എഡിറ്റിംഗ് പ്രോഗ്രാമുകളും ഉണ്ട്. ഫയൽ വലുപ്പം കുറയ്ക്കുന്നതിലൂടെ, പേജ് ലോഡ് ചെയ്യുന്നത് ഗണ്യമായി വേഗത്തിലാക്കുന്നു. കൂടാതെ, ഇത് ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു ഇമേജ് ഫോർമാറ്റുകൾ TIFF അല്ലെങ്കിൽ BMP പോലുള്ള കനത്ത ഫോർമാറ്റുകൾക്ക് പകരം JPEG അല്ലെങ്കിൽ കംപ്രസ് ചെയ്ത PNG പോലെയുള്ള ഭാരം കുറഞ്ഞ ഫോർമാറ്റുകൾ.
3. CSS ഉപയോഗിച്ച് വലുപ്പം മാറ്റുന്നത് ഒഴിവാക്കുക: CSS ഉപയോഗിച്ച് ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം മാറ്റാൻ സാധിക്കുമെങ്കിലും, ഇത് അതിൻ്റെ ഗുണനിലവാരത്തെ പ്രതികൂലമായി ബാധിക്കും. തുടക്കം മുതൽ ശരിയായ അളവുകൾ ഉള്ള ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നതും CSS വഴി വലിപ്പം നിർബന്ധമാക്കുന്നത് ഒഴിവാക്കുന്നതും നല്ലതാണ്. ചിത്രം ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് ആവശ്യമായ അളവുകൾ മാത്രം ഉപയോഗിക്കുക, അമിതമായി വലുതോ ചെറുതോ ആയ മൂല്യങ്ങൾ ഒഴിവാക്കുക.
ഇമേജ് ഒപ്റ്റിമൈസേഷൻ വെബ് ഡെവലപ്മെൻ്റിൻ്റെ ഒരു പ്രധാന ഭാഗമാണെന്ന് ഓർമ്മിക്കുക, കാരണം വേഗത കുറഞ്ഞ പേജ് ഉപയോക്തൃ അനുഭവത്തെ പ്രതികൂലമായി ബാധിക്കും. ഈ ശുപാർശകൾ പാലിക്കുന്നതിലൂടെയും ഉചിതമായ ടൂളുകൾ ഉപയോഗിക്കുന്നതിലൂടെയും, ഒരു HTML ഇമേജിൻ്റെ ഗുണനിലവാരം നഷ്ടപ്പെടുത്താതെ തന്നെ അതിൻ്റെ വലുപ്പം കുറയ്ക്കാൻ നിങ്ങൾക്ക് കഴിയും, അങ്ങനെ വേഗതയേറിയതും കൂടുതൽ കാര്യക്ഷമവുമായ ഒരു വെബ് പേജ് നേടാനാകും.
10. HTML-ൽ ഒരു ചിത്രം ചെറുതാക്കാനുള്ള കോഡ് ഉദാഹരണങ്ങൾ
HTML-ൽ ഒരു ചിത്രം ചെറുതാക്കാൻ, ചിത്രത്തിൻ്റെ വലുപ്പം മാറ്റാൻ നിങ്ങൾക്ക് CSS ഉപയോഗിക്കാം. നിങ്ങൾക്ക് ഒരു റഫറൻസായി ഉപയോഗിക്കാവുന്ന ചില കോഡ് ഉദാഹരണങ്ങൾ ഇതാ:
1. ചിത്രത്തിൻ്റെ വീതി സജ്ജീകരിക്കാൻ CSS വീതി പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം പകുതിയായി കുറയ്ക്കണമെങ്കിൽ, നിങ്ങൾക്ക് വീതി 50% ആയി സജ്ജമാക്കാം.
2. ചിത്രത്തിൻ്റെ ഉയരം സജ്ജീകരിക്കുന്നതിന് CSS "ഉയരം" എന്ന പ്രോപ്പർട്ടി ഉപയോഗിച്ചാണ് ചിത്രത്തിൻ്റെ വലുപ്പം മാറ്റാനുള്ള മറ്റൊരു മാർഗ്ഗം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ചിത്രത്തിൻ്റെ വലുപ്പം നാലിലൊന്ന് കുറയ്ക്കണമെങ്കിൽ, നിങ്ങൾക്ക് ഉയരം 25% ആയി സജ്ജമാക്കാം.
3. ചിത്രത്തിൻ്റെ വലുപ്പം മാറ്റാൻ നിങ്ങൾക്ക് "പരിവർത്തനം" CSS പ്രോപ്പർട്ടി ഉപയോഗിക്കാനും കഴിയും. ഉദാഹരണത്തിന്, ചിത്രത്തിൻ്റെ വലുപ്പം പകുതി ആനുപാതികമായി കുറയ്ക്കണമെങ്കിൽ, നിങ്ങൾക്ക് "സ്കെയിൽ(0.5)" ഫംഗ്ഷൻ ഉപയോഗിക്കാം.
ഇവ വെറും ഉദാഹരണങ്ങളാണെന്നും നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് മൂല്യങ്ങൾ ക്രമീകരിക്കാമെന്നും ഓർക്കുക. കൂടാതെ, HTML, CSS എന്നിവ ഉപയോഗിച്ച് ചിത്രത്തിൻ്റെ വലുപ്പം മാറ്റുന്നത് ബ്രൗസറിലെ ഡിസ്പ്ലേയെ മാത്രമേ ബാധിക്കുകയുള്ളൂ, ഇമേജ് ഫയലിൻ്റെ യഥാർത്ഥ വലുപ്പത്തെ ബാധിക്കില്ല.
11. HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുമ്പോൾ പൊതുവായ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു
നടപടിക്രമം താഴെ വിശദമായി വിവരിച്ചിരിക്കുന്നു. ഘട്ടം ഘട്ടമായി HTML-ൽ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുമ്പോൾ പൊതുവായ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിന്:
1. CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുക: ചിത്രങ്ങളുടെ വലുപ്പം ക്രമീകരിക്കുന്നതിന് HTML ഒന്നിലധികം CSS പ്രോപ്പർട്ടികൾ വാഗ്ദാനം ചെയ്യുന്നു. പിക്സലുകളിലോ ശതമാനത്തിലോ ആവശ്യമുള്ള വീതി വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന "വീതി" പ്രോപ്പർട്ടി ആണ് ഏറ്റവും സാധാരണമായ ഒന്ന്. ഉദാഹരണത്തിന്, ചിത്രത്തിൻ്റെ വീതി 300 പിക്സലുകളായി സജ്ജമാക്കുന്നു. അതുപോലെ, ഉയരം വ്യക്തമാക്കാൻ "ഉയരം" പ്രോപ്പർട്ടി ഉപയോഗിക്കാം.
2. വീക്ഷണാനുപാതം നിലനിർത്തുക: വക്രീകരണ പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ, ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുമ്പോൾ യഥാർത്ഥ വീക്ഷണാനുപാതം നിലനിർത്തുന്നത് നല്ലതാണ്. ഇത് നേടുന്നതിന്, നിങ്ങൾക്ക് "വീതി" പ്രോപ്പർട്ടി ഉപയോഗിക്കുകയും "ഉയരം" വസ്തുവിൻ്റെ മൂല്യം ശൂന്യമാക്കുകയും ചെയ്യുക അല്ലെങ്കിൽ "ഓട്ടോ" ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, .
3. ബാഹ്യ ഉപകരണങ്ങൾ ഉപയോഗിക്കുക: നിങ്ങൾക്ക് ഒരേ സമയം നിരവധി ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റണമെങ്കിൽ അല്ലെങ്കിൽ വലുപ്പം മാറ്റുന്ന പ്രക്രിയയിൽ കൂടുതൽ വിപുലമായ നിയന്ത്രണം ആവശ്യമാണെങ്കിൽ, ബാഹ്യ ഉപകരണങ്ങൾ ഉപയോഗിക്കാം. ചില ജനപ്രിയ ഓപ്ഷനുകളിൽ ഇമേജ് എഡിറ്റിംഗ് പ്രോഗ്രാമുകൾ ഉൾപ്പെടുന്നു അഡോബി ഫോട്ടോഷോപ്പ് അല്ലെങ്കിൽ GIMP, അല്ലെങ്കിൽ TinyPNG അല്ലെങ്കിൽ Kraken.io പോലുള്ള ഓൺലൈൻ സേവനങ്ങൾ. ഈ ടൂളുകൾ സാധാരണയായി ഓട്ടോമാറ്റിക് റീസൈസിംഗ്, കംപ്രഷൻ അല്ലെങ്കിൽ ഇമേജുകളുടെ റീഫോർമാറ്റിംഗ് പോലുള്ള കൂടുതൽ വിപുലമായ ഓപ്ഷനുകൾ വാഗ്ദാനം ചെയ്യുന്നു.
എ സംരക്ഷിക്കാൻ എപ്പോഴും ഓർക്കുക ബാക്കപ്പ് എന്തെങ്കിലും പരിഷ്ക്കരണങ്ങൾ വരുത്തുന്നതിന് മുമ്പ് യഥാർത്ഥ ചിത്രങ്ങളുടെ വലുപ്പം ശരിയാണെന്ന് ഉറപ്പാക്കാൻ വ്യത്യസ്ത ഉപകരണങ്ങളിലും സ്ക്രീൻ വലുപ്പത്തിലും പരീക്ഷിക്കുക. ഈ ഘട്ടങ്ങൾ പാലിക്കുക, HTML-ൽ നിങ്ങളുടെ ചിത്രങ്ങളുടെ വലുപ്പം മാറ്റുമ്പോൾ പൊതുവായ പ്രശ്നങ്ങൾ ഒഴിവാക്കുക.
12. HTML-ൽ ഇമേജ് കംപ്രഷൻ ടെക്നിക്കുകളുടെ പ്രയോഗം
ഒരു വെബ്സൈറ്റിൽ ഇമേജുകൾ ലോഡുചെയ്യുന്നതും പ്രദർശിപ്പിക്കുന്നതും ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് HTML-ൽ ഇമേജ് കംപ്രഷൻ ടെക്നിക്കുകളുടെ ഉപയോഗം അത്യാവശ്യമാണ്. കംപ്രഷൻ വലിപ്പം കുറയ്ക്കുന്നു ഇമേജ് ഫയലുകൾ അതിൻ്റെ ദൃശ്യ നിലവാരത്തെ കാര്യമായി ബാധിക്കാതെ, ഇത് പേജിൻ്റെ പ്രകടനവും ഉപയോക്തൃ അനുഭവവും മെച്ചപ്പെടുത്തുന്നു.
വെബ്സൈറ്റിലേക്ക് അപ്ലോഡ് ചെയ്യുന്നതിന് മുമ്പ് ചിത്രങ്ങളുടെ ഗുണനിലവാരവും വലുപ്പവും ക്രമീകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന അഡോബ് ഫോട്ടോഷോപ്പ് അല്ലെങ്കിൽ ജിമ്പ് പോലുള്ള നിർദ്ദിഷ്ട പ്രോഗ്രാമുകളുടെയും ടൂളുകളുടെയും ഉപയോഗം പോലുള്ള നിരവധി കംപ്രഷൻ രീതികൾ HTML-ൽ പ്രയോഗിക്കാൻ കഴിയും. ഗുണനിലവാരം നഷ്ടപ്പെടാതെ ചിത്രങ്ങൾ സ്വയമേവ കംപ്രസ് ചെയ്യുന്ന ഓൺലൈൻ സേവനങ്ങൾ ഉപയോഗിക്കാനും സാധിക്കും.
കൂടാതെ, JPEG, PNG അല്ലെങ്കിൽ WEBP പോലുള്ള വെബ്-സൗഹൃദ ഇമേജ് ഫോർമാറ്റുകൾ ഉപയോഗിക്കേണ്ടത് പ്രധാനമാണ്. ഈ ഫോർമാറ്റുകൾ വ്യത്യസ്ത തലത്തിലുള്ള കംപ്രഷനും സുതാര്യതയ്ക്കുള്ള പിന്തുണയും വാഗ്ദാനം ചെയ്യുന്നു, അതിനാൽ വെബ്സൈറ്റിലെ ചിത്രത്തിൻ്റെ തരത്തെയും അതിൻ്റെ ഉദ്ദേശ്യത്തെയും അടിസ്ഥാനമാക്കി ഏറ്റവും അനുയോജ്യമായത് തിരഞ്ഞെടുക്കേണ്ടത് പ്രധാനമാണ്. ബ്രൗസർ വിൻഡോയിൽ ദൃശ്യമാകുമ്പോൾ മാത്രം ചിത്രം ലോഡ് ചെയ്യുന്ന, പേജ് ലോഡിംഗ് സമയം വേഗത്തിലാക്കാൻ സഹായിക്കുന്ന അലസമായ ലോഡിംഗ് ടെക്നിക് നിങ്ങൾക്ക് പ്രയോഗിക്കാവുന്നതാണ്.
ചുരുക്കത്തിൽ, ഒരു വെബ്സൈറ്റിൽ ചിത്രങ്ങളുടെ ലോഡിംഗും പ്രദർശനവും മെച്ചപ്പെടുത്തേണ്ടത് അത്യാവശ്യമാണ്. നിർദ്ദിഷ്ട പ്രോഗ്രാമുകളും ടൂളുകളും ഉപയോഗിക്കുന്നത്, ഉചിതമായ ഇമേജ് ഫോർമാറ്റ് തിരഞ്ഞെടുക്കുന്നതും അലസമായ ലോഡിംഗ് പോലുള്ള സാങ്കേതിക വിദ്യകൾ പ്രയോഗിക്കുന്നതും ഒരു നേട്ടം കൈവരിക്കുന്നതിന് ശുപാർശ ചെയ്യുന്ന ചില സമ്പ്രദായങ്ങളാണ്. മെച്ചപ്പെട്ട പ്രകടനം ഒപ്പം ഒപ്റ്റിമൽ ഉപയോക്തൃ അനുഭവവും. ഇമേജുകൾ വേഗത്തിലും ഫലപ്രദമായും ലോഡ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ, വ്യത്യസ്ത ഉപകരണങ്ങളിലും കണക്ഷനുകളിലും വെബ്സൈറ്റ് പരീക്ഷിക്കാൻ എപ്പോഴും ഓർക്കുക.
13. HTML-ലെ വ്യത്യസ്ത ഉപകരണങ്ങളിലേക്ക് ചിത്രങ്ങൾ എങ്ങനെ പൊരുത്തപ്പെടുത്താം
HTML-ൽ വ്യത്യസ്ത ഉപകരണങ്ങളിലേക്ക് ചിത്രങ്ങൾ പൊരുത്തപ്പെടുത്തുന്നതിന് വ്യത്യസ്ത മാർഗങ്ങളുണ്ട്. ഈ പ്രശ്നം പരിഹരിക്കുന്നതിനുള്ള ഒരു ഘട്ടം ഘട്ടമായുള്ള രീതി ചുവടെ വിശദമായി വിവരിക്കും.
1. “srcset” ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി വ്യത്യസ്ത ഇമേജുകൾ വ്യക്തമാക്കാൻ ഈ ആട്രിബ്യൂട്ട് നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ചെയ്യുന്നതിന്, വ്യത്യസ്ത ഇമേജ് ഫയലുകൾ "img" ടാഗിൽ ഉൾപ്പെടുത്തുകയും കോമകളാൽ വേർതിരിക്കുകയും വേണം. ഉദാഹരണത്തിന്:
"`എച്ച്ടിഎംഎൽ
«``
സ്ക്രീനിന് 320 പിക്സലുകൾ വരെ വീതിയുണ്ടെങ്കിൽ "small-image.jpg", 320px-ൽ കൂടുതലാണെങ്കിൽ "medium-image.jpg", എന്നാൽ 768px-നേക്കാൾ കുറവോ തുല്യമോ ആണെങ്കിൽ, "small-image.jpg" പ്രദർശിപ്പിക്കുമെന്ന് ഈ കോഡ് സൂചിപ്പിക്കുന്നു. വലിയ-ചിത്രം .jpg» വീതി 768px-ൽ കൂടുതലും എന്നാൽ 1024px-നേക്കാൾ കുറവോ തുല്യമോ ആണെങ്കിൽ.
2. CSS മീഡിയ അന്വേഷണങ്ങൾ ഉപയോഗിക്കുക: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി വ്യത്യസ്ത ശൈലികൾ നിർവചിക്കുന്നതിന് CSS മീഡിയ അന്വേഷണ നിയമങ്ങൾ ഉപയോഗിക്കുക എന്നതാണ് മറ്റൊരു ഓപ്ഷൻ. ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് ഘടകങ്ങളുടെ പശ്ചാത്തലമായി ഇമേജുകൾ ഉപയോഗിക്കാം അല്ലെങ്കിൽ "വീതി" ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് വ്യത്യസ്ത ഇമേജ് വലുപ്പങ്ങൾ സജ്ജമാക്കാം. ഉദാഹരണത്തിന്:
"`എച്ച്ടിഎംഎൽ
«``
ഈ കോഡ് 480px വരെ വീതിയുള്ള സ്ക്രീനുകളിൽ "ഇമേജ്" ക്ലാസ് ഉള്ള മൂലകത്തിൻ്റെ പശ്ചാത്തലമായി "small-image.jpg" പ്രദർശിപ്പിക്കുന്നു, 480px-ൽ കൂടുതൽ വലിപ്പമുള്ള സ്ക്രീനുകളിൽ "medium-image.jpg", എന്നാൽ 1024px-നേക്കാൾ കുറവോ തുല്യമോ, കൂടാതെ " 1024px-നേക്കാൾ വലിയ സ്ക്രീനുകളിൽ "image-grande.jpg".
3. ചട്ടക്കൂടുകളും ലൈബ്രറികളും ഉപയോഗിക്കുക: റെസ്പോൺസീവ് ഇമേജസ് കമ്മ്യൂണിറ്റി ഗ്രൂപ്പ് (RICG), പിക്ചർഫിൽ, ലേസി ലോഡ് എന്നിങ്ങനെ ഇമേജ് അഡാപ്റ്റേഷൻ പ്രക്രിയയെ ലളിതമാക്കുന്ന നിരവധി ചട്ടക്കൂടുകളും ലൈബ്രറികളും ഉണ്ട്. ഈ ടൂളുകൾ മുകളിൽ സൂചിപ്പിച്ച സാങ്കേതിക വിദ്യകൾ നടപ്പിലാക്കാൻ സഹായിക്കുകയും വ്യത്യസ്ത ഉപകരണങ്ങളിലേക്ക് ഇമേജുകൾ കൂടുതൽ കാര്യക്ഷമവും യാന്ത്രികമായി പൊരുത്തപ്പെടുത്താൻ അനുവദിക്കുകയും ചെയ്യുന്നു.
14. ഉപസംഹാരം: HTML-ൽ ഒരു ചിത്രം ചെറുതാക്കാനുള്ള മികച്ച സമ്പ്രദായങ്ങൾ
ചുരുക്കത്തിൽ, HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നത് താരതമ്യേന ലളിതമായ ഒരു പ്രക്രിയയാണ്, അത് കുറച്ച് മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ നേടാനാകും. അങ്ങനെ ചെയ്യുന്നതിനുള്ള ചില നുറുങ്ങുകളും ശുപാർശകളും ചുവടെയുണ്ട്:
1. വലുപ്പ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക: ലേബലിൻ്റെ "വീതി", "ഉയരം" ആട്രിബ്യൂട്ട് HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ അളവുകൾ വ്യക്തമാക്കുന്നതിനുള്ള ഒരു ലളിതമായ മാർഗമാണ്.
ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും യഥാക്രമം 500, 300 പിക്സലുകളായി സജ്ജമാക്കും. ഇത് ചിത്രത്തിൻ്റെ വിഷ്വൽ വലുപ്പത്തെ മാത്രമേ പരിഷ്കരിക്കൂ, അതിൻ്റെ ഫയൽ വലുപ്പമല്ല എന്നത് എടുത്തുപറയേണ്ടതാണ്.
2. ചിത്രം കംപ്രസ് ചെയ്യുക: കംപ്രഷൻ ഇമേജ് ഫയലിൻ്റെ ദൃശ്യ നിലവാരത്തെ ഗുരുതരമായി ബാധിക്കാതെ വലുപ്പം കുറയ്ക്കുന്നു. JPEG, PNG അല്ലെങ്കിൽ GIF ഫോർമാറ്റിൽ ചിത്രങ്ങൾ കംപ്രസ്സുചെയ്യാൻ നിരവധി ഓൺലൈൻ ഉപകരണങ്ങളും സോഫ്റ്റ്വെയറുകളും ലഭ്യമാണ്. നിങ്ങൾ ഉചിതമായ ഒരു കംപ്രഷൻ ഫോർമാറ്റ് ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്തുകയും നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ക്രമീകരണങ്ങൾ ക്രമീകരിക്കുകയും ചെയ്യുക.
3. വെബിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: ഉപയോഗത്തിനായി ഒരു ഇമേജ് ഒപ്റ്റിമൈസ് ചെയ്യാൻ മറ്റ് വഴികളുണ്ട് വെബിൽ. മികച്ച കംപ്രഷൻ അനുപാതം നൽകുന്ന WebP അല്ലെങ്കിൽ SVG പോലുള്ള കൂടുതൽ കാര്യക്ഷമമായ ഇമേജ് ഫോർമാറ്റുകൾ നിങ്ങൾക്ക് ഉപയോഗിക്കാം. കൂടാതെ, മൊബൈൽ ഉപകരണങ്ങളിൽ മാത്രമേ ചിത്രം ദൃശ്യമാകൂ എങ്കിൽ അതിൻ്റെ മിഴിവ് മാറ്റുന്നത് നിങ്ങൾ പരിഗണിക്കേണ്ടതാണ്. **
4. HTML കോഡ് ചെറുതാക്കുക: മറ്റൊരു പ്രധാന വശം ചിത്രം ഉൾക്കൊള്ളുന്ന HTML കോഡിൻ്റെ വലുപ്പം കുറയ്ക്കുക എന്നതാണ്. ഇത് നേടുന്നതിന്, നിങ്ങൾക്ക് അനാവശ്യ വൈറ്റ്സ്പെയ്സും കമൻ്റുകളും നീക്കംചെയ്യാം. CSS Sprites ടെക്നിക് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒന്നിലധികം ചിത്രങ്ങൾ ഒരു സ്പ്രൈറ്റ് ഷീറ്റിലേക്ക് സംയോജിപ്പിക്കാനും കഴിയും. **
** ഒന്നിലധികം ഇമേജ് അഭ്യർത്ഥനകൾ ലഭിക്കുമ്പോൾ ഇത് സെർവർ ഓവർഹെഡ് കുറയ്ക്കുന്നു. കൂടാതെ, ബ്രൗസറിന് ഇമേജുകൾ അതിൻ്റെ താൽക്കാലിക മെമ്മറിയിൽ സംരക്ഷിക്കാനും ഓരോ സന്ദർശനത്തിലും അവ വീണ്ടും ഡൗൺലോഡ് ചെയ്യാതിരിക്കാനും കാഷിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
ഈ മികച്ച രീതികൾ പിന്തുടരുക, നിങ്ങളുടെ HTML ഇമേജുകളുടെ വലുപ്പം കാര്യക്ഷമമായി കുറയ്ക്കാൻ നിങ്ങൾക്ക് തീർച്ചയായും കഴിയും, അങ്ങനെ നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുകയും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുകയും ചെയ്യും.
ഉപസംഹാരമായി, ഒരു വെബ്സൈറ്റിൻ്റെ ലോഡിംഗ് വേഗത ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിനുമുള്ള ഒരു പ്രധാന പ്രക്രിയയാണ് HTML-ൽ ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം കുറയ്ക്കുന്നത്. സൂചിപ്പിച്ച ഉപകരണങ്ങളും സാങ്കേതിക വിദ്യകളും വഴി, ഡെവലപ്പർമാർക്ക് ഈ ലക്ഷ്യം ഫലപ്രദമായി കൈവരിക്കാൻ കഴിയും.
ഇമേജ് വലുപ്പം വ്യക്തമാക്കുന്നതിന് HTML ടാഗുകൾ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾ ലോഡ് ചെയ്യുന്നതിൽ പ്രശ്നങ്ങൾ ഒഴിവാക്കുകയും വ്യത്യസ്ത ഉപകരണങ്ങളിലും സ്ക്രീനുകളിലും ചിത്രം ശരിയായി പ്രദർശിപ്പിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു. കൂടാതെ, JPEG അല്ലെങ്കിൽ WebP പോലുള്ള ഫോർമാറ്റുകൾ ഉപയോഗിച്ച് ചിത്രം കംപ്രസ്സുചെയ്യുന്നതിലൂടെ, കാര്യമായ ദൃശ്യ നിലവാരം നഷ്ടപ്പെടാതെ ഫയലിൻ്റെ ഭാരം കുറയുന്നു.
ഓരോ വെബ്സൈറ്റും അദ്വിതീയമാണെന്നും നിങ്ങളുടെ നിർദ്ദിഷ്ട ആവശ്യങ്ങൾക്കനുസരിച്ച് അധിക ക്രമീകരണങ്ങൾ ആവശ്യമായി വന്നേക്കാമെന്നും ഓർത്തിരിക്കേണ്ടത് പ്രധാനമാണ്. ഒപ്റ്റിമൽ പ്രകടനം നിലനിർത്താൻ ആനുകാലിക പരിശോധനയും ഒപ്റ്റിമൈസേഷനും നടത്തുന്നത് നല്ലതാണ്.
ചുരുക്കത്തിൽ, ഈ ടെക്നിക്കുകൾ പിന്തുടർന്ന്, HTML ഇമേജുകളുടെ വലുപ്പം ശരിയായി ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിലൂടെ, ഡവലപ്പർമാർക്ക് മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം നൽകിക്കൊണ്ട് വേഗതയേറിയതും കാര്യക്ഷമവുമായ ഒരു വെബ്സൈറ്റ് നേടാനാകും. ലഭ്യമായ ഉപകരണങ്ങളുടെയും സാങ്കേതികതകളുടെയും ശരിയായ ഉപയോഗത്തിലൂടെ, ഡിജിറ്റൽ ലോകത്ത് ഇമേജ് വലുപ്പം ഇനി ഒരു പരിമിതിയായിരിക്കില്ല.
ഞാൻ സെബാസ്റ്റ്യൻ വിഡാൽ, സാങ്കേതികവിദ്യയിലും DIYയിലും അഭിനിവേശമുള്ള ഒരു കമ്പ്യൂട്ടർ എഞ്ചിനീയറാണ്. കൂടാതെ, ഞാൻ അതിൻ്റെ സ്രഷ്ടാവാണ് tecnobits.com, ടെക്നോളജി കൂടുതൽ ആക്സസ് ചെയ്യാനും എല്ലാവർക്കും മനസ്സിലാക്കാനും കഴിയുന്ന തരത്തിൽ ഞാൻ ട്യൂട്ടോറിയലുകൾ പങ്കിടുന്നു.