תג HTML IMG קובע את החדרת התמונות ואובייקטים גרפיים סטטיים אחרים בתוך דף אינטרנט. תג משותף זה תומך בכמה תכונות חובה ואופציונליות המוסיפות את העושר ליכולת שלך לעצב אתר מרתק, ממוקד תמונה.
דוגמה לתג HTML IMG שנוצר באופן מלא נראה כך:
תכונות IMG דרושות
SRC.התכונה היחידה שאתה צריך כדי לקבל תמונה כדי להציג בדף אינטרנט היא תכונה SRC. תכונה זו מזהה את השם והמיקום של קובץ התמונה שיוצגו.
ALT.כדי לכתוב XHTML ו HTML4 חוקי, ALT תכונה נדרשת גם. תכונה זו משמשת לספק דפדפנים לא-מילוליים עם טקסט שמתאר את התמונה. דפדפנים מציגים את הטקסט החלופי בדרכים שונות. חלק מציגים אותו כחלון קופץ כאשר אתה מעביר את העכבר מעל התמונה, אחרים מציגים אותו במאפיינים בעת לחיצה ימנית על התמונה, וחלקם אינם מציגים אותו כלל.
השתמש בטקסט alt כדי לתת פרטים נוספים על התמונה שאינם רלוונטיים או חשובים לטקסט של דף האינטרנט. אבל זכור כי הקוראים מסך ודפדפנים אחרים טקסט בלבד, הטקסט יהיה לקרוא בשורה עם שאר הטקסט בדף. כדי למנוע בלבול, השתמש בטקסט Alt תיאורתי (לדוגמה), "אודות עיצוב אתרים ו- HTML" במקום "לוגו" בלבד.
ב HTML5, ALT התכונה אינה נדרשת תמיד, מכיוון שניתן להשתמש בכיתוב כדי להוסיף לה תיאור נוסף. ניתן גם להשתמש בתכונה ARIA-DESCRIBEDBY כדי לציין מזהה שמכיל תיאור מלא.
טקסט Alt הוא גם לא נדרש אם התמונה היא דקורטיבית בלבד, כגון גרפיקה בחלק העליון של דף אינטרנט או סמלים. אבל אם אתה לא בטוח, לכלול טקסט alt רק במקרה.
תכונות IMG מומלצות
רוחב ו גובה. אתה צריך לקבל את הרגל של תמיד באמצעות רוחב ו גובה תכונות. ואתה צריך תמיד להשתמש בגודל האמיתי ולא לשנות את גודל התמונות עם הדפדפן.
תכונות אלה מאיצות את עיבוד הדף מכיוון שהדפדפן יכול להקצות מקום בתמונה עבור התמונה, ולאחר מכן להמשיך בהורדת שאר התוכן, במקום להמתין להורדת התמונה כולה.
תכונות שימושיות אחרות IMG
כותרת. התכונה היא מאפיין גלובלי שניתן להחיל על כל רכיב HTML. יתר על כן, כותרת התכונה מאפשרת לך להוסיף מידע נוסף על התמונה.
רוב הדפדפנים תומכים כותרת אבל הם עושים זאת בדרכים שונות. חלק מציגים את הטקסט כחלון מוקפץ ואילו אחרים מציגים אותו במסכי מידע כאשר המשתמש לוחץ על הלחצן הימני של העכבר על התמונה. אתה יכול להשתמש כותרת תכונה כדי לכתוב מידע נוסף על התמונה, אבל לא לסמוך על מידע זה להיות מוסתרים או גלוי. אתה בהחלט בהחלט לא להשתמש בזה כדי להסתיר מילות מפתח עבור מנועי החיפוש. נוהג זה עכשיו נענש על ידי רוב מנועי החיפוש.
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 תכונה.
