جواب همیشه «عکس کم» نیست.
گاهی مشکل اصلی اینه که مرورگر نمیدونه کدوم عکس رو اول دانلود کنه.
فرض کن صفحهای داری که ۳۰ تصویر داره.
تصویر Hero بالای صفحه باید سریع نمایش داده بشه، ولی تصاویر پایین صفحه اصلاً نیازی نیست همون لحظه دانلود بشن.
اینجاست که "loading="lazy کاربرد پیدا میکنه:
<img src="product.webp" loading="lazy">
اما یه اشتباه رایج:
روی تصویر اصلی بالای صفحه هم Lazy Loading نذار.
چون همون تصویری که باید سریع نمایش داده بشه، عملاً به مرورگر میگی:
«فعلاً عجله نکن!»
برای تصویر مهم بالای صفحه، معمولاً باید اولویت بارگذاری رو درست مدیریت کنی و برای تصاویر پایین صفحه Lazy Loading داشته باشی.
بهینهسازی تصویر فقط تبدیل JPG به WebP نیست.
گاهی مهمتر از حجم تصویر، اینه که چه زمانی دانلود بشه.
@CodeVerse_dev