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

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

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

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

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

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

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

הערך 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.

בדיקת ההבנה

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