תמונות

תמונות דקורטיביות, כמו מעבר צבעים הדרגתי של רקע בלחצנים או תמונות רקע בקטעי תוכן או בדף מלא, הן משמשות לתצוגה ויש להחיל אותן באמצעות 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>

בנוסף לשיטות התמונה הרספונסיביות (RDA) המובנות האלה, 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", שנדרש בגלל bugs של VoiceOver.

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

כתיבה של תיאורי תמונות יעילים של alt

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

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

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

לדוגמה, תמונה של כלב מתוארת בדרכים שונות בהתאם להקשר. אם פלאפי היא דמות שמופיעה לצד ביקורת על מזון לכלבים Yuckymeat, 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. אם יש שני סמלים של פלאפי כדי לציין שיטות מומלצות ואנטי-תבניות, למשל לכלב המחייך בכובע ברט ירוק אפשר להגדיר alt="good", והכלב הצורח עם כובע בארט אדום עשוי להציג את הכיתוב alt="bad". עם זאת, עליכם להשתמש רק בסמלים סטנדרטיים, ואם אתם משתמשים בסמלים לא סטנדרטיים כמו פלאפי, כמו ה-Fluffy הטוב והרע, כדאי לכלול מקרא, ולוודא שהסמלים הם לא הדרך היחידה לפענח את המשמעות של רכיבי ממשק המשתמש שלכם.

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

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

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

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

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

האתר MachineLearningWorkshop.com כולל שבע תמונות חזית, ולכן שבע תמונות עם מאפייני Alt: מתג אור של ביצת פסחא, סמל ידני, שתי תמונות ביוגרפיות של האל ו-Eve ושלוש דמויות של בלנדר, שואב אבק וטוסטר. התמונה בחזית שנראית כמו כתב עת היא היחידה שמיועדת לקישוט בלבד. יש לדף גם שתי תמונות רקע. הן גם דקורטיביות, והוספתן באמצעות 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 מאפשר להציע מספר קובצי תמונה, והדפדפן בוחר איזו תמונה לבקש על סמך מספר שאילתות מדיה, כולל גודל אזור התצוגה ורזולוציית המסך.

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

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

<picture> וגם <source>

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

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

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

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

טעינה מדורגת

המאפיין loading מורה לדפדפן התומך ב-JS איך לטעון את התמונה. המשמעות של ערך ברירת המחדל eager היא שהתמונה נטענת מיד כשה-HTML מנותח, גם אם התמונה נמצאת מחוץ לאזור התצוגה הגלוי. כשמגדירים את הסמל loading="lazy", טעינת התמונה נדחית עד שיש סיכוי גבוה שהיא תגיע לאזור התצוגה. הערך 'סביר להניח' מוגדר על ידי הדפדפן על סמך המרחק בין התמונה מאזור התצוגה. המידע הזה מתעדכן כשמשתמש גולל. טעינה עצלה עוזרת לחסוך ברוחב פס ובמעבד (CPU) ומשפרת את הביצועים לרוב המשתמשים. אם 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.

בחינת ההבנה

בוחנים את הידע שלכם בתמונות.

אילו שני מאפיינים צריכים להיות לתמונה בחזית?

size
אפשר לנסות שוב.
alt
נכון!
src
נכון!