بهینه‌سازی تصاویر؛ سریع‌ترین راه سبک‌شدن سایت

در بیشتر سایت‌ها، تصاویر بیش از نیمی از وزن صفحه را می‌سازند. یعنی سریع‌ترین بهبود سرعت، بدون دست‌زدن به کد، روی میز تصاویر شماست: فرمت، ابعاد و رفتار بارگذاری. سه اصلاح ساده، معمولاً نتیجه‌ای دارد که کاربر مستقیماً حس می‌کند.

فرمت: WebP به‌عنوان پیش‌فرض

WebP نسبت به JPG با کیفیت مشابه، حجمی به‌مراتب کمتر دارد و — برخلاف PNG — شفافیت را هم پشتیبانی می‌کند. امروز همه مرورگرهای اصلی آن را می‌فهمند. آیکون‌ها و عناصر گرافیکی ساده بهتر است SVG باشند: در هر اندازه شفاف می‌مانند و حجم‌شان ناچیز است. قاعده: تصویر رستری یعنی WebP؛ آیکون و نمودار یعنی SVG.

ابعاد: هر تصویر برای جای خودش

• برای کارت کوچک، تصویر ۴۰۰۰ پیکسلی نفرستید؛ نسخه با ابعاد محل نمایش آماده کنید.
• برای همه تصاویر، width و height در کد مشخص کنید تا صفحه هنگام بارگذاری نپرد (بهبود CLS).
• فایل‌ها را با نام معنادار ذخیره کنید — نام‌های خوانا در جست‌وجوی تصاویر هم اثر دارند.
• Alt توصیفی واقعی بنویسید؛ Alt جای پرکردن کلمه کلیدی نیست، جای توصیف تصویر برای کاربری است که تصویر را نمی‌بیند.

رفتار بارگذاری: مهم‌ها اول

تصویر اصلی صفحه اول (هیرو) باید سریع‌ترین باشد: بدون Lazy Loading و با اولویت بارگذاری بالا. تصاویر پایین صفحه برعکس: با Lazy Loading دیرتر و فقط وقتی کاربر به‌سمت‌شان اسکرول می‌کند بارگذاری می‌شوند. اشتباه رایج، Lazy کردن تصویر هیروست — دقیقاً برعکسِ بهینه.

بهینه‌سازی تصویر هنر حذف کیفیت نیست؛ هنر رساندن همان کیفیت با کمترین بایت است.

جمع‌بندی

WebP برای همه تصاویر رستری، ابعاد متناسب با محل نمایش، Alt واقعی و بارگذاری هوشمند — این چهار مورد، بخشی از تحویل استاندارد پروژه‌های ماست و در سایت‌های موجود هم معمولاً در یک بازه کوتاه قابل اجراست.