רכיב התמונה

המודול הקודם הראה איך המאפיין 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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

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

חיתוך

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

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

הנה דוגמה לתמונה ראשית (Hero) שמשנה את התוכן ואת הצורה שלה בהתאם לרוחב אזור התצוגה. להוסיף את המאפיינים 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" loading="eager" decoding="sync">
</picture>

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

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

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

בדיקת ההבנה

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