کم‌کردن حجم عکس سایت بدون افت محسوس کیفیت

یک عکس ۲۴۰۰ پیکسلی که در گوشی با عرض ۳۶۰ پیکسل دیده می‌شود، معمولاً دانلود اضافه ایجاد می‌کند. کیفیت خوب به معنی فرستادن بزرگ‌ترین فایل ممکن نیست؛ یعنی جزئیات لازم در همان اندازهٔ نمایش حفظ شود.

اول اندازهٔ نمایش را اندازه بگیرید

عرض واقعی تصویر را در صفحهٔ موبایل و دسکتاپ با ابزار مرورگر ببینید. اگر تصویر در موبایل حدود ۳۶۰ پیکسل CSS عرض دارد، نسخه‌ای نزدیک ۷۲۰ پیکسل برای نمایشگر با تراکم ۲ معمولاً نقطهٔ شروع مناسبی است. این عدد برای همهٔ تصاویر ثابت نیست: برش، زوم، جزئیات و کاربرد تصویر را هم در نظر بگیرید. فایل منبع با کیفیت را نگه دارید و نسخه‌های خروجی را جدا بسازید.

فرمت و فشرده‌سازی را با چشم بررسی کنید

برای عکس و موکاپ معمولاً WebP گزینهٔ خوبی است. چند کیفیت خروجی را در اندازهٔ نهایی کنار هم ببینید و کم‌حجم‌ترین نسخه‌ای را انتخاب کنید که نوشته‌ها، لبهٔ لوگو و سایه‌های مهم در آن خراب نشده‌اند. تصویر دارای متن ریز را بیش از حد فشرده نکنید. برای نشان‌های برداری، اگر امکانش هست SVG از تبدیل اجباری به عکس شفاف‌تر و سبک‌تر می‌ماند.

نسخهٔ مناسب را به مرورگر معرفی کنید

وقتی یک تصویر در موبایل و دسکتاپ عرض متفاوت دارد، srcset و sizes کمک می‌کنند مرورگر فایل متناسب را انتخاب کند. نمونهٔ زیر برای تصویری است که در موبایل تقریباً تمام عرض و در دسکتاپ نیمی از صفحه را می‌گیرد:

<img src="cover-720.webp"
     srcset="cover-360.webp 360w, cover-720.webp 720w, cover-1200.webp 1200w"
     sizes="(min-width: 900px) 50vw, 94vw"
     width="1200" height="800" alt="نمای نزدیک از بسته‌بندی محصول">

width و height نسبت تصویر را پیش از دانلود مشخص می‌کنند و جابه‌جایی محتوا را کم می‌کنند. متن جایگزین هم باید اطلاعات مهم تصویر را بیان کند؛ برای تصویر صرفاً تزئینی می‌تواند خالی باشد.

تصویر اصلی صفحه را در اولویت بگذارید

اگر تصویر بزرگ بالای صفحه مهم‌ترین محتوای دیداری است، آن را در HTML قابل کشف نگه دارید و در رقابت دانلود با فایل‌های غیرضروری قرار ندهید. بعد از تغییر، در ابزار Network بررسی کنید مرورگر واقعاً کدام اندازه را گرفته و در گزارش عملکرد ببینید آیا تصویر بزرگ‌ترین محتوای صفحه بوده است یا نه. کیفیت را با دستگاه و شبکهٔ واقعی نیز بسنجید.

چک‌لیست کوتاه: اندازهٔ نمایش را اندازه بگیرید؛ خروجی مناسب بسازید؛ برش را در موبایل ببینید؛ srcset و sizes را بررسی کنید؛ ابعاد و متن جایگزین را ثبت کنید. راهنمای تصاویر واکنش‌گرا در web.dev جزئیات فنی بیشتری دارد. برای تصمیم‌های وسیع‌تر دربارهٔ سرعت و ساختار، راهنمای بازطراحی سایت را بخوانید.