טקסט באינטרנט גולש באופן אוטומטי בקצוות המסך כך שלא גולש. זה שונה עם תמונות. לתמונות יש גודל פנימי. אם התמונה רחבה יותר מהמסך, התמונה תגלוש, וכתוצאה מכך יופיע סרגל גלילה אופקי.
למרבה המזל, יש פעולות שאפשר לנקוט ב-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
פירושה שיחס הגובה-רוחב של התמונות יישאר קבוע.
לפעמים מידות של תמונה אינן בשליטתכם - אם תמונה מתווספת, למשל באמצעות מערכת ניהול תוכן. אם בעיצוב שלכם מוגדר יחס גובה-רוחב של תמונה השונה מהמידות האמיתיות של התמונה, עליכם להשתמש במאפיין aspect-ratio
ב-CSS.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
עם זאת, הדפדפן עשוי לכווץ או למתוח את התמונה כדי להתאים אותה ליחס הגובה-רוחב המועדף עליכם.
כדי למנוע זאת, צריך להשתמש בנכס object-fit
.
הערך 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;
}
אם החיתוך בחלק העליון והתחתון הוא באופן שווה, השתמשו במאפיין ה-CSS מיקום אובייקט כדי להתאים את מיקוד החיתוך.
כך אפשר לוודא שהתוכן החשוב ביותר של התמונה עדיין גלוי.
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 לעצב אותן בצורה שונה.
המאפיין srcset
אינו ____עם המאפיין src
, אלא ____.
srcset
בהחלט לא מחליף את המאפיין src
.alt
חסר בתמונה זהה ל-alt
ריק.
alt
ריק מיידע את קורא המסך שהתמונה הזו מוצגתalt
, לא מסמנת כלום לקורא המסך.