تصاویر وب: فرمت، اندازه و بارگذاری تنبل
در بیشتر سایت‌هایی که برای بهینه‌سازی سرعت بررسی می‌کنیم، بیش از نیمی از حجم صفحه تصویر است. خوبی ماجرا این است که این بخش معمولاً بدون دست زدن به کد قابل اصلاح است.
اول: اندازهٔ واقعی
رایج‌ترین اشتباه، آپلود عکس مستقیماً از دوربین یا از فایل طراحی است. تصویری با عرض ۴۰۰۰ پیکسل که در صفحه با عرض ۸۰۰ پیکسل نمایش داده می‌شود، پنج برابر داده‌ای که لازم است دانلود می‌کند و مرورگر باید همه‌اش را بخواند.
عرض نمایش واقعی را اندازه بگیرید و تصویر را حداکثر دو برابر آن ذخیره کنید — دو برابر برای صفحه‌های با چگالی بالا کافی است.
دوم: فرمت
WebP امروز در همهٔ مرورگرهای رایج پشتیبانی می‌شود و معمولاً با کیفیت یکسان، بین ۲۵ تا ۳۵ درصد سبک‌تر از JPEG است. برای تصاویر با ناحیه‌های تخت و متن، SVG انتخاب بهتری است چون در هر اندازه‌ای تیز می‌ماند و اغلب چند کیلوبایت بیشتر نیست.
لوگو را هرگز به صورت تصویر پیکسلی نگذارید. لوگوی PNG روی نمایشگر رتینا محو دیده می‌شود و چند برابر معادل برداری‌اش حجم دارد.
سوم: چند اندازه بدهید
با srcset می‌توانید چند نسخه از یک تصویر معرفی کنید و مرورگر متناسب با عرض صفحه و چگالی نمایشگر مناسب‌ترین را بردارد. این کار برای موبایل بیشترین صرفه‌جویی را دارد، جایی که پهنای باند کمتر است.
چهارم: بارگذاری تنبل، ولی نه برای همه
تصاویری که پایین صفحه‌اند با loading="lazy" فقط وقتی دانلود می‌شوند که کاربر به آن‌ها نزدیک شود. اما تصویر بالای صفحه را تنبل نکنید؛ همان تصویر معمولاً معیار اصلی سرعت شما را می‌سازد و تنبل کردنش نتیجه را بدتر می‌کند.
پنجم: ابعاد را اعلام کنید
روی هر تصویر width و height بگذارید تا مرورگر پیش از دانلود جایش را کنار بگذارد و صفحه هنگام بارگذاری نپرد. این کار حجم را کم نمی‌کند ولی یکی از سه معیار اصلی سرعت را مستقیماً درست می‌کند.
متن جایگزین
برای تصویر معنادار، alt بنویسید که محتوایش را توصیف کند. برای تصویر تزئینی، alt را خالی بگذارید تا صفحه‌خوان از رویش رد شود. خالی گذاشتن آگاهانه، بهتر از نوشتن «تصویر» است.