وقتی سایتی کند است، اولین جایی که نگاه می‌کنم تصاویر است. نه به این دلیل که همیشه مقصرند، بلکه چون وقتی مقصر باشند، اصلاحشان از هر کار دیگری ارزان‌تر است.
فرمت درست را انتخاب کنید
JPEG و PNG هنوز همه‌جا کار می‌کنند، ولی WebP معمولاً همان کیفیت را با حجم بسیار کمتر می‌دهد و امروز در همهٔ مرورگرهای مدرن پشتیبانی می‌شود. AVIF از آن هم کوچک‌تر است ولی کدگذاری‌اش کندتر است.
برای لوگو، آیکن و هر چیزی که خط و شکل هندسی است، اصلاً تصویر نگذارید — SVG بگذارید. در هر اندازه‌ای تیز می‌ماند و معمولاً چند کیلوبایت بیشتر نیست.
تصویر را به اندازه‌ای که نمایش می‌دهید بفرستید
رایج‌ترین اشتباهی که می‌بینم: عکسی با عرض ۴۰۰۰ پیکسل که در یک قاب ۴۰۰ پیکسلی نمایش داده می‌شود. مرورگر کل فایل را دانلود می‌کند و بعد کوچکش می‌کند. کاربر هزینهٔ ده برابر را می‌دهد بدون اینکه چیزی ببیند.
ابعاد را اعلام کنید
هر تصویر باید `width` و `height` داشته باشد. بدون آن، مرورگر نمی‌داند چقدر جا نگه دارد و صفحه هنگام رسیدن تصویر می‌پرد — همان چیزی که در معیار CLS جریمه می‌شود.
بارگذاری تنبل، ولی نه برای همه
تصاویری که پایین صفحه‌اند باید `loading="lazy"` بگیرند تا تا وقتی کاربر به آن‌ها نرسیده دانلود نشوند. ولی تصویر اصلی بالای صفحه را هرگز تنبل نکنید؛ همان تصویر معمولاً همان چیزی است که LCP را می‌سازد و تنبل کردنش نمرهٔ شما را بدتر می‌کند.
یک تست ساده
ابزار توسعه‌دهندهٔ مرورگر را باز کنید، به تب Network بروید، صفحه را تازه کنید و بر اساس حجم مرتب کنید. اگر بزرگ‌ترین چند فایل تصویر بودند، مسیرتان مشخص است.