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

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

למזלכם, ב-CSS יש כלים שיעזרו לכם למנוע את זה.

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

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

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

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

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

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

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

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

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

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

כדי למנוע כיווץ ומתיחה, משתמשים במאפיין object-fit.

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

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-position. כך משנים את המיקוד של החיתוך, כדי לוודא שהחלק הכי חשוב בתמונה עדיין גלוי.

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

<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", בדרך כלל אפשר להגדיר את loading לערך ברירת המחדל 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. לדוגמה:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

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

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

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

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

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

תיאור הרוחב

אפשר להגדיר 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 ולא מחליף אותו. עדיין צריך להזין ערך תקין למאפיין 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 x 200 פיקסלים, והגודל של medium-image.png הוא ‎600 x 400 פיקסלים, אפשר להוסיף את 2x אחרי medium-image.png ברשימה srcset.

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

תמונות להצגה

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

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

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

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

מומלץ לכלול תמונות להצגה או לקישוט באמצעות CSS ולא באמצעות 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.

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

רוצים לבחון את הידע שלכם בתמונות?