תמונות רספונסיביות

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

למרבה המזל, יש פעולות שאפשר לנקוט ב-CSS כדי למנוע את זה.

הגבלת התמונות

בגיליון הסגנונות, אפשר להצהיר שאסור לעבד תמונות בגודל רחב יותר מהרכיב המכיל שלהן באמצעות max-inline-size.

תמיכה בדפדפן

  • 57
  • 79
  • 41
  • 12.1

מקור

img {
  max-inline-size: 100%;
  block-size: auto;
}

אפשר להחיל את אותו הכלל גם על סוגים אחרים של תוכן מוטמע, כמו סרטונים ומסגרות iframe.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

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

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

הוספת הערך block-size של auto פירושה שיחס הגובה-רוחב של התמונות יישאר קבוע.

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

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

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

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

כדי למנוע זאת, צריך להשתמש בנכס object-fit.

תמיכה בדפדפן

  • 32
  • 79
  • 36
  • 10

מקור

הערך contain של object-fit מורה לדפדפן לשמר את יחס הגובה-רוחב של התמונה, גם אם זה אומר שיש להשאיר שטח ריק מעל ומתחת לתמונה.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

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

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
פרופיל של כלב נאה שנראה שמח עם כדור בפה; יש שטח מיותר בשני צדי התמונה. פרופיל של כלב נאה שנראה שמח עם כדור בפה. התמונה נחתכה למעלה ולמטה.
אותה תמונה עם שני ערכים שונים ל-'object-fit'. בשדה הראשון יש ערך 'object-fit' הוא 'contain'. בשני יש ערך 'object-fit' הוא 'cover'.

אם החיתוך בחלק העליון והתחתון הוא באופן שווה, השתמשו במאפיין ה-CSS מיקום אובייקט כדי להתאים את מיקוד החיתוך.

תמיכה בדפדפן

  • 32
  • 79
  • 36
  • 10

מקור

כך אפשר לוודא שהתוכן החשוב ביותר של התמונה עדיין גלוי.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

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

שליחת התמונות

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

טיפים להתאמת הגודל

אם המידות של התמונה ידועות לך, עליך לכלול את המאפיינים width ו-height. גם אם התמונה מעובדת בגודל אחר (בגלל הכלל max-inline-size: 100%), הדפדפן עדיין יודע את יחס הרוחב-גובה ויכול להקצות את השטח הנכון. כך התוכן האחר יפסיק לקפוץ בזמן שהתמונה נטענת.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>
בסרטון הראשון מוצגת פריסה ללא מידות תמונה מוגדרות. שימו לב איך הטקסט קופץ ברגע שהתמונות נטענות. בסרטון השני סופקו מידות התמונה; נותר מקום לתמונה כך שברגע הטעינה, הטקסט לא יקפוץ ממקום למקום.

טעינת רמזים

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

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

בתמונה ראשית (Hero) בחלק העליון והקבוע, אין להשתמש ב-loading. אם האתר מחיל את המאפיין loading="lazy" באופן אוטומטי, בדרך כלל אפשר להגדיר את המאפיין eager (ברירת המחדל) כדי למנוע את היישום הזה:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

קדימות האחזור

לגבי תמונות חשובות, כמו התמונה LCP, אפשר לקבוע את סדר העדיפויות של הטעינה באמצעות עדיפות האחזור על ידי הגדרת המאפיין fetchpriority לערך high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

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

אבל חשוב לזכור: כשמבקשים מהדפדפן לתעדף הורדה של משאב אחד, כמו תמונה, הדפדפן יצטרך לעשות עדיפות למשאב אחר, כמו סקריפט או קובץ גופן. יש להגדיר את fetchpriority="high" בתמונה רק אם היא באמת חיונית.

רמזים לטעינה מראש

ייתכן שתמונות מסוימות לא יהיו זמינות ב-HTML הראשוני – אם הן נוספות באמצעות JavaScript, או כתמונת רקע ב-CSS. אפשר גם להשתמש בטעינה מראש כדי לאפשר אחזור מראש של התמונות החשובות האלה. אפשר לשלב את זה עם המאפיין fetchpriority כדי ליצור תמונות חשובות מאוד:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

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

הטעינה מראש של תמונות רספונסיביות על סמך srcset (המפורטת בהמשך) דרך המאפיינים imagesrcset ו-imagesizes היא מתקדמת יותר ונתמכת בחלק מהדפדפנים, אך לא בכולם:

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

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

השיטה האידיאלית היא להימנע מטעינה מראש ככל האפשר, ולכלול את התמונה ב-HTML הראשוני, להימנע מחזרה על הקוד ולאפשר גישה למגוון המלא של האפשרויות שנתמכות בדפדפן.

פענוח תמונה

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

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

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

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

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

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

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

תמונות רספונסיביות עם srcset

הודות להצהרה הזו בנושא max-inline-size: 100%, התמונות שלך אף פעם לא יפרידו מהמאגרים שלהן. אבל גם אם זה נראה בסדר כשתמונה גדולה מתכווצת להתאמה, זה לא בסדר. אם מישהו משתמש במכשיר עם מסך קטן ברשת עם רוחב פס צר, הוא יוריד תמונות גדולות שלא לצורך.

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

מתאר רוחב

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

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

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

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

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

גדלים

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

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

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

בדוגמה הזו, אתה אומר לדפדפן שמעל לרוחב אזור התצוגה 66em לא להציג את התמונה בשטח של יותר משליש המסך (לדוגמה, בתוך פריסה של שלוש עמודות).

לציון רוחב של אזור תצוגה בין 44em ל-66em, יש להציג את התמונה בחצי מרוחב המסך (פריסה של שתי עמודות).

לכל גודל מתחת ל-44em יש להציג את התמונה ברוחב מלא של המסך.

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

מתאר הצפיפות של הפיקסלים

יש מצב נוסף שבו אולי תרצו לספק כמה גרסאות של אותה תמונה.

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

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

יש להשתמש במתאר הצפיפות כדי לתאר את דחיסות הפיקסלים של התמונה ביחס לתמונה במאפיין src. מתאר הצפיפות הוא מספר ולאחריו האות x: 1x, 2x וכו'.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

אם small-image.png הוא בגודל 300 על 200 פיקסלים, ובגודל של medium-image.png הוא 600 על 400 פיקסלים, medium-image.png יכול להוסיף את 2x אחריו ברשימה srcset.

אין צורך להשתמש במספרים שלמים. אם גודל התמונה האחרת הוא 450 על 300 פיקסלים, ניתן לתאר אותה באמצעות 1.5x.

תמונות למצגת

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

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

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

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

במצב אידיאלי, התמונות המצגת או העיצוביות לא צריכות להיות בכלל ב-HTML. HTML נועד למבנה. CSS מיועד למצגת.

תמונות רקע

כדי לטעון תמונות מצגת, יש להשתמש במאפיין background-image ב-CSS.

element {
  background-image: url(flourish.png);
}

אפשר לציין כמה תמונות אפשריות בעזרת הפונקציה image-set עבור background-image.

הפונקציה image-set ב-CSS פועלת בדומה למאפיין srcset ב-HTML. צריך לספק רשימה של תמונות עם מתאר של צפיפות פיקסלים לכל אחת מהן.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

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

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

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

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

קיים רכיב HTML נוסף בערכת הכלים שלך שנועד לעזור לך להשיג שליטה רבה יותר על התמונות שלך: הרכיב picture.

בדיקת ההבנה

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

כדי שהתמונות יתאימו לאזור התצוגה צריך להוסיף סגנונות.

נכון
תמונות ללא גבולות יהיו גדולות כמו גודלן הטבעי.
לא נכון
יש לבחור סגנונות.

כשהגובה והרוחב של תמונה כופים ליחס גובה-רוחב לא טבעי, אילו סגנונות יכולים לעזור בהתאמת התמונה לפרופורציות האלה?

object-fit
צריך לציין איך התמונה תתאים למילות מפתח כמו contain ו-cover.
image-fit
הנכס הזה לא קיים, אני המצאתי אותו.
fit-image
הנכס הזה לא קיים, אני המצאתי אותו.
aspect-ratio
המצב הזה עשוי לגרום ליחס גובה-רוחב לא טבעי של תמונה, או לפתור אותה.

הוספת height ו-width לתמונות מונעת מ-CSS לעצב אותן בצורה שונה.

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

המאפיין srcset אינו ____עם המאפיין src, אלא ____.

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

alt חסר בתמונה זהה ל-alt ריק.

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