רכיב התמונה

המודול הקודם הדגים איך המאפיין 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 הוא כלי עוצמתי.

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

בחינת ההבנה

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