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

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

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

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

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

תמיכה בדפדפן

• 57
• 79
• 41
• 12.1

מקור

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

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

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

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.

תמיכה בדפדפן

• 32
• 79
• 36
• 10

מקור

הערך 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-fit'. בראשון יש ערך 'object-fit' של 'contain' (מכיל). בשנייה יש ערך 'object-fit' של 'cover'.

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

תמיכה בדפדפן

• 32
• 79
• 36
• 10

מקור

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

אפשר להגדיר את object-position לחיתוך רק צד אחד של התמונה.

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

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

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

<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.

בדיקת ההבנה

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

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

נכון

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

לא נכון

נדרשים סגנונות.

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

object-fit

צריך לציין איך התמונה מתאימה למילות מפתח כמו contain ו-cover.

image-fit

הנכס הזה לא קיים, אני המציאה אותו.

fit-image

הנכס הזה לא קיים, אני המציאה אותו.

aspect-ratio

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

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

נכון

צריך לחשוב עליהם יותר כמו רמזים מאשר כללים.

לא נכון

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

המאפיין srcset לא ________ את המאפיין src, אלא ___ שלו.

משלים, מחליף

המוצר srcset בהחלט לא מחליף את המאפיין src.

החלפה, משלימה

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

אם השדה alt חסר בתמונה, זהה לalt ריק.

נכון

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

לא נכון

לא צוין alt לא בשביל קורא מסך.