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