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

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

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

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

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

תחבירים תיאוריים

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

srcset ו-sizes מספקות תחביר להעברת מידע לדפדפן של המשתמש ומאפשר לו לקבל החלטות לגבי מקורות התמונות, אבל במקרים מסוימים יהיה צורך בשליטה מפורשת על קובץ המקור שמוצג ומתי. לדוגמה, יכול להיות שתרצו להציג גרסאות של אותו תוכן תמונה עם יחסי גובה-רוחב שונים על סמך טיפולי עיצוב שונים בנקודות עצירה (breakpoint) בפריסה, או לוודא שרק דפדפנים שתומכים בקידוד מסוים מקבלים מקורות ספציפיים.

במקרים כאלה, תרצו שליטה מפורשת על המקור שיוצג ומתי. אלה הבטחות ש-srcset ו-sizes לא יכולים לתת לנו, מכוונת. כדי לקבל את אמצעי הבקרה הזה, נצטרך להשתמש באלמנט <picture>.