תכונות תג IMG

שימוש בתג HTML IMG עבור תמונות ואובייקטים

תג HTML IMG קובע את החדרת התמונות ואובייקטים גרפיים סטטיים אחרים בתוך דף אינטרנט. תג משותף זה תומך בכמה תכונות חובה ואופציונליות המוסיפות את העושר ליכולת שלך לעצב אתר מרתק, ממוקד תמונה.

דוגמה לתג HTML IMG שנוצר באופן מלא נראה כך:

תכונות IMG דרושות

SRC. התכונה היחידה שאתה צריך כדי לקבל תמונה כדי להציג בדף אינטרנט היא תכונה SRC. תכונה זו מזהה את השם והמיקום של קובץ התמונה שיוצגו.

ALT. כדי לכתוב XHTML ו- HTML4 חוקיים, התכונה ALT נדרשת גם. תכונה זו משמשת לספק דפדפנים לא-מילוליים עם טקסט שמתאר את התמונה. דפדפנים מציגים את הטקסט החלופי בדרכים שונות. חלק מציגים אותו כחלון קופץ כאשר אתה מעביר את העכבר מעל התמונה, אחרים מציגים אותו במאפיינים בעת לחיצה ימנית על התמונה, וחלקם אינם מציגים אותו כלל.

השתמש בטקסט alt כדי לתת פרטים נוספים על התמונה שאינם רלוונטיים או חשובים לטקסט של דף האינטרנט. אבל זכור כי הקוראים מסך ודפדפנים אחרים טקסט בלבד, הטקסט יהיה לקרוא בשורה עם שאר הטקסט בדף. כדי למנוע בלבול, השתמש בטקסט Alt תיאורתי (לדוגמה), "אודות עיצוב אתרים ו- HTML" במקום "לוגו" בלבד.

ב- HTML5, התכונה ALT אינה נחוצה תמיד, מכיוון שניתן להשתמש בכיתוב כדי להוסיף לה תיאור נוסף. ניתן גם להשתמש במאפיין ARIA-DESCRIBEDBY כדי לציין מזהה שמכיל תיאור מלא.

טקסט Alt הוא גם לא נדרש אם התמונה היא דקורטיבית בלבד, כגון גרפיקה בחלק העליון של דף אינטרנט או סמלים. אבל אם אתה לא בטוח, לכלול טקסט alt רק במקרה.

תכונות IMG מומלצות

רוחב ו גובה . אתה צריך לקבל את הרגל תמיד באמצעות WIDTH ו HEIGHT תכונות. ואתה צריך תמיד להשתמש בגודל האמיתי ולא לשנות את גודל התמונות עם הדפדפן.

תכונות אלה מאיצות את עיבוד הדף מכיוון שהדפדפן יכול להקצות מקום בתמונה עבור התמונה, ולאחר מכן להמשיך בהורדת שאר התוכן, במקום להמתין להורדת התמונה כולה.

תכונות שימושיות אחרות IMG

TITLE . התכונה היא מאפיין גלובלי שניתן להחיל על כל רכיב HTML . יתר על כן, התכונה TITLE מאפשרת לך להוסיף מידע נוסף על התמונה.

רוב הדפדפנים תומכים בתכונה TITLE, אך הם עושים זאת בדרכים שונות. חלק מציגים את הטקסט כחלון מוקפץ ואילו אחרים מציגים אותו במסכי מידע כאשר המשתמש לוחץ על הלחצן הימני של העכבר על התמונה. ניתן להשתמש במאפיין TITLE כדי לכתוב מידע נוסף על התמונה, אך אין לסמוך שהמידע הזה מוסתר או גלוי. אתה בהחלט בהחלט לא להשתמש בזה כדי להסתיר מילות מפתח עבור מנועי החיפוש. נוהג זה עכשיו נענש על ידי רוב מנועי החיפוש.

USEMAP ו- ISMAP . שתי תכונות אלה מציבות מפות תמונה של צד הלקוח () וצד השרת (ISMAP) לתמונות שלך.

LONGDESC . התכונה תומכת בכתובות אתרים לתיאור ארוך יותר של התמונה. תכונה זו הופכת את התמונות שלך לזמינות יותר.

תכונות IMG מושבתות ומיושנות

תכונות מסוימות מיושנות כעת ב- HTML5 או הוצאו משימוש ב- HTML4. לקבלת HTML הטוב ביותר, אתה צריך למצוא פתרונות אחרים במקום להשתמש בתכונות אלה.

בורדר . התכונה מגדירה את רוחב הפיקסלים של כל גבול מסביב לתמונה. זה כבר הוצא לטובת CSS ב HTML4 ו מיושן ב- HTML5.

עלון . תכונה זו מאפשרת לך למקם תמונה בתוך הטקסט ולזרום את זרימת הטקסט סביבו. ניתן ליישר תמונה ימינה או שמאלה. זה כבר הוצא משימוש לטובת המאפיין CSS לצוף ב- HTML4 והוא מיושן ב- HTML5.

HSPACE ו VSPACE . HSPACE ו VSPACE תכונות להוסיף שטח לבן אופקית (HSPACE) ו אנכית (VSPACE). שטח לבן יתווסף לשני צידי הגרפיקה (למעלה ולמטה או שמאלה או ימינה), כך שאם אתה צריך רק מקום בצד אחד, עליך להשתמש ב- CSS. תכונות אלה הוצאו משימוש ב- HTML4 לטובת המאפיין CSS השוליים, והן מיושנות ב- HTML5.

LOWSRC . המאפיין LOWSRC מספק תמונה חלופית כאשר מקור התמונה שלך כה גדול עד כי הוא מוריד לאט מאוד. לדוגמה, ייתכן שיש לך תמונה בגודל 500KB שברצונך להציג בדף האינטרנט שלך, אך 500KB יידרש זמן רב להורדה. אז אתה יוצר עותק קטן בהרבה של התמונה, אולי בשחור ולבן או פשוט מותאם במיוחד, ולשים את זה בתכונה LOWSRC. התמונה הקטנה תורד ותוצג תחילה, ולאחר מכן, כאשר התמונה הגדולה יותר תופיע במקומה, היא תחליף את המקור הנמוך.

התכונה LOWSRC נוספה ל- Netscape Navigator 2.0 לתג IMG. זה היה חלק DOM רמה 1 אבל הוסרו מכן מ DOM רמה 2. תמיכה בדפדפן כבר sketchy עבור תכונה זו, אם כי אתרים רבים טוענים כי הוא נתמך על ידי כל הדפדפנים המודרניים. זה לא הוצא ב HTML4 או מיושן ב- HTML5 כי זה מעולם לא היה חלק רשמי של מפרט או.

הימנע משימוש בתכונה זו ובמקום זאת בצע אופטימיזציה לתמונות שלך כדי לטעון אותן במהירות. מהירות טעינת הדף היא חלק קריטי של עיצוב אתרים טוב, ותמונות גדולות איטיות דפי למטה מאוד, גם אם אתה משתמש במאפיין LOWSRC.