IMG ಟ್ಯಾಗ್ ಗುಣಲಕ್ಷಣಗಳು

ಪಿಕ್ಚರ್ಸ್ ಮತ್ತು ಆಬ್ಜೆಕ್ಟ್ಸ್ಗಾಗಿ HTML IMG ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಿ

ಎಚ್ಟಿಎಮ್ಎಲ್ IMG ಟ್ಯಾಗ್ ವೆಬ್ ಪುಟದಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಮತ್ತು ಇತರ ಸ್ಥಿರ ಚಿತ್ರಾತ್ಮಕ ವಸ್ತುಗಳನ್ನು ಸೇರಿಸುವಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಈ ಸಾಮಾನ್ಯ ಟ್ಯಾಗ್ ಹಲವಾರು ಕಡ್ಡಾಯವಾಗಿ ಮತ್ತು ಐಚ್ಛಿಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಇದು ಆಕರ್ಷಕವಾಗಿ, ಚಿತ್ರ-ಕೇಂದ್ರಿತ ವೆಬ್ಸೈಟ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವ ನಿಮ್ಮ ಸಾಮರ್ಥ್ಯಕ್ಕೆ ಶ್ರೀಮಂತತೆಯನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಸಂಪೂರ್ಣವಾಗಿ ರೂಪುಗೊಂಡ HTML IMG ಟ್ಯಾಗ್ನ ಒಂದು ಉದಾಹರಣೆ ಹೀಗಿದೆ:

ಅಗತ್ಯ IMG ಟ್ಯಾಗ್ ಗುಣಲಕ್ಷಣಗಳು

ಎಸ್ಆರ್ಸಿ. ವೆಬ್ ಪುಟದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ನೀವು ಚಿತ್ರವನ್ನು ಪಡೆಯಬೇಕಾದ ಏಕೈಕ ಲಕ್ಷಣವೆಂದರೆ ಎಸ್ಆರ್ಸಿ ಗುಣಲಕ್ಷಣ. ಈ ವೈಶಿಷ್ಟ್ಯವು ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಇಮೇಜ್ ಫೈಲ್ನ ಹೆಸರು ಮತ್ತು ಸ್ಥಳವನ್ನು ಗುರುತಿಸುತ್ತದೆ.

ALT. ಮಾನ್ಯ XHTML ಮತ್ತು HTML4 ಬರೆಯಲು, ALT ಗುಣಲಕ್ಷಣ ಕೂಡಾ ಅಗತ್ಯವಿರುತ್ತದೆ. ಈ ವಿವರಣೆಯನ್ನು ನಾನ್ವಿಶುವಲ್ ಬ್ರೌಸರ್ಗಳನ್ನು ಚಿತ್ರವನ್ನು ವಿವರಿಸುವ ಪಠ್ಯದೊಂದಿಗೆ ಒದಗಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಬ್ರೌಸರ್ಗಳು ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ವಿಭಿನ್ನ ರೀತಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ನೀವು ಚಿತ್ರದ ಮೇಲೆ ನಿಮ್ಮ ಮೌಸ್ ಅನ್ನು ಹಾಕಿದಾಗ ಕೆಲವು ಪಾಪ್-ಅಪ್ ಎಂದು ತೋರಿಸಿದರೆ, ನೀವು ಚಿತ್ರದ ಮೇಲೆ ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಇತರರು ಅದನ್ನು ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತಾರೆ ಮತ್ತು ಕೆಲವರು ಅದನ್ನು ಪ್ರದರ್ಶಿಸುವುದಿಲ್ಲ.

ವೆಬ್ ಪುಟದ ಪಠ್ಯಕ್ಕೆ ಸಂಬಂಧಿತ ಅಥವಾ ಮುಖ್ಯವಾದ ಚಿತ್ರದ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ವಿವರಗಳನ್ನು ನೀಡಲು ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಬಳಸಿ. ಆದರೆ ಪರದೆಯ ಓದುಗರು ಮತ್ತು ಇತರ ಪಠ್ಯ ಮಾತ್ರ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ, ಪಠ್ಯವು ಪುಟದ ಉಳಿದ ಪಠ್ಯದೊಂದಿಗೆ ಇನ್ಲೈನ್ ​​ಅನ್ನು ಓದುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಗೊಂದಲವನ್ನು ತಪ್ಪಿಸಲು, ಹೇಳುವ ವಿವರಣಾತ್ಮಕ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು (ಉದಾಹರಣೆಗೆ), "ಲೋಗೊ" ಬದಲಿಗೆ "ವೆಬ್ ವಿನ್ಯಾಸ ಮತ್ತು HTML ಬಗ್ಗೆ" ಬಳಸಿ.

HTML5 ನಲ್ಲಿ, ALT ಲಕ್ಷಣವು ಯಾವಾಗಲೂ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ನೀವು ಅದಕ್ಕೆ ಹೆಚ್ಚಿನ ವಿವರಣೆಯನ್ನು ಸೇರಿಸಲು ಶೀರ್ಷಿಕೆಯನ್ನು ಬಳಸಬಹುದು. ಪೂರ್ಣ ವಿವರಣೆಯನ್ನು ಹೊಂದಿರುವ ಒಂದು ID ಯನ್ನು ಸೂಚಿಸಲು ನೀವು ARIA-DESCRIBEDBY ಯ ಗುಣಲಕ್ಷಣವನ್ನು ಸಹ ಬಳಸಬಹುದು.

ಇಮೇಜ್ ಸಂಪೂರ್ಣವಾಗಿ ಅಲಂಕಾರಿಕವಾಗಿದ್ದರೆ, ವೆಬ್ ಪುಟ ಅಥವಾ ಐಕಾನ್ಗಳ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಗ್ರಾಫಿಕ್ನಂತಹ ಆಲ್ಟ್ ಪಠ್ಯವೂ ಸಹ ಅಗತ್ಯವಿಲ್ಲ. ಆದರೆ ನಿಮಗೆ ಖಚಿತವಿಲ್ಲದಿದ್ದರೆ, ಆಲ್ಟ್ ಪಠ್ಯವನ್ನು ಕೇವಲ ಸಂದರ್ಭದಲ್ಲಿ ಸೇರಿಸಿ.

ಶಿಫಾರಸು ಮಾಡಿದ IMG ಲಕ್ಷಣಗಳು

ಅಗಲ ಮತ್ತು HEIGHT . ನೀವು ಯಾವಾಗಲೂ WIDTH ಮತ್ತು HEIGHT ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವ ಅಭ್ಯಾಸಕ್ಕೆ ಹೋಗಬೇಕು. ಮತ್ತು ನೀವು ಯಾವಾಗಲೂ ನೈಜ ಗಾತ್ರವನ್ನು ಬಳಸಬೇಕು ಮತ್ತು ಬ್ರೌಸರ್ನೊಂದಿಗೆ ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಬಾರದು.

ಈ ಲಕ್ಷಣಗಳು ಪುಟದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ವೇಗಗೊಳಿಸಲು ಕಾರಣ ಬ್ರೌಸರ್ಗೆ ಚಿತ್ರದ ವಿನ್ಯಾಸದಲ್ಲಿ ಸ್ಥಳಾವಕಾಶವನ್ನು ನೀಡಬಹುದು, ತದನಂತರ ಇಡೀ ಚಿತ್ರವನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಲು ಕಾಯುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಉಳಿದ ವಿಷಯವನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸಬಹುದು.

ಇತರ ಉಪಯುಕ್ತ ಐಎಂಜಿ ಗುಣಲಕ್ಷಣಗಳು

TITLE . ಗುಣಲಕ್ಷಣವು ಯಾವುದೇ HTML ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಬಹುದಾದ ಜಾಗತಿಕ ಗುಣಲಕ್ಷಣವಾಗಿದೆ. ಇದಲ್ಲದೆ, TITLE ಗುಣಲಕ್ಷಣವು ಚಿತ್ರದ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳು TITLE ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ, ಆದರೆ ಅವು ವಿಭಿನ್ನ ರೀತಿಗಳಲ್ಲಿ ಇದನ್ನು ಮಾಡುತ್ತವೆ. ಕೆಲವರು ಪಠ್ಯವನ್ನು ಪಾಪ್-ಅಪ್ ಎಂದು ತೋರಿಸಿದರೆ, ಇತರರು ಚಿತ್ರದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಬಳಕೆದಾರರ ಪರದೆಯ ಮೇಲೆ ಅದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತಾರೆ. ಚಿತ್ರದ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಬರೆಯಲು TITLE ಗುಣಲಕ್ಷಣವನ್ನು ನೀವು ಬಳಸಬಹುದು, ಆದರೆ ಈ ಮಾಹಿತಿಯು ಗುಪ್ತ ಅಥವಾ ಗೋಚರವಾಗಿದೆಯೆಂದು ಲೆಕ್ಕಿಸಬೇಡಿ. ಸರ್ಚ್ ಇಂಜಿನ್ಗಳಿಗೆ ಕೀವರ್ಡ್ಗಳನ್ನು ಮರೆಮಾಡಲು ನೀವು ಖಂಡಿತವಾಗಿ ಇದನ್ನು ಬಳಸಬಾರದು. ಈ ಅಭ್ಯಾಸವು ಈಗ ಹೆಚ್ಚಿನ ಸರ್ಚ್ ಇಂಜಿನ್ಗಳಿಂದ ದಂಡ ವಿಧಿಸಲ್ಪಟ್ಟಿದೆ.

USEMAP ಮತ್ತು ISMAP . ಈ ಎರಡು ಲಕ್ಷಣಗಳು ಕ್ಲೈಂಟ್-ಸೈಡ್ () ಮತ್ತು ಸರ್ವರ್-ಸೈಡ್ (ಐಎಸ್ಎಂಎಪಿ) ಇಮೇಜ್ ನಕ್ಷೆಗಳನ್ನು ನಿಮ್ಮ ಚಿತ್ರಗಳಿಗೆ ಹೊಂದಿಸಿವೆ.

ಲಾಂಗ್ಡೆಸ್ಕ್ . ಗುಣಲಕ್ಷಣವು ಚಿತ್ರದ ಸುದೀರ್ಘ ವಿವರಣೆಗೆ URL ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಈ ವೈಶಿಷ್ಟ್ಯವು ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಮಾಡುತ್ತದೆ.

ಅಸಮ್ಮತಿ ಮತ್ತು ಬಳಕೆಯಲ್ಲಿಲ್ಲದ IMG ಲಕ್ಷಣಗಳು

ಹಲವಾರು ಲಕ್ಷಣಗಳು ಈಗ HTML5 ನಲ್ಲಿ ಬಳಕೆಯಲ್ಲಿಲ್ಲದ ಅಥವಾ HTML4 ನಲ್ಲಿ ಅಸಮ್ಮತಿಗೊಂಡಿದೆ. ಉತ್ತಮ ಎಚ್ಟಿಎಮ್ಎಲ್ಗಾಗಿ, ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸುವ ಬದಲು ನೀವು ಇತರ ಪರಿಹಾರಗಳನ್ನು ಕಂಡುಹಿಡಿಯಬೇಕು.

ಗಡಿ . ಗುಣಲಕ್ಷಣವು ಅಗಲವನ್ನು ಚಿತ್ರದ ಸುತ್ತ ಯಾವುದೇ ಗಡಿಯ ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು HTML4 ನಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಪರವಾಗಿ ಅಸಮ್ಮತಿಗೊಂಡಿದೆ ಮತ್ತು HTML5 ನಲ್ಲಿ ಬಳಕೆಯಲ್ಲಿಲ್ಲ.

ALIGN . ಈ ಗುಣಲಕ್ಷಣವು ಪಠ್ಯದ ಒಳಗೆ ಚಿತ್ರವನ್ನು ಇರಿಸಲು ಮತ್ತು ಅದರ ಸುತ್ತಲಿನ ಪಠ್ಯ ಹರಿವನ್ನು ಹೊಂದಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ಚಿತ್ರವನ್ನು ಬಲ ಅಥವಾ ಎಡಕ್ಕೆ ಜೋಡಿಸಬಹುದು. ಇದು HTML4 ನಲ್ಲಿ ಫ್ಲೋಟ್ ಸಿಎಸ್ಎಸ್ ಆಸ್ತಿಯ ಪರವಾಗಿ ಅಸಮ್ಮತಿಗೊಂಡಿದೆ ಮತ್ತು HTML5 ನಲ್ಲಿ ಬಳಕೆಯಲ್ಲಿಲ್ಲ.

HSPACE ಮತ್ತು VSPACE . HSPACE ಮತ್ತು VSPACE ಲಕ್ಷಣಗಳು ಬಿಳಿ ಜಾಗ ಅಡ್ಡಲಾಗಿ (HSPACE) ಮತ್ತು ಲಂಬವಾಗಿ (VSPACE) ಸೇರಿಸಿ. ಗ್ರಾಫಿಕ್ (ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಅಥವಾ ಎಡ ಮತ್ತು ಬಲ) ಎರಡೂ ಬದಿಗಳಲ್ಲಿ ವೈಟ್ ಜಾಗವನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಕೇವಲ ಒಂದು ಕಡೆ ಜಾಗವನ್ನು ಬಯಸಿದರೆ, ನೀವು ಸಿಎಸ್ಎಸ್ ಬಳಸಬೇಕು. ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮಾರ್ಜಿನ್ ಸಿಎಸ್ಎಸ್ ಆಸ್ತಿಗೆ ಪರವಾಗಿ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಅಸಮ್ಮತಿ ನೀಡಲಾಗಿದೆ, ಮತ್ತು ಅವುಗಳು HTML5 ನಲ್ಲಿ ಬಳಕೆಯಲ್ಲಿಲ್ಲ.

LOWSRC . LOWSRC ಗುಣಲಕ್ಷಣವು ನಿಮ್ಮ ಇಮೇಜ್ ಮೂಲವು ತುಂಬಾ ದೊಡ್ಡದಾಗಿದ್ದರೆ ಅದು ಹೆಚ್ಚು ನಿಧಾನವಾಗಿ ಡೌನ್ಲೋಡ್ ಆಗುವ ಪರ್ಯಾಯ ಚಿತ್ರವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ನೀವು ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ 500 ಕೆಬಿ ಇಮೇಜ್ ಅನ್ನು ನೀವು ಹೊಂದಿರಬಹುದು, ಆದರೆ 500 ಕೆಬಿ ಡೌನ್ಲೋಡ್ ಮಾಡಲು ಬಹಳ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಆದ್ದರಿಂದ ನೀವು ಚಿತ್ರದ ಚಿಕ್ಕದಾದ ನಕಲನ್ನು ರಚಿಸಬಹುದು, ಬಹುಶಃ ಕಪ್ಪು ಮತ್ತು ಬಿಳಿ ಅಥವಾ ಅತ್ಯಂತ ಉತ್ತಮವಾಗಿ ಹೊಂದುವಂತೆ, ಮತ್ತು ಅದನ್ನು LOWSRC ಗುಣಲಕ್ಷಣದಲ್ಲಿ ಇರಿಸಿ. ಸಣ್ಣ ಚಿತ್ರವು ಮೊದಲು ಡೌನ್ಲೋಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ತದನಂತರ ದೊಡ್ಡ ಇಮೇಜ್ ಕಾಣಿಸಿಕೊಂಡಾಗ ಅದು ಕಡಿಮೆ-ಮೂಲವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.

ನೆಟ್ಸ್ಕೇಪ್ ನ್ಯಾವಿಗೇಟರ್ 2.0 ಗೆ IMG ಟ್ಯಾಗ್ಗೆ LOWSRC ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಲಾಗಿದೆ. ಇದು DOM ಹಂತ 1 ರ ಭಾಗವಾಗಿತ್ತು ಆದರೆ DOM ಹಂತ 2 ರಿಂದ ತೆಗೆದುಹಾಕಲಾಯಿತು. ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂದು ಅನೇಕ ಸೈಟ್ಗಳು ಹೇಳಿಕೊಂಡಿದ್ದರೂ, ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಈ ಗುಣಲಕ್ಷಣಕ್ಕಾಗಿ ಚಿತ್ರಣವನ್ನು ಹೊಂದಿದೆ. ಇದು HTML4 ನಲ್ಲಿ ಅಸಮ್ಮತಿಗೊಂಡಿದೆ ಅಥವಾ HTML5 ನಲ್ಲಿ ಬಳಕೆಯಲ್ಲಿಲ್ಲದ ಕಾರಣ ಅದು ಯಾವುದೇ ನಿರ್ದಿಷ್ಟತೆಯ ಅಧಿಕೃತ ಭಾಗವಾಗಿರಲಿಲ್ಲ.

ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ ಮತ್ತು ಬದಲಿಗೆ ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಉತ್ತಮಗೊಳಿಸಿ ಆದ್ದರಿಂದ ಅವು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತವೆ. ಪುಟ ಲೋಡಿಂಗ್ ವೇಗವು ಉತ್ತಮ ವೆಬ್ ವಿನ್ಯಾಸದ ಒಂದು ನಿರ್ಣಾಯಕ ಭಾಗವಾಗಿದೆ, ಮತ್ತು ದೊಡ್ಡ ಚಿತ್ರಗಳನ್ನು ನಿಧಾನವಾಗಿ ಡೌನ್ ಲೋಡ್ ಮಾಡಿಕೊಳ್ಳುತ್ತದೆ - ನೀವು LOWSRC ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿದರೂ ಸಹ.