IMG टॅग विशेषता

चित्र आणि वस्तूंसाठी HTML IMG टॅगचा वापर

एचटीएमएल आयएमजी टॅग वेब पानाच्या आत चित्रे आणि इतर स्टॅटिक ग्राफिकल ऑब्जेक्ट घालणे नियंत्रित करते. हे सामान्य टॅग एका आकर्षक, प्रतिमा-केंद्रित वेबसाइटची रचना करण्याच्या आपल्या क्षमतेस समृद्धता जोडणारे अनेक अनिवार्य आणि वैकल्पिक विशेषतांचे समर्थन करते

पूर्णतः तयार केलेल्या HTML IMG टॅगचे उदाहरण यासारखे दिसते:

IMG टॅग विशेषता आवश्यक

SRC वेबपृष्ठावर प्रदर्शित करण्यासाठी आपल्याला एकमात्र विशेषता मिळविण्याची आवश्यकता आहे ती म्हणजे SRC विशेषता. हे वैशिष्ट्य प्रदर्शित होणाऱ्या प्रतिमा फाईलचे नाव आणि स्थान ओळखते.

ALT वैध XHTML आणि HTML4 लिहिण्यासाठी, ALT विशेषता देखील आवश्यक आहे प्रतिमा दर्शविणार्या मजकूरासह अदृश्य ब्राउझर उपलब्ध करण्यासाठी हे वैशिष्ट्य वापरले जाते. ब्राउझर विविध पर्यायांमध्ये वैकल्पिक मजकूर प्रदर्शित करतात काही जण जेव्हा आपण आपला माउस प्रतिमेवर ठेवता तेव्हा पॉप-अप म्हणून ते प्रदर्शित करतात, तर इतरांना ते गुणधर्मांमध्ये प्रदर्शित करतात जेव्हा आपण इमेजवर उजवे-क्लिक करतो, आणि काही ते सर्व प्रदर्शित करत नाहीत.

वेब पृष्ठाच्या मजकुराशी संबंधित किंवा महत्वाचे नसलेल्या प्रतिमेबद्दल अतिरिक्त तपशील देण्यासाठी alt मजकूर वापरा. परंतु हे लक्षात ठेवा की स्क्रीन रीडर आणि इतर मजकूर-केवळ ब्राउझरमध्ये, मजकूर पृष्ठावर उर्वरीत मजकूरासह इनलाइन वाचला जाईल. गोंधळ टाळण्यासाठी, केवळ "लोगो" ऐवजी "वेब डिज़ाइन आणि एचटीएमएल बद्दल" (उदाहरणार्थ) वर्णनात्मक Alt मजकूर वापरा.

HTML5 मध्ये, ALT विशेषता नेहमी आवश्यक नसते, कारण आपण त्यावर अधिक तपशील जोडण्यासाठी मथळा वापरू शकता. आपण संपूर्ण वर्णन समाविष्ट असलेले ID दर्शविण्यासाठी ARIA-DESCRIBEDBY ला विशेषता देखील वापरू शकता.

जर प्रतिमा पूर्णपणे सजावटीसारखी आहे जसे की वेब पृष्ठ किंवा चिन्हांच्या शीर्षस्थानी ग्राफिक. परंतु आपल्याला निश्चित नसल्यास, फक्त प्रकरणात Alt मजकूर समाविष्ट करा.

शिफारस केलेल्या IMG विशेषता

WIDTH आणि HEIGHT आपल्याला नेहमी WIDTH आणि HEIGHT विशेषता वापरण्याची सवय लागेल. आणि आपण नेहमीच वास्तविक आकाराचा वापर करावा आणि ब्राउझरसह आपल्या प्रतिमाचा आकार बदलू नये.

हे गुणधर्म पृष्ठाचे प्रस्तुतीकरण गति देते कारण ब्राउझर प्रतिमेसाठी डिझाइनमध्ये जागा वाटप करू शकते आणि संपूर्ण इमेज डाउनलोड करण्यासाठी प्रतीक्षेत राहण्याऐवजी, उर्वरित सामग्री डाउनलोड करणे सुरू ठेवा.

इतर उपयुक्त IMG विशेषता

TITLE विशेषता ही एक जागतिक विशेषता आहे जी कोणत्याही HTML घटकावर लागू केली जाऊ शकते. याशिवाय, TITLE गुणधर्म आपल्याला प्रतिमेविषयी अतिरिक्त माहिती जोडू देते.

बरेच ब्राउझर TITLE गुणधर्मस समर्थन करतात, परंतु ते वेगवेगळ्या प्रकारे करतात काही मजकूर पॉप-अप म्हणून प्रदर्शित करतात, तर काही लोक माहिती पडद्यावर दाखवित असतात जेव्हा वापरकर्त्याने प्रतिमेवर उजवे-क्लिक करतो. आपण प्रतिमेबद्दल अतिरिक्त माहिती लिहिण्यासाठी TITLE विशेषता वापरू शकता, परंतु लपविलेल्या किंवा दृश्यमान असलेल्या या माहितीवर गणना करू नका. आपण सर्वात निश्चितपणे शोध इंजिनेसाठी कीवर्ड लपवण्यासाठी हे वापरु नये. या सराव आता सर्वाधिक शोध इंजिने द्वारे दंड आहे.

USEMAP आणि ISMAP हे दोन गुणधर्म क्लाएंट बाजू () आणि सर्व्हर-साइड (आयएसएमएपी) प्रतिमा नकाशे आपल्या प्रतिमांमध्ये सेट करतात

LONGDESC विशेषता URL च्या मोठ्या वर्णनात URL ला समर्थन देते. हे वैशिष्ट्य आपल्या प्रतिमा अधिक प्रवेशयोग्य बनविते.

बहिष्कृत आणि अप्रचलित IMG विशेषता

अनेक विशेषता आता HTML5 मध्ये अप्रचलित आहेत किंवा HTML4 मध्ये बहिष्कृत आहेत. सर्वोत्तम HTML साठी, आपल्याला या विशेषता वापरण्याऐवजी इतर उपाय शोधावे लागतील.

सीमा विशेषता प्रतिमेच्या सभोवतालच्या कोणत्याही सीमेच्या पिक्सेल्समध्ये रुंदी परिभाषित करते हे HTML4 मध्ये CSS च्या समर्थनात नापसंत केले गेले आहे आणि HTML5 मध्ये अप्रचलित आहे.

ALIGN हे वैशिष्ट्य आपल्याला मजकूरामध्ये एक प्रतिमा ठेवण्याची आणि तिच्याभोवती मजकूर प्रवाह ठेवण्याची अनुमती देते. आपण प्रतिमा उजवीकडे किंवा डावीकडे संरेखित करू शकता हे HTML4 मध्ये फ्लोट सीएसएस प्रॉपर्टीच्या नावे नापसंत आहे आणि HTML5 मध्ये अप्रचलित आहे.

HSPACE आणि VSPACE एचएसपीएसीई आणि VSPACE गुणधर्म पांढऱ्या पृष्ठाला क्षैतिज (एच स्पेसी) आणि अनुलंब (VSPACE) जोडतात. ग्राफिक (वर आणि खाली किंवा डावीकडे आणि उजवीकडे) दोन्ही बाजूंमध्ये पांढरे स्थान जोडले जाईल, म्हणून जर आपल्याला फक्त एकाच बाजूला जागा हवी असेल तर आपण सीएसएस वापरावा. हे गुणधर्म मार्जिन CSS गुणधर्मसाठी HTML4 मध्ये नापसंत केले गेले आहेत आणि ते HTML5 मध्ये अप्रचलित आहेत

LOWSRC LOWSRC विशेषता आपल्या प्रतिमा स्त्रोत इतका मोठ्या असल्यावर एक पर्यायी प्रतिमा प्रदान करते की ती अत्यंत मंदपणे डाउनलोड करते. उदाहरणार्थ, आपल्याजवळ कदाचित 500KB अशी प्रतिमा असेल जी आपण आपल्या वेब पृष्ठावर दाखवू इच्छित आहात, परंतु 500KB डाउनलोड करण्यासाठी बराच वेळ लागेल. म्हणून आपण प्रतिमेची खूप छोटी प्रत तयार करू शकता, कदाचित कृष्ण धवल्यात किंवा अगदी अत्यंत ऑप्टिमाइझ्ड, आणि त्यास LOWSRC विशेषतामध्ये ठेवा. लहान प्रतिमा प्रथम डाउनलोड करेल आणि प्रदर्शित होईल, आणि जेव्हा मोठ्या प्रतिमा दिसते तेव्हा तो कमी स्त्रोत एक पुनर्स्थित करेल

LOWSRC विशेषता नेटस्केप नेविगेटर 2.0 मध्ये IMG टॅगमध्ये जोडण्यात आली. तो DOM स्तर 1 चा भाग होता परंतु नंतर DOM स्तर 2 मधून तो काढला गेला. या वैशिष्ट्यासाठी ब्राउझर समर्थन हे चिन्हांकित आहे, तरीही अनेक साइटचा दावा आहे की हे सर्व आधुनिक ब्राउझरद्वारे समर्थित आहे. हे एचटीएम 4 किंवा एचटीएमएलमध्ये नापसंत केले जात नाही कारण ते एकतर स्पष्टीकरणाचा अधिकृत भाग नव्हते.

हे गुणधर्म वापरणे टाळा आणि त्याऐवजी आपल्या प्रतिमा ऑप्टिमाइझ करा जेणेकरून ते लवकर लोड होतील पृष्ठ लोड होण्याची गती चांगली वेब डिझाइनचा महत्त्वपूर्ण भाग आहे आणि मोठ्या प्रतिमेचा पृष्ठे अत्यंत खाली आहेत-जरी आपण LOWSRC विशेषता वापरत असाल तरीही