IMG ടാഗ് ആട്രിബ്യൂട്ടുകൾ

ചിത്രങ്ങൾ, വസ്തുക്കൾ എന്നിവയ്ക്കായി HTML IMG ടാഗ് ഉപയോഗിക്കുക

ഒരു വെബ് പേജിലെ ചിത്രങ്ങളും മറ്റ് സ്റ്റാറ്റിക് ഗ്രാഫിക്കൽ ഒബ്ജക്റ്റുകളും ചേർക്കുന്നതിനാണ് HTML IMG ടാഗ് നിയന്ത്രിക്കുന്നത്. ആകർഷണീയമായ, ചിത്ര പ്രാധാന്യമുള്ള ഒരു വെബ്സൈറ്റ് രൂപകൽപ്പന ചെയ്യുന്ന നിങ്ങളുടെ കഴിവിന് സമൃദ്ധമായ നിരവധി നിർബന്ധിത ഓപ്ഷനുകൾ ഈ ടാഗ് പിന്തുണയ്ക്കുന്നു.

പൂർണ്ണമായും രൂപപ്പെടുത്തിയ HTML IMG ടാഗിന്റെ ഒരു ഉദാഹരണം:

ആവശ്യമായ IMG ടാഗ് ആട്രിബ്യൂട്ടുകൾ

SRC. ഒരു വെബ് പേജിൽ പ്രദർശിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് ഒരു ഇമേജ് മാത്രമേ ലഭിക്കുകയുള്ളൂ SRC ആട്രിബ്യൂട്ട്. ഈ ആട്രിബ്യൂട്ട് ഇമേജ് ഫയലിന്റെ പേരും സ്ഥാനവും പ്രദർശിപ്പിക്കേണ്ടതുണ്ട്.

ALT. ശരിയായ XHTML, HTML4 എന്നിവ എഴുതാൻ ALT ആട്രിബ്യൂട്ടും ആവശ്യമാണ്. ഈ ആട്രിബ്യൂട്ട് ചിത്രത്തെ വിശദീകരിക്കുന്ന ടെക്സ്റ്റ് ഉള്ള നോൺപ്വിച്വൽ ബ്രൗസറുകളാണ് ഉപയോഗിക്കുന്നത്. ബ്രൗസറുകൾ വ്യത്യസ്ത രീതികളിൽ ബദൽ പാഠം പ്രദർശിപ്പിക്കുന്നു. ചിത്രത്തിൽ നിങ്ങളുടെ മൗസ് ഇടുന്ന സമയത്ത് ചിലത് പോപ്പ്-അപ്പായി പ്രദർശിപ്പിക്കുന്നു, മറ്റുള്ളവർ നിങ്ങൾ ചിത്രത്തിൽ റൈറ്റ് ക്ലിക്ക് ചെയ്യുമ്പോൾ അത് സ്വഭാവവിശേഷങ്ങളിൽ പ്രദർശിപ്പിക്കും, ചിലർ അത് പ്രദർശിപ്പിക്കില്ല.

വെബ് പേജിന്റെ വാചകത്തിന് പ്രസക്തമായതോ പ്രധാനപ്പെട്ടതോ ആയ ഇമേജിനെക്കുറിച്ചുള്ള കൂടുതൽ വിശദാംശങ്ങൾ നൽകുന്നതിന് ഇതര ടെക്സ്റ്റ് ഉപയോഗിക്കുക. എന്നാൽ സ്ക്രീൻ റീഡറുകളിലും മറ്റ് പാഠ-മാത്രം ബ്രൌസറുകളിലും പേജിൽ ശേഷിക്കുന്ന വാചകത്തോടെയുള്ള ടെക്സ്റ്റ് ഇൻലൈൻ വായിക്കും. ആശയക്കുഴപ്പം ഒഴിവാക്കാൻ, ഉദാഹരണമായി (ഉദാഹരണത്തിന്), "ലോഗോ" എന്നതിന് പകരം "വെബ് ഡിസൈൻ, HTML കുറിച്ച്" എന്നത് വിശദമായി ഉപയോഗിക്കുക.

HTML5 ൽ, ALT ആട്രിബ്യൂട്ട് എല്ലായ്പ്പോഴും ആവശ്യമില്ല, കാരണം അതിലേയ്ക്ക് കൂടുതൽ വിവരണം ചേർക്കുന്നതിന് നിങ്ങൾ ഒരു അടിക്കുറിപ്പ് ഉപയോഗിക്കാൻ കഴിയും. പൂർണ്ണമായ വിവരണമുള്ള ഒരു ID സൂചിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് ARIA-DESCRIBEDBY എന്ന ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം.

ഒരു വെബ്പേജിന്റെ അല്ലെങ്കിൽ ഐക്കണുകളുടെ മുകളിലത്തെ ഗ്രാഫിക് പോലെ, ചിത്രം പൂർണ്ണമായും അലങ്കാരമാണെങ്കിൽ, ഇതര ടെക്സ്റ്റും ആവശ്യമില്ല. പക്ഷേ ഉറപ്പില്ലെങ്കിൽ, ഒളിച്ചു വെച്ച വാചകം ഉൾപ്പെടുത്തുക.

ശുപാർശചെയ്ത IMG ആട്രിബ്യൂട്ടുകൾ

വീതിയും ഉയരം . നിങ്ങൾ എല്ലായ്പ്പോഴും WIDTH, HEIGHT ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് ഉപയോഗിക്കുന്നതിനുള്ള സ്വഭാവം നേടേണ്ടതുണ്ട്. കൂടാതെ എല്ലായ്പ്പോഴും യഥാർത്ഥ വലിപ്പം ഉപയോഗിക്കുകയും നിങ്ങളുടെ ഇമേജുകൾ ബ്രൌസറിനൊപ്പം മാറ്റുകയുമാകില്ല.

ഈ ആട്രിബ്യൂട്ടുകൾ പേജിന്റെ റെൻഡറിംഗ് വേഗത വർദ്ധിപ്പിക്കും കാരണം ഇമേജിനുള്ള ഡിസൈനിൽ ബ്രൌസറിനു സ്ഥലം ലഭ്യമാക്കാനും, മുഴുവൻ ഇമേജും ഡൌൺലോഡ് ചെയ്യാനായി കാത്തിരിക്കാതെ ബാക്കി ഉള്ളടക്കം ഡൌൺലോഡ് ചെയ്യുന്നത് തുടരുകയും ചെയ്യുന്നു.

മറ്റ് ഉപയോഗപ്രദമായ IMG വിശേഷണങ്ങൾ

TITLE . ആട്രിബ്യൂട്ട് ഏതെങ്കിലും എച്ച്ടിഎംഎൽ ഘടകത്തിലേക്ക് പ്രയോഗിക്കാൻ കഴിയുന്ന ഒരു ഗ്ലോബൽ ആട്രിബ്യൂട്ടാണ്. മാത്രമല്ല, ഇമേജിനുള്ള അധിക വിവരങ്ങൾ ചേർക്കാൻ TITLE ആട്രിബ്യൂട്ട് നിങ്ങളെ അനുവദിക്കുന്നു.

മിക്ക ബ്രൗസറുകളും TITLE ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്ക്കുന്നു, പക്ഷേ അവ വ്യത്യസ്ത രീതിയിലാണ് ചെയ്യുന്നത്. ഉപയോക്താവിന് ചിത്രത്തിൽ റൈറ്റ് ക്ലിക് ചെയ്യുമ്പോൾ മറ്റുള്ളവർ വിവരങ്ങൾ സ്ക്രീനുകളിൽ പ്രദർശിപ്പിക്കുമ്പോൾ ചിലത് പോപ്പ്അപ്പ് ആയി പ്രദർശിപ്പിക്കുന്നു. ചിത്രത്തെക്കുറിച്ചുള്ള അധിക വിവരങ്ങൾ എഴുതുന്നതിന് നിങ്ങൾക്ക് TITLE ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം, എന്നാൽ ഈ വിവരങ്ങൾ മറച്ചുവച്ചതോ ദൃശ്യമാകുമ്പോഴോ കണക്കാക്കരുത്. തിരയൽ എഞ്ചിനുകൾക്കായി കീവേഡുകൾ മറയ്ക്കാൻ നിങ്ങൾ തീർച്ചയായും ഇത് തീർച്ചയായും ഉപയോഗിക്കരുത്. ഈ പ്രാക്ടീസ് ഇപ്പോൾ മിക്ക സെർച്ച് എഞ്ചിനുകളിലും പിഴ ഈടാക്കുന്നു.

USEMAP ഉം ISMAP ഉം . ഈ രണ്ട് ആട്രിബ്യൂട്ടുകൾ ക്ലിയർ-സൈഡ് (), സെർവർ സൈഡ് (ISMAP) ഇമേജ് മാപ്പുകൾ നിങ്ങളുടെ ചിത്രങ്ങളിലേക്ക് ക്രമീകരിക്കുന്നു.

LONGDESC . ആട്രിബ്യൂട്ട് ഇമേജിന്റെ കൂടുതൽ വിവരണത്തിലേക്ക് URL- കൾ പിന്തുണയ്ക്കുന്നു. ഈ സവിശേഷത നിങ്ങളുടെ ചിത്രങ്ങൾ കൂടുതൽ ആക്സസ് ചെയ്യാവുന്നതാക്കുന്നു.

ഒഴിവാക്കിയതും കാലഹരണപ്പെട്ടതുമായ IMG വിശേഷണങ്ങൾ

പല ആട്രിബ്യൂട്ടുകൾ ഇപ്പോൾ HTML5 ൽ കാലഹരണപ്പെട്ടു അല്ലെങ്കിൽ HTML4- ൽ നിന്നും നീക്കം ചെയ്തിരിക്കുന്നു. മികച്ച HTML- നായി, ഈ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നതിനുപകരം നിങ്ങൾക്ക് മറ്റ് പരിഹാരങ്ങൾ കണ്ടെത്തേണ്ടതുണ്ട്.

ബോർഡർ . ചിത്രത്തിന് ചുറ്റുമുള്ള ഏതെങ്കിലും അതിർത്തിയിലുള്ള വീതി പിക്സലാണ് ഈ ആട്രിബ്യൂട്ട് നിശ്ചയിക്കുന്നത്. ഇത് HTML4 ലെ സിഎസിക്ക് അനുകൂലമായതിനാൽ HTML5 ൽ കാലഹരണപ്പെട്ടു.

അൽ ഐൻ ഈ ആട്രിബ്യൂട്ട് നിങ്ങളെ പാഠത്തിൽ ഒരു ഇമേജ് സ്ഥാപിക്കാനും അതിന്റെ ചുറ്റുമുള്ള ടെക്സ്റ്റ് ഫ്ലോ ഉപയോഗിക്കാനും അനുവദിക്കുന്നു. ഒരു ഇമേജിനെ വലത്തേക്കോ ഇടത്തേക്കോ നിങ്ങൾക്ക് അലൈൻ ചെയ്യാനാകും. ഇത് HTML4 ലെ ഫ്ലോട്ട് CSS പ്രോപ്പർട്ടിക്ക് എതിരായതിനാൽ HTML5 ൽ കാലഹരണപ്പെട്ടു.

HSPACE , VSPACE എന്നിവ . എസ് കൂടാതെ VSPACE ആട്രിബ്യൂട്ടുകൾ വൈറ്റ് സ്പേസ് തിരശ്ചീനമായി (HSPACE) ലംബമായി (VSPACE) ചേർക്കുന്നു. ഗ്രാഫിക് (മുകളിൽ, താഴെ, ഇടത്, വലത്) ഇരുവശത്തും വെള്ള സ്പെയ്സ് ചേർക്കും, അതിനാൽ നിങ്ങൾക്ക് ഒരു വശത്ത് സ്ഥലം ആവശ്യമാണെങ്കിൽ, നിങ്ങൾ CSS ഉപയോഗിക്കേണ്ടതാണ്. ഈ ആട്രിബ്യൂട്ടുകൾ മാർജിൻ CSS പ്രോപ്പർട്ടിക്ക് അനുകൂലമായി HTML4- ൽ നിരാകരിച്ചു, അവ HTML5- ൽ കാലഹരണപ്പെട്ടു.

LOWSRC . നിങ്ങളുടെ ഇമേജ് സോഴ്സ് വളരെ വലുതായപ്പോൾ വളരെ സാവധാനത്തിൽ ഡൌൺലോഡ് ചെയ്യുമ്പോൾ LOWSRC ആട്രിബ്യൂട്ട് ഒരു ബദൽ ഇമേജിനെ നൽകുന്നു. ഉദാഹരണത്തിന്, നിങ്ങളുടെ വെബ് പേജിൽ നിങ്ങൾ പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന 500KB ഇമേജ് നിങ്ങൾക്ക് ഉണ്ടായിരിക്കാം, എന്നാൽ 500KB ഡൗൺലോഡുചെയ്യുന്നതിന് കൂടുതൽ സമയം എടുക്കും. അതുകൊണ്ട് നിങ്ങൾ ചിത്രത്തിന്റെ വളരെ ചെറിയ ഒരു പകർപ്പ് സൃഷ്ടിക്കുന്നു - ഒരുപക്ഷേ കറുപ്പ്, വെളുപ്പ് അല്ലെങ്കിൽ വളരെ ഒപ്റ്റിമൈസ് ചെയ്ത ശേഷം, അതിനെ LOWSRC ആട്രിബ്യൂട്ടിൽ ഉൾപ്പെടുത്തുക. ചെറിയ ചിത്രം ആദ്യം ഡൌൺലോഡ് ചെയ്യുകയും പ്രദർശിപ്പിക്കുകയും ചെയ്യും, തുടർന്ന് വലിയ ചിത്രം ദൃശ്യമാകുമ്പോൾ അത് കുറഞ്ഞ ഉറവിടം മാറ്റിസ്ഥാപിക്കും.

IMG ടാഗിന് LESSSRC ആട്രിബ്യൂട്ട് നെസ്കേപ് നാവിഗേറ്റർ 2.0 ൽ ചേർത്തു. ഇത് DOM ലെവൽ 1 ന്റെ ഭാഗമായിരുന്നു, പക്ഷേ പിന്നീട് DOM ലെവൽ 2 ൽ നിന്ന് നീക്കം ചെയ്തു. എല്ലാ ആധുനിക ബ്രൌസറുകളും പിന്തുണയ്ക്കുന്നതായി അനേകം സൈറ്റുകൾ അവകാശപ്പെടുന്നുണ്ടെങ്കിലും ഈ ആട്രിബ്യൂട്ടിനായുള്ള ബ്രൗസർ പിന്തുണ സ്കെച്ചേർ ചെയ്തു. HTML4- ൽ നിന്നോ അല്ലെങ്കിൽ കാലഹരണപ്പെട്ട HTML5- ൽ ഇത് കാലഹരണപ്പെട്ടിട്ടില്ല. കാരണം, അത് ഒന്നുകിൽ ഒരു ഔദ്യോഗിക ഭാഗമായിരുന്നില്ല.

ഈ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക, പകരം നിങ്ങളുടെ ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക, അങ്ങനെ അവർ വേഗത്തിൽ ലോഡ് ചെയ്യുന്നു. പേജ് ലോഡിംഗിന്റെ വേഗത നല്ല വെബ് ഡിസൈനിന്റെ ഒരു സുപ്രധാന ഭാഗമാണ്, മാത്രമല്ല വലിയ ചിത്രങ്ങൾ മങ്ങിയ താളുകൾ മന്ദഗതിയിലാക്കുന്നു-നിങ്ങൾ LOWSRC ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നുവെങ്കിലും.