לא משנה עד כמה אתם מתקדמים בתהליך הלמידה של עיצוב ופיתוח עבור האינטרנט, נדרש מעט מאוד היכרות עם הרכיב <img>
.
<img>
, שהושק ב-Netscape ("Mosaic") באותו זמן) ב-1993 ונוסף למפרט ה-HTML ב-1995, מילאו כבר זמן רב תפקיד פשוט אך חזק בפלטפורמת האינטרנט. המפתח מוסיף קובץ תמונה מסוג 'מקור' עם המאפיין src
, ומספק חלופה לטקסט עם המאפיין alt
במקרה שאי אפשר לעבד את התמונה או שטכנולוגיות מסייעות תבקש חלופה. לאחר מכן, לדפדפן יש רק משימה אחת: קבלת נתוני התמונה ולאחר מכן רינדור שלהם במהירות האפשרית.
לרוב היסטוריית פיתוח האתרים, העבודה עם תמונות לא הייתה הרבה יותר מורכבת. ולמרות המורכבות של האינטרנט המודרני, העקרונות הבסיסיים של עבודה עם תמונות לא השתנו: צריך להשתמש בפורמט תמונה ידידותי לאינטרנט כדי להשיג תאימות, לבצע דחיסה הגיונית כדי לשמר רוחב פס, ובמידות שמתאימות לשטח שבו התמונה תתפוס בפריסת הדף.
בזכות השימוש בפריסות ברוחב קבוע, כמו שעשינו כשחשבנו שיהיה לנו יותר קל להראות למשתמשים איך הם חוו את האינטרנט, התהליך הזה היה מורכב. קל במיוחד להגדיר את הגודל של מקור התמונה. במקרה של תמונה שהשתרעה על שטח ברוחב של 500 פיקסלים ובגובה של 300 פיקסלים, היה צורך לציין תמונת מקור באותו גודל.
תמונות בפריסה רספונסיבית
לצד פריסה גמישה ושימוש בשאילתות מדיה של CSS, 'תמונות ומדיה גמישים' הם אחד משלושת ההיבטים שמגדירים בעיצוב אתר רספונסיבי. כדי להפוך תמונה לגמישה, מפתחים התחילו להשתמש ב-CSS כדי להגדיר max-width: 100%
בתמונה (או בכל התמונות, באתר כולו) על מנת להנחות את מנוע העיבוד של הדפדפן למנוע חריגה של הקונטיינר ההורה שלו על ידי הקטנתו. מבחינה חזותית, הפתרון הזה עובד בצורה מושלמת – צמצום של תמונה מסוג רסטר הוא חלק מבחינה חזותית. אם מוסיפים שורה או שתיים של CSS, תמונה מוקטנת תיראה תמיד כאילו שציינו מקור תמונה שאמור להופיע בגודל הזה.
כשמנועי רינדור מקבלים יותר נתוני תמונה מהכמות שנדרשת למרחב המשותף בפריסה, הם יכולים לקבל החלטות מושכלות לגבי עיבוד התמונה המצומצמת, ולעשות זאת בלי להוסיף ארטיפקטים חזותיים או לטשטש אותם.
בדרך כלל לא תרצו להגדיל תמונה - כלומר, לעבד את <img>
בגודל גדול יותר מהגודל הפנימי של תמונת המקור.
התמונה שתוצג תיראה מטושטשת ומגורענת.
אם משתמשים ב-img { max-width: 100% }
, הגודל של קונטיינרים גמיש משתנה בהתאם לגודל של התמונות.
בניגוד להגדרת width: 100%
קשיחה יותר, ההגדרה הזו גם מבטיחה שהתמונה לא תוגדל מעבר לגודל הפנימי שלה.
במשך הרבה זמן זה היה צריך לפעול לפי כללי העבודה עם תמונות: להשתמש בפורמט שהדפדפנים מבינים, להשתמש ברמת דחיסה סבירה ולעולם לא לשנות את גודל התמונות כלפי מעלה.
אבל למרות שהגישה הזו הייתה פשוטה ויעילה מבחינה חזותית, היא עלתה על מחיר ביצועים אדיר. מכיוון ש-<img>
תמך רק במקור אחד לנתוני התמונה, הגישה הזו חייבה אותנו לספק נכס תמונה בגודל פנימי גדול כמו הגודל הגדול ביותר שבו אפשר להציג אותו. תמונה שאמורה לתפוס שטח בפריסה שיכולה להיות ברוחב מ-300px
עד 2000px
, בהתאם לגודל אזור התצוגה של המשתמש, נדרש מקור תמונה ברוחב פנימי של 2000px
לפחות. למשתמש שמציג את הדף דרך אזור תצוגה קטן בלבד, הכול ייראה כמצופה — התמונה תהיה בגודל הנכון. בדף שעבר עיבוד, תמונת מקור מסיבית אך מוגדלת לא תיראה שונה מתמונה בגודל מתאים. עם זאת, הם עדיין יעבירו ויעבדו תמונה רחבה של 2000px
, תוך צריבה של רוחב פס וכוח עיבוד עצום ללא יתרון מוחשי.
המצבים החמירו מאוד עם המצאת מכשירי "Retina" הראשונים, מאחר שצפיפות התצוגה הפכה לחשש לצד גודל אזור התצוגה. מקור תמונה צריך רוחב פנימי גדול בהרבה כדי להתאים לתצוגה בצפיפות גבוהה. במילים פשוטות, לתצוגה עם צפיפות כפולה נדרש מספר כפול של פיקסלים בתמונה כדי שהתמונה תהיה חדה ככל האפשר.
בגרסה הזו, המפתחים שוב יכלו להסתמך על היכולת של מנועי העיבוד להוריד את קנה המידה של התמונות באופן ויזואלי. אם מספקים לדפדפן תמונת מקור רחבה של 800px
ב-src
, ומציינים שהיא צריכה להיות מוצגת ברוחב 400px
באמצעות CSS, התוצאה היא תמונה שמעובדת בדחיסות פיקסלים כפולה:
כמובן שתמונת מקור אחת, שנחתך כדי להתאים לשטח הגדול ביותר האפשרי בפריסה ובתצוגות בצפיפות גבוהה, מתאימה לכל המשתמשים באופן חזותי. מקור תמונה ענק ברזולוציה גבוהה שמעובד במסך קטן בצפיפות נמוכה ייראה כמו כל תמונה קטנה בצפיפות נמוכה, אך ירגיש הרבה יותר איטי. המשתמש לא יישא בעלויות הביצועים של מקור התמונה הענקי הזה, ברוחב 4,000 פיקסלים, ללא כל יתרון.
במשך תקופה ארוכה, <img>
עשה בעיקר דבר אחד – הוא "קיבל נתוני תמונה והוסיף אותם למסך". זה עשה את זה במידה סבירה, בהחלט, אבל <img>
לא היה מוכן להתמודד עם השינויים הקיצוניים בהקשר של הגלישה שראינו. עיצוב אתר רספונסיבי הפך לחלק משיטות הפיתוח המקובלות, אבל הדפדפנים ביצעו אופטימיזציה לביצועים של img
במשך כמעט עשרים שנה. אבל עבור כל המשתמשים מלבד בעלי ההרשאות הגבוהה ביותר, תוכן התמונות של הדפים לא היה יעיל מלכתחילה. לא משנה באיזו מהירות הדפדפן הצליח לבקש, לנתח ולעבד מקור תמונה, סביר להניח שהנכס הזה יהיה גדול בהרבה ממה שהמשתמש צריך.