שימוש בתמונות, תגית img

התגית img משמשת על מנת להכניס תמונה לעמוד באתר אינטרנט. תגית זו הינה תגית ריקה, כלומר, יש בתוכה רק מאפיינים, ואין לה תגית סגירה (כלומר היא סוגרת את עצמה).

מאפיין src של תגית img

בכדי שתמונה כלשהי תוצג במסמך html, יש להשתמש במאפיין src בתוך תגית img. מאפיין זה מגדיר את המקור של התמונה, כלומר, המקום בו היא שמורה, כאשר הערך value של המאפיין src הוא כתובת ה-url שבה נמצאת התמונה. כך תיראה למשל התגית img להוספת תמונה בשם "play.webp":

מאפיין alt של תגית img

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

כך מגדירים בקוד ערך חלופי לתמונה:

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

מאפיין alt הינו מאפיין חובה בתקן HTML5, בניגוד לתקנים ישנים שאיפשרו שימוש בתגיות img ללא מאפיין alt.

הגדרת גודל התמונה ב-HTML5

המאפיינים height ו-width משמשים להגדרה של גובה ורוחב התמונה. הערכים המספריים מתייחסים לפיקסלים:

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