תמונות

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

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

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

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

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

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

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

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

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

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

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

בדיקת ההבנה

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