بهینه‌سازی فرمت و بارگذاری تصاویر: از WebP تا استراتژی تصاویر واکنش‌گرا
سنگین‌ترین محموله در لود وب‌سایت: چطور بایت‌های تصاویر را مدیریت کنیم؟
اگر کدهای HTML و استایل‌های یک صفحه تمیز و استاندارد را بررسی کنید، معمولاً حجمی زیر ۱۰۰ کیلوبایت دارند. اما وقتی به حجم کل صفحه نگاه می‌کنید، ناگهان با ارقامی مثل ۳ یا ۵ مگابایت مواجه می‌شوید! مجرم اصلی در ۹۹ درصد مواقع، تصاویر خام و بهینه‌نشده‌ای هستند که بدون فرآوری در هاست آپلود شده‌اند.
در فضای اینترنت موبایل و پهنای باند متغیر کاربران در ایران، تحویل تصویر سنگین یعنی فرار قطعی مخاطب قبل از باز شدن لندینگ‌پیج شما.
بهینه‌سازی تصاویر یعنی رساندن بایت‌های تصویر به حداقل ممکن، در حالی که چشم انسان کوچک‌ترین افت کیفیتی را در نمایشگر احساس نکند.
نبرد فرمت‌ها: خداحافظی با PNG و JPG سنگین
سال‌ها فرمت‌های JPG برای عکس‌های واقعی و PNG برای تصاویر دارای شفافیت استفاده می‌شدند؛ اما این فرمت‌ها برای وب مدرن متورم هستند. امروزه استاندارد طلایی وب، استفاده از فرمت‌های فشرده نسل جدید است.
فرمت WebP با الگوریتم‌های پیشرفته فشرده‌سازی، حجم تصاویر را بین ۳۰ تا ۷۰ درصد نسبت به JPG کاهش می‌دهد بدون آنکه شفافیت یا رنگ‌ها آسیب ببینند.
- فرمت WebP: استاندارد پیش‌فرض برای تمام تصاویر مقالات، محصولات و بنرها با فشرده‌سازی عالی.
- فرمت SVG: بهترین انتخاب برای آیکون‌ها، لوگوها و کادرهای هندسی با حجم بسیار ناچیز و وضوح بی‌نهایت.
- فرمت AVIF: نسل آینده با فشرده‌سازی فراتر از وب‌پی برای پروژه‌های با ترافیک میلیونی.
ابعاد ریسپانسیو و اتریبیوت srcset؛ جلوگیری از اتلاف دیتای موبایل
یک اشتباه کلاسیک این است که تصویری با عرض ۲۵۰۰ پیکسل برای اسلایدر دسکتاپ طراحی می‌شود و همان فایل غول‌پیکر مستقیماً به صفحه گوشی با عرض ۳۹۰ پیکسل تحویل داده می‌شود! پردازنده گوشی باید کلی انرژی صرف کند تا آن عکس عظیم را کوچک کند.
با استفاده از ویژگی srcset در تگ تصویر، به مرورگر چند اندازه مختلف پیشنهاد دهید تا متناسب با رزولوشن صفحه کاربر، نسخه سبک‌تر را دانلود کند.
تصویری که در کادر ۴۰۰ پیکسلی موبایل نمایش داده می‌شود، نباید با عرض ۲۰۰۰ پیکسل از سرور دانلود شود.
قوانین بارگذاری تنبل (Lazy Loading) بدون آسیب به سئو
خاصیت loading=lazy یک موهبت بزرگ برای وب است که به مرورگر می‌گوید تا زمانی که کاربر به سمت تصویر اسکرول نکرده، بایت‌های آن را دانلود نکند. این کار زمان لود اولیه را به شدت کاهش می‌دهد.
اما یک خطای مهلک وجود دارد: هرگز نباید لوگوی هدر یا اولین تصویر شاخص بالای مقاله را لیزی‌لود کنید! تصویر شاخص بالای صفحه المان LCP شماست و باید در ثانیه اول با اولویت بالا لود شود.
دستور اقدام عملی
وارد کتابخانه رسانه وردپرس شوید و ۵ تصویر آخر آپلودشده را بررسی کنید. آیا حجم آن‌ها زیر ۱۰۰ کیلوبایت است؟ آیا ابعاد عرض آن از ۱۲۰۰ پیکسل فراتر نرفته است؟ یک تصویر سنگین بالای ۳۰۰ کیلوبایت پیدا کنید، آن را با فرمت WebP فشرده کرده و تفاوت سرعت صفحه را بسنجید.