רכיב התמונה

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

בדומה למאפיין srcset שמבוסס על המאפיין src, הרכיב picture מבוסס על הרכיב img. הרכיב picture עוטף רכיב img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

אם אין רכיב img שמוטמע בתוך רכיב picture, רכיב picture לא יפעל.

בדומה למאפיין srcset, הרכיב picture מעדכן את הערך של מאפיין src ברכיב img הזה. ההבדל הוא שבזמן שהמאפיין srcset נותן הצעות לדפדפן, הרכיב picture נותן פקודות. כך יש לכם שליטה.

source

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

פורמטים של תמונות

בדוגמה הזו יש שלוש תמונות שונות בשלושה פורמטים שונים:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

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

הרכיב השני source מפנה לתמונה בפורמט WebP. אם הדפדפן יכול לעבד תמונות WebP, הוא ישתמש בקובץ התמונה הזה.

אחרת, הדפדפן יחזור לקובץ התמונה בתכונה src של רכיב img. התמונה הזו היא בפורמט JPEG.

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

בדוגמה הזו, המאפיין type אומר לדפדפן איזה פורמט תמונה צוין.

גדלים של תמונות

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

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

כאן מציינים לדפדפן שאם רוחב אזור התצוגה גדול מ-75em, הוא צריך להשתמש בתמונה הגדולה. בין 40em ל-75em, הדפדפן צריך להשתמש בתמונה בגודל בינוני. מתחת ל-40em הדפדפן צריך להשתמש בתמונה הקטנה.

השימוש במאפיינים האלה שונה מהשימוש במאפיינים srcset ו-sizes ברכיב img. במקרה כזה, אתם מספקים הצעות לדפדפן. האלמנט source הוא יותר פקודה מאשר הצעה.

אפשר גם להשתמש בתיאור צפיפות הפיקסלים בתוך מאפיין srcset של רכיב source.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

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

חיתוך

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

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

דוגמה לתמונה מרכזית שמשנה את התוכן והצורה שלה בהתאם לרוחב אזור התצוגה. מוסיפים מאפיינים width ו-height לכל רכיב source.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

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

ברוב המקרים לא תצטרכו להשתמש ברכיב picture עבור התמונות הרספונסיביות שלכם – המאפיינים srcset ו-sizes ברכיב img מכסים הרבה תרחישי שימוש. אבל במצבים שבהם נדרשת שליטה מדויקת יותר, רכיב picture הוא כלי שימושי.

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

בדיקה של רמת ההבנה שלך

בדיקת הידע בנושא רכיב התמונה