IMG ట్యాగ్ గుణాలు

పిక్చర్స్ అండ్ ఆబ్జెక్ట్స్ కోసం HTML IMG ట్యాగ్ ఉపయోగించండి

HTML IMG ట్యాగ్ వెబ్ పేజీలో చిత్రాలు మరియు ఇతర స్టాటిక్ గ్రాఫికల్ వస్తువులు చొప్పించడాన్ని నియంత్రిస్తుంది. ఈ సాధారణ ట్యాగ్ ఒక ఆకర్షణీయమైన, ఇమేజ్-ఫోకస్ చేసిన వెబ్సైట్ని రూపకల్పన చేసే మీ సామర్థ్యానికి గొప్పతనాన్ని జోడించే పలు తప్పనిసరి మరియు ఐచ్ఛిక లక్షణాలను అందిస్తుంది.

ఒక పూర్తిగా ఏర్పడిన HTML IMG ట్యాగ్ యొక్క ఒక ఉదాహరణ ఇలా కనిపిస్తుంది:

అవసరమైన IMG ట్యాగ్ గుణాలు

SRC. మీరు ఒక వెబ్ పేజీలో ప్రదర్శించడానికి ఒక చిత్రం పొందడానికి మాత్రమే లక్షణం SRC లక్షణం. ఈ లక్షణం ప్రదర్శించబడే ప్రతిబింబ ఫైలు పేరు మరియు స్థానం గుర్తిస్తుంది.

ALT. చెల్లుబాటు అయ్యే XHTML మరియు HTML4 రాయడానికి, ALT గుణం కూడా అవసరం. ఈ విశేషణం చిత్రం వివరిస్తుంది టెక్స్ట్ తో కాని వినూత్న బ్రౌజర్లు అందించడానికి ఉపయోగిస్తారు. బ్రౌజర్లు ప్రత్యామ్నాయ పాఠాన్ని వివిధ మార్గాల్లో ప్రదర్శిస్తాయి. చిత్రంపై మీ మౌస్ను ఉంచినప్పుడు కొందరు దీనిని పాప్-అప్గా ప్రదర్శిస్తారు, ఇతరులు మీరు చిత్రంపై కుడి క్లిక్ చేసినప్పుడు లక్షణాల్లో దాన్ని ప్రదర్శిస్తారు మరియు కొంతమంది దీనిని ప్రదర్శించరు.

వెబ్ పేజీ యొక్క పాఠ్యానికి సంబంధించని లేదా ముఖ్యమైనవి లేని చిత్రం గురించి అదనపు వివరాలను అందించడానికి alt టెక్స్ట్ను ఉపయోగించండి. కానీ స్క్రీన్ రీడర్లు మరియు ఇతర టెక్స్ట్ మాత్రమే బ్రౌజర్లు, టెక్స్ట్ పేజీ మిగిలిన టెక్స్ట్ తో ఇన్లైన్ చదవబడుతుంది గుర్తుంచుకోవాలి. గందరగోళాన్ని నివారించడానికి, కేవలం "లోగో" కు బదులుగా "వెబ్ డిజైన్ అండ్ HTML గురించి" (ఉదాహరణకు), వివరణాత్మక alt టెక్స్ట్ను ఉపయోగించండి.

HTML5 లో, ALT లక్షణం ఎల్లప్పుడూ అవసరం లేదు, ఎందుకంటే దీనికి మరింత వివరణను జోడించడానికి శీర్షికను ఉపయోగించవచ్చు. పూర్తి వివరాలను కలిగి ఉన్న ID ని సూచించడానికి లక్షణం ARIA-DESCRIBEDBY ను కూడా మీరు ఉపయోగించుకోవచ్చు.

ఇమేజ్ పూర్తిగా అలంకరించబడినట్లయితే Alt టెక్స్ట్ కూడా అవసరం లేదు, వెబ్ పేజీ లేదా చిహ్నాల ఎగువ భాగంలో గ్రాఫిక్ వంటివి. కానీ మీరు ఖచ్చితంగా తెలియకపోతే, కేవలము కేవలము alt text ను చేర్చండి.

సిఫార్సు చేసిన IMG గుణాలు

WIDTH మరియు HEIGHT . మీరు ఎల్లప్పుడూ WIDTH మరియు HEIGHT లక్షణాలను ఉపయోగించి అలవాటు పొందాలి. మరియు మీరు ఎల్లప్పుడూ నిజమైన పరిమాణాన్ని ఉపయోగించాలి మరియు మీ చిత్రాలను బ్రౌజర్తో పునఃపరిమాణం చేయకూడదు.

ఈ లక్షణం పేజీ యొక్క రెండరింగ్ను వేగవంతం చేస్తుంది ఎందుకంటే బ్రౌజర్ ప్రతిబింబం కోసం స్థలంలో కేటాయించగలదు, ఆపై మొత్తం చిత్రం డౌన్లోడ్ కోసం ఎదురుచూడకుండా, మిగిలిన కంటెంట్ను డౌన్లోడ్ చేయడాన్ని కొనసాగించండి.

ఇతర ఉపయోగకరమైన IMG గుణాలు

TITLE . లక్షణం ఏ HTML మూలకానికి వర్తించగల ప్రపంచ లక్షణం. అంతేకాకుండా, TITLE లక్షణం మీరు చిత్రం గురించి అదనపు సమాచారాన్ని జోడించడానికి అనుమతిస్తుంది.

చాలా బ్రౌజర్లు TITLE లక్షణాన్ని మద్దతిస్తాయి, కానీ అవి వివిధ మార్గాల్లో చేస్తాయి. కొంతమంది పాప్-అప్గా టెక్స్ట్ను ప్రదర్శిస్తున్నప్పుడు ఇతరులు తెరపై కుడి-క్లిక్ చేసినప్పుడు ఇతరులు దీనిని తెరపై ప్రదర్శిస్తారు. మీరు చిత్రం గురించి అదనపు సమాచారాన్ని రాయడానికి TITLE లక్షణాన్ని ఉపయోగించవచ్చు, కానీ ఈ సమాచారం రహస్యంగా లేదా కనిపించే విధంగా ఉండదు. శోధన ఇంజిన్ల కోసం కీలక పదాలను దాచడానికి మీరు దీన్ని ఖచ్చితంగా ఉపయోగించకూడదు. ఈ అభ్యాసం ఇప్పుడు చాలా శోధన ఇంజిన్ల ద్వారా జరిమానా విధించబడుతుంది.

USEMAP మరియు ISMAP . ఈ రెండు లక్షణాలను మీ చిత్రాలకు క్లయింట్-వైపు () మరియు సర్వర్-వైపు (ISMAP) చిత్రం మ్యాప్లను సెట్ చేస్తుంది.

LONGDESC . లక్షణం URL యొక్క పొడవైన వివరణకు URL లకు మద్దతు ఇస్తుంది. ఈ ఫీచర్ మీ చిత్రాలను మరింత అందుబాటులోకి తెస్తుంది.

నిరాశ మరియు వాడుకలో లేని IMG గుణాలు

అనేక లక్షణాలను ఇప్పుడు HTML5 లో వాడుకలో లేదా HTML4 లో డీప్రికేటెడ్ చేయబడ్డాయి. ఉత్తమ HTML కోసం, మీరు ఈ లక్షణాలను ఉపయోగించి బదులుగా ఇతర పరిష్కారాలను కనుగొనాలి.

BORDER . లక్షణం చిత్రం చుట్టూ ఏ సరిహద్దులో పిక్సెల్స్లో వెడల్పును నిర్వచిస్తుంది. ఇది HTML4 లో CSS కు అనుకూలంగా తీసిపోయింది మరియు HTML5 లో వాడుకలో ఉంది.

ALIGN . ఈ లక్షణం మీరు టెక్స్ట్ లోపల ఒక చిత్రం ఉంచడానికి మరియు దాని చుట్టూ టెక్స్ట్ ప్రవాహం కలిగి అనుమతిస్తుంది. మీరు ఒక చిత్రం కుడి లేదా ఎడమకు సమలేఖనం చేయవచ్చు. ఇది HTML4 లో ఫ్లోట్ CSS ఆస్తికి అనుకూలంగా నిలిపివేయబడింది మరియు HTML5 లో వాడుకలో ఉంది.

HSPACE మరియు VSPACE . HSPACE మరియు VSPACE లక్షణాలు తెలుపు అంతరాన్ని సమాంతరంగా (HSPACE) మరియు నిలువుగా (VSPACE) జోడించండి. గ్రాఫిక్ (ఎగువ మరియు దిగువ లేదా ఎడమ మరియు కుడి) రెండింటికీ వైట్ స్పేస్ జోడించబడుతుంది, కాబట్టి మీరు ఒక వైపున స్పేస్ అవసరం అయితే, మీరు CSS ను ఉపయోగించాలి. ఈ లక్షణాలు HTML4 లో మార్జిన్ CSS ఆస్తికి అనుకూలంగా నిలిపివేయబడ్డాయి మరియు అవి HTML5 లో వాడుకలో ఉన్నాయి.

LOWSRC . LOWSRC యాట్రిబ్యూట్ ప్రత్యామ్నాయ ప్రతిబింబమును మీ చిత్ర మూలాన్ని చాలా నెమ్మదిగా డౌన్లోడ్ చేసేటప్పుడు చాలా పెద్దదిగా ఇస్తుంది. ఉదాహరణకు, మీరు మీ వెబ్ పేజీలో ప్రదర్శించాలని కోరుకుంటున్న 500KB చిత్రం ఉండవచ్చు, కానీ 500KB డౌన్లోడ్ చేయడానికి చాలా కాలం పడుతుంది. కాబట్టి మీరు చిత్రం యొక్క చాలా చిన్న కాపీని సృష్టించడానికి, బహుశా నలుపు మరియు తెలుపు లేదా చాలా సర్వోత్తమ, మరియు LOWSRC లక్షణం ఆ ఉంచండి. చిన్న చిత్రం మొదటి డౌన్ లోడ్ చేసి ప్రదర్శిస్తుంది, ఆపై పెద్ద చిత్రం కనిపించినప్పుడు తక్కువ మూలం ఒకటి భర్తీ చేస్తుంది.

LOWSRC లక్షణం Netscape నావిగేటర్ 2.0 కు IMG ట్యాగ్కు జోడించబడింది. ఇది DOM స్థాయి 1 లో భాగంగా ఉంది కానీ DOM స్థాయి 2 నుండి తొలగించబడింది. ఈ లక్షణం కోసం బ్రౌజర్ మద్దతు స్కెచ్కి ఉంది, అయినప్పటికీ అన్ని ఆధునిక బ్రౌజర్లచే మద్దతు ఇవ్వబడుతుందని అనేక సైట్లు పేర్కొన్నాయి. ఇది HTML4 లో డీప్రికేటెడ్ చేయబడలేదు లేదా HTML5 లో వాడుకలో లేనిది కాదు, ఎందుకంటే ఇది అధికారిక భాగం గాని వివరణాత్మక భాగం కాదు.

ఈ లక్షణాన్ని ఉపయోగించడం మానుకోండి మరియు బదులుగా మీ చిత్రాలను ఆప్టిమైజ్ చేయండి, తద్వారా అవి వేగంగా లోడ్ అవుతాయి. పేజీ లోడింగ్ యొక్క స్పీడ్ మంచి వెబ్ డిజైన్ యొక్క క్లిష్టమైన భాగం, మరియు పెద్ద చిత్రాలు నెమ్మదిగా డౌన్ నెమ్మదిగా పేజీలు-మీరు LOWSRC లక్షణాన్ని ఉపయోగిస్తున్నప్పటికీ.