תמונות הן בדרך כלל המשאב הכבד ביותר והנפוץ ביותר באינטרנט. כתוצאה מכך, אופטימיזציה של תמונות יכולה לשפר משמעותית את הביצועים באתר. ברוב המקרים, אופטימיזציה של תמונות פירושה קיצור הזמן שנדרש להעברת הנתונים ברשת על ידי שליחת פחות בייטים. אבל אפשר גם לבצע אופטימיזציה של כמות הבייטים שנשלחים למשתמש על ידי הצגת תמונות בגודל שמתאים למכשיר של המשתמש.
אפשר להוסיף תמונות לדף באמצעות האלמנטים <img> או <picture>, או באמצעות המאפיין background-image ב-CSS.
Image size
האופטימיזציה הראשונה שאפשר לבצע כשמשתמשים בנכסי תמונה היא הצגת התמונה בגודל הנכון. במקרה הזה, המונח גודל מתייחס למידות של התמונה. אם לא לוקחים בחשבון משתנים אחרים, הגודל האופטימלי של תמונה שמוצגת במיכל בגודל 500 פיקסלים על 500 פיקסלים יהיה 500 פיקסלים על 500 פיקסלים. לדוגמה, אם משתמשים בתמונה ריבועית של 1,000 פיקסלים, התמונה גדולה פי שניים מהגודל הנדרש.
עם זאת, יש הרבה משתנים שמשפיעים על בחירת הגודל המתאים של התמונה, ולכן בחירת הגודל המתאים של התמונה בכל מקרה היא משימה די מורכבת. בשנת 2010, כשהושק אייפון 4, רזולוציית המסך (640x960) הייתה כפולה מזו של אייפון 3 (320x480). עם זאת, הגודל הפיזי של המסך של iPhone 4 נשאר בערך כמו של iPhone 3.
אם הייתי מציג הכול ברזולוציה הגבוהה יותר, הטקסט והתמונות היו קטנים משמעותית – חצי מהגודל הקודם שלהם, ליתר דיוק. במקום זאת, פיקסל אחד הפך ל-2 פיקסלים של המכשיר. היחס הזה נקרא יחס הפיקסלים של המכשיר (DPR). ב-iPhone 4 (ובדגמי אייפון רבים שיצאו אחריו) יחס ה-DPR היה 2.
נחזור לדוגמה הקודמת. אם למכשיר יש DPR של 2 והתמונה מוצגת במאגר בגודל 500 פיקסלים על 500 פיקסלים, אז הגודל האופטימלי הוא עכשיו תמונה ריבועית בגודל 1, 000 פיקסלים (שנקרא גודל פנימי). באופן דומה, אם ערך ה-DPR של המכשיר הוא 3, הגודל האופטימלי של תמונה ריבועית יהיה 1,500 פיקסלים.
. ברוב המקרים, אפשר להשתמש בתמונה קטנה יותר מהגודל האופטימלי בלי שרוב המשתמשים יבחינו בירידה באיכות התמונה.srcset
הרכיב <img> תומך במאפיין srcset, שמאפשר לציין רשימה של מקורות תמונות אפשריים שהדפדפן יכול להשתמש בהם. כל מקור תמונה שצוין צריך לכלול את כתובת ה-URL של התמונה, ומתאר של רוחב או צפיפות פיקסלים.