آموزش طراحی سایت: تصاویر واکنش‌گرا برای صفحه‌ای سبک‌تر

فشرده‌سازی تصویر مهم است؛ انتخاب اندازهٔ مناسب برای نمایشگر نیز دانلود اضافی را کاهش می‌دهد.

از یک تصویر، چند فایل با عرض متفاوت بساز؛ بزرگ‌کردن فایل کوچک جزئیات تازه تولید نمی‌کند.

در srcset، آدرس فایل‌ها و عرض واقعی هرکدام را با توصیفگر w معرفی کن.

در sizes، عرض تقریبی محل نمایش تصویر را برای اندازه‌های مختلف صفحه مشخص کن.

مرورگر با توجه به این اطلاعات و شرایط نمایشگر، گزینهٔ مناسب را انتخاب می‌کند.

اگر قاب یا برش تصویر در موبایل باید متفاوت باشد، از picture و source استفاده کن.

برای img، مقدار width و height متناسب تعیین کن تا فضا پیش از بارگیری رزرو شود.

برای تصاویر پایین صفحه می‌توان loading="lazy" گذاشت؛ تصویر اصلی ابتدای صفحه را بی‌دلیل عقب نینداز.

با ابزار Network مرورگر و کش غیرفعال بررسی کن کدام فایل واقعاً دانلود می‌شود.

تمرین پیشنهادی: همان صفحه را در موبایل و دسکتاپ مقایسه کن و حجم تصاویر دانلودشده را بسنج.

منابع رسمی

اگر تجربه یا پرسشی دارید، همین‌جا برای ما بنویسید.

آموزش‌های مرتبط