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

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

למרבה המזל, שירות ה-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 עדיין יטענו מראש את התמונה הנכונה.

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

פענוח הקוד של התמונה

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

תמונות רספונסיביות עם 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 על 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 חסר לא מספק את המידע הזה.

באופן אידיאלי, תמונות דקורטיביות או מצגת נכללות ב-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.

בחינת ההבנה

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