תמונות

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

השיטה העיקרית להוספת תמונות היא באמצעות התג <img> עם המאפיין src שמפנה למשאב תמונה והמאפיין alt שמתאר את התמונה.

<img src="images/eve.png" alt="Eve">

גם המאפיין srcset ברכיב <img> וגם הרכיב <picture> מאפשרים לכלול כמה מקורות תמונות עם שאילתות מדיה משויכות, שלכל אחת מהן יש מקור תמונות לגיבוי. כך אפשר להציג את קובץ התמונה המתאים ביותר על סמך הרזולוציה של המכשיר, יכולות הדפדפן וגודל אזור התצוגה. המאפיין srcset מאפשר לספק כמה גרסאות של תמונה על סמך הרזולוציה, וגם על סמך גודל אזור התצוגה של הדפדפן, בשילוב עם המאפיין sizes.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

אפשר לעשות את זה גם באמצעות הרכיב <picture>, יחד עם רכיבי הצאצא <source>, שמקבלים את <img> כמקור ברירת מחדל.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

בנוסף לשיטות המובנות של HTML לתמונות רספונסיביות, אפשר גם לשפר את ביצועי העיבוד של תמונות ב-HTML באמצעות מאפיינים שונים. התג <img>, ולכן לחצני שליחה גרפיים <input type="image">, יכולים לכלול מאפיינים height ו-width כדי להגדיר את יחס הגובה-רוחב של התמונה, וכך לצמצם את התזוזה בפריסת התוכן. המאפיין lazy מאפשר טעינה עצלה.

ב-HTML יש גם תמיכה בהוספה של תמונות SVG באמצעות התג <svg> ישירות, אבל אפשר להטמיע תמונות SVG עם הסיומת .svg (או כ-data-uri) באמצעות התג <img>.

לכל הפחות, כל תמונה של חזית צריכה לכלול את המאפיינים src ו-alt.

הקובץ src הוא הנתיב ושם הקובץ של התמונה המוטמעת. המאפיין src משמש לציון כתובת ה-URL של התמונה. לאחר מכן הדפדפן מאחזר את הנכס ומציג אותו בדף. מאפיין חובה ב-<img>. בלעדיו, אין מה לעבד.

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

<img src="path/filename" alt="descriptive text" />

אם התמונה היא קובץ מסוג SVG, צריך לכלול גם את המחרוזת role="img", שנדרשת בגלל VoiceOver ב-VoiceOver.

<img src="switch.svg" alt="light switch" role="img" />

כתיבה של תיאורי תמונות אפקטיבייםalt

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

כדי לכתוב טקסט חלופי יעיל, דמיינו שאתם קוראים את כל הדף לאדם שלא יכול לראות אותו. באמצעות רכיב semantic <img>, משתמשים בקוראי מסך ובוטים מקבלים מידע על כך שהרכיב הוא תמונה. אין צורך לכלול את המשפט "זו תמונה/צילום מסך/תמונה של" ב-alt. המשתמש לא צריך לדעת שיש תמונה, אבל הוא צריך לדעת איזה מידע התמונה מעבירה.

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

לדוגמה, תמונה של כלב מתוארת בדרכים שונות, בהתאם להקשר. אם פלאפי הוא אווטאר לצד ביקורת על מזון כלבים של יאקימיט, alt="Fluffy" מספיק.

אם התמונה היא חלק מדף האימוץ של פלאפי באתר של עמותה להצלת בעלי חיים, קהל היעד הוא הורים פוטנציאליים לכלב. הטקסט צריך לתאר את המידע שמועבר בתמונה שרלוונטי למשתמשים, ושלא מופיע בטקסט שמסביב. תיאור ארוך יותר, כמו alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth", מתאים. הטקסט של דף אימוץ בדרך כלל כולל את המינים, הגזע, הגיל והמין של חיית המחמד שאפשר לאמץ, ולכן אין צורך לחזור על המידע הזה בטקסט החלופי. אבל בביוגרפיה הכתובה של הכלב כנראה לא יופיעו פרטים כמו אורך השיער, הצבעים או העדפות הצעצועים.

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

כשמשתמשים בתמונות לסמלים, מאפיין alt מספק את השם שנגיש לאנשים עם מוגבלויות, ולכן צריך להעביר את המשמעות של הסמל ולא תיאור של התמונה. לדוגמה, מאפיין ה-alt של סמל זכוכית המגדלת הוא search. הסמל שנראה כמו בית כולל את הטקסט החלופי home. התיאור של הסמל של תקליטון 5 אינץ' הוא save. אם יש שני סמלים של Fluffy שמשמשים לציון שיטות מומלצות ודפוסים בעייתיים, יכול להיות שהכלב המחייך עם הכומתה הירוקה יציג את ההודעה alt="good", והכלב הנוהם עם הכומתה האדומה יציג את ההודעה alt="bad". עם זאת, מומלץ להשתמש רק בסמלים סטנדרטיים. אם משתמשים בסמלים לא סטנדרטיים, כמו הסמלים של Fluffy הטוב ו-Fluffy הרע, צריך לכלול מקרא ולוודא שהסמלים הם לא הדרך היחידה להבין את המשמעות של רכיבי ממשק המשתמש.

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

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

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

אם צילום המסך מראה איך למצוא את מספר הגרסה של הדפדפן על ידי מעבר אל chrome://version/, צריך לכלול את כתובת ה-URL בתוכן הדף כהוראות, ולספק מחרוזת ריקה כמאפיין alt, כי התמונה לא מספקת מידע שלא מופיע בטקסט שמסביב.

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

<img src="svg/magazine.svg" alt="" role="none" />

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

המגזין הוא פריט דקורטיבי בלבד, ולכן מאפיין alt שלו ריק. role הוא none כי התמונה היא SVG שמשמשת רק להצגה. אם יש משמעות, תמונות SVG צריכות לכלול את התג role="img".

<img src="svg/magazine.svg" alt="" role="none" />

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

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

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

<img src="images/blender.svg" alt="blender" role="img" />

התמונות של המדריכים הן לא רק אווטרים: אלה תמונות ביוגרפיות ולכן הן מקבלות תיאור מפורט יותר.

אם זה היה אתר אמיתי, היית מספק תיאור מינימלי של המורה, כדי שתלמיד פוטנציאלי יוכל לזהות אותו כשהוא נכנס לכיתה.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

מכיוון שמדובר באתר בדיחות, עליך לספק את המידע שרלוונטי בהקשר של הבדיחה במקום זאת:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

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

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

המאפיינים src ו-alt הם דרישות מינימליות לתמונות מוטמעות. יש עוד כמה מאפיינים שחשוב לדבר עליהם.

תמונות רספונסיביות

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

מאפיין אחד (<img> srcset)

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

יכול להיות מאפיין srcset אחד לכל רכיב <img>, אבל המאפיין srcset יכול לקשר לכמה תמונות. במאפיין srcset אפשר להזין רשימה של ערכים מופרדים בפסיקים, שכל אחד מהם מכיל את כתובת ה-URL של הנכס, ואחריה רווח ואז תיאורים של אפשרות התמונה הזו. אם משתמשים בתיאור רוחב, צריך לכלול גם את מאפיין sizes עם שאילתת מדיה או גודל מקור לכל אפשרות srcset מלבד האחרונה. מומלץ לקרוא את הקטעים בנושא תמונות רספונסיביות עם srcset ותחביר תיאורי.

אם יש התאמה, התמונה srcset מקבלת עדיפות על פני התמונה src.

<picture> וגם <source>

שיטה נוספת להצגת כמה משאבים ולאפשר לדפדפן לעבד את הנכס המתאים ביותר היא באמצעות הרכיב <picture>. הרכיב <picture> הוא רכיב מאגר שמכיל מספר אפשרויות לתמונות שמופיעות במספר בלתי מוגבל של רכיבי <source> וברכיב <img> נדרש יחיד.

מאפייני <source> כוללים את המאפיינים srcset,‏ sizes,‏ media,‏ width ו-height. המאפיין srcset נפוץ ב-img, ב-source וב-link, אבל בדרך כלל הוא מיושם בצורה קצת שונה במקור כי אפשר לפרט שאילתות מדיה במקום זאת במאפיין media של <srcset>. הרכיב <source> תומך גם בפורמטים של תמונות שמוגדרים במאפיין type.

הדפדפן בודק כל רכיב צאצא <source> ובוחר את ההתאמה הטובה ביותר מביניהם. אם לא נמצאות התאמות, נבחרת כתובת ה-URL של המאפיין src של רכיב <img>. השם הנגיש מגיע מהמאפיין alt של הרכיב המקונן <img>. כדאי גם לקרוא את הקטעים בנושא <picture> ותחביר מומלץ.

תכונות נוספות לשיפור הביצועים

יש כמה תכונות נוספות של תמונות שיכולות לשפר את הביצועים של האתר.

טעינה מדורגת

המאפיין loading אומר לדפדפן עם JavaScript איך לטעון את התמונה. ערך ברירת המחדל eager מציין שהתמונה נטענת באופן מיידי בזמן הניתוח של ה-HTML, גם אם התמונה לא נמצאת באזור התצוגה הגלוי. ההגדרה loading="lazy" דוחה את טעינת התמונה עד שהיא צפויה להיכנס לאזור התצוגה. הדפדפן מגדיר את המילה Likely (סביר) על סמך המרחק של התמונה מאזור התצוגה. הערך הזה מתעדכן כשהמשתמש גולל. טעינה עצלה עוזרת לחסוך ברוחב פס ובמעבד, וכך לשפר את הביצועים עבור רוב המשתמשים. אם JavaScript מושבת, מטעמי אבטחה, כל התמונות מוצגות כברירת מחדל עם הסמל eager.

<img src="switch.svg" alt="light switch" loading="lazy" />

יחס גובה-רוחב

הדפדפנים מתחילים לעבד HTML כשהוא מתקבל, ושולחים בקשות לנכסים כשהם נתקלים בהם. המשמעות היא שהדפדפן כבר מציג את ה-HTML כשהוא נתקל בתג <img> ושולח את הבקשה. יכול להיות שיעבור זמן עד שהתמונות ייטענו. כברירת מחדל, הדפדפנים לא שומרים מקום לתמונות, מלבד הגודל שנדרש לעיבוד הטקסט alt.

הרכיב <img> תמיד תמך במאפיינים height ו-width ללא יחידות. השימוש במאפיינים האלה הופסק לטובת CSS. יכול להיות ש-CSS יגדיר את מידות התמונה, ולעתים קרובות יגדיר מידה אחת כמו max-width: 100%; כדי לוודא שיחס הגובה-רוחב נשמר.

מכיוון ש-CSS בדרך כלל נכלל ב-<head>, הוא מנותח לפני שנתקלים ב-<img>. אבל אם לא מציינים במפורש את height או את יחס הגובה-רוחב, השטח שמוקצה הוא הגובה (או הרוחב) של הטקסט alt.

כשמפתחים מציינים רק רוחב, הקבלה והעיבוד של התמונות מובילים לתזוזת פריסה מצטברת שפוגעת במדדי הליבה של האתר. כדי לפתור את הבעיה, דפדפנים תומכים ביחסי גובה-רוחב של תמונות. הכללת המאפיינים height ו-width בתג <img> פועלת כרמזים לגבי גודל, ומספקת לדפדפן מידע על יחס הגובה-רוחב, כדי שיוכל להקצות את כמות המקום הנכונה לעיבוד התמונה בסופו של דבר. כשהדפדפן נתקל בממד יחיד, כמו בדוגמה של 50%, הוא שומר מקום לתמונה בהתאם לממד CSS, והממד השני שומר על יחס הגובה-רוחב.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

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

תכונות אחרות שקשורות לתמונות

הרכיב <img> תומך גם במאפיינים crossorigin, decoding, referrerpolicy ובדפדפנים שמבוססים על Blink, גם במאפיין fetchpriority. אם התמונה היא חלק ממפה בצד השרת, צריך לכלול את מאפיין הבוליאני ismap ולקנן את התג <img> בקישור למשתמשים בלי מכשירי הצבעה.

אין צורך במאפיין ismap ב-<input type="image" name="imageSubmitName">, והוא גם לא נתמך בו, כי הקואורדינטות x ו-y של מיקום הקליק נשלחות במהלך שליחת הטופס, וערכי הקואורדינטות מצורפים לשם שדה הקלט, אם יש כזה. לדוגמה, משהו כמו &imageSubmitName.x=169&imageSubmitName.y=66 נשלח עם הטופס כשמשתמש לוחץ על התמונה ושולח אותה. אם לתמונה אין מאפיין name, הערכים x ו-y נשלחים: &x=169&y=66.

בדיקת ההבנה

רוצים לבחון את הידע שלכם בתמונות?