הצגת תמונות ב-HTML
על מנת לשלב תמונות ב-HTML נעזר בתגית img.
דוגמה:
<img src="piano.webp" alt="man is playing the piano" />בדוגמה זו, אנו מציגים את התמונה piano.webp.
המאפיין src (קיצור של source, כלומר "מקור") כולל את הכתובת של התמונה. ניתן להשתמש בכתובת אבסולוטית (כתובת מוחלטת, כגון https://www.iteacher.co.il/images/piano.webp) או בכתובת ריילטיבית (כתובת יחסית, כגון piano.webp בלבד).
המאפיין alt (קיצור של alternative, כלומר "אלטרנטיבה") כולל ערך אלטרנטיבי לתמונה. כלומר, ביטוי המייצג את התמונה. ביטוי זה משמש בכמה מצבים: הוא יוצג כאשר לא ניתן יהיה לטעון את התמונה, הוא מאפשר זיהוי של התמונה עבור מנועי החיפוש ומאפשר זיהוי של התמונה על ידי כלי הנגשה שונים. ליצירת HTML תיקני, חובה להשתמש במאפיין alt.
קביעת מידות לתמונה
תמונות הן אובייקטים "כבדים" יותר מאשר טקסט. בעוד עמוד HTML חסר תמונות יכול להיות באורך של 5K או 10K, תמונה קטנה אחת יכולה לבדה לתפוס 300K (פי 300 מכל הטקסטים בעמוד יחד).
כדי להאיץ את טעינת עמודי ה-HTML, טוען הדפדפן קודם את כל האובייקטים השונים ללא התמונות, ואילו את התמונות הוא טוען בסיום בצורה אסינכרונית, כלומר, באופן שמאפשר גלישה בעמוד תוך כדי טעינת התמונה.
הרבה פעמים הטעינה היא בכלל "טעינה עצלה" (lazy load). הכוונה היא שכל עוד לא רואים את התמונה, הדפדפן כלל לא טוען אותה. זה קורה לדוגמה כאשר יש תמונה שצריך לגלול מטה על מנת לראות אותה. עד שלא נגלול את העמוד מטה, הדפדפן לא יטען את התמונה כלל. בכך, טעינת העמוד עצמו מואצת והגלישה מהירה יותר.
בשל אופן טעינת עמוד ה-HTML, נוצר מצב שבעת טעינת תמונה לא תמיד יש לה מקום שהוקצה לה מלכתחילה על המסך, ואז כשהתמונה נטענת, יתר האובייקטים שכבר נטענו לפניה "מפנים לתמונה מקום" וזזים לצד או למטה. הדבר יוצר קפיצה של העמוד בעת הגלישה ופוגע בחוויית המשתמש.
כדי למנוע את אותה הקפיצה, ניתן ליידע את הדפדפן מראש מה מידות המקום שדרוש להקצות לתמונה, וכך המקום הנדרש יוקצה לתמונה מבעוד מועד. כשהתמונה תיטען בזמנה, יהיה לה כבר מקום שהוקצה לה מראש והאלמנטים על המסך לא יצטרכו לפנות לה מקום.
את זה עושים באמצעות הגדרת מידות התמונה: width עבור רוחב התמונה ו-height עבור גובה התמונה.
דוגמה:
<img src="house.webp" alt="big house" width="300" height="400" />בדוגמה זו, התמונה הנטענת היא במידות 300X400 (רוחב 300, גובה 400) ולכן עוד בטרם הדפדפן מציג את התמונה על המסך, הוא מפנה לה את המקום הנדרש.
