تصاویر معمولاً سنگینترین چیز روی یک صفحهاند، که آنها را به بزرگترین اهرم سرعتی که در اختیار دارید تبدیل میکند. ابعاد و حجم فایل آنها را درست کنید و صفحهها آنی حس میشوند. اشتباهشان کنید و هرقدر هم کدتان تمیز باشد در Core Web Vitals رد میشوید. این هدفها و روال رسیدن به آنهاست.
هدفهای ابعاد
اندازه پیکسلی تصویر را با جایی که واقعاً ظاهر میشود هماهنگ کنید. راهنمای تقریبی:
- تصویر شاخص تمامعرض: ۱۶۰۰ تا ۲۰۰۰ پیکسل عرض بیشتر چیدمانهای دسکتاپ را پوشش میدهد. عریضتر رفتن بهندرت کمک میکند و بایتهای زیادی خرج میکند.
- عکس درونمحتوا: عرض ستون محتوایتان، معمولاً ۸۰۰ تا ۱۲۰۰ پیکسل.
- تصویر بندانگشتی / کارت: ۳۰۰ تا ۵۰۰ پیکسل.
- آواتار / آیکون: ۴۸ تا ۲۰۰ پیکسل در اندازهای که نمایش داده میشود.
سرو کردن یک تصویر ۴۰۰۰ پیکسلی در یک جایگاه ۸۰۰ پیکسلی یعنی مرورگر ۲۵ برابر پیکسلی که هرگز نشان خواهد داد را دانلود و رمزگشایی میکند. این هدررفت خالص است — و رمزگشایی تصاویر بزرگ ریسمان اصلی را هم دچار لکنت میکند.
هدفهای حجم
ابعاد سقف را تعیین میکنند؛ فشردهسازی حجم واقعی را. هدف بگیرید:
- تصویر شاخص: زیر ۲۰۰ کیلوبایت (بهطور ایدهآل ۱۰۰ تا ۱۵۰ کیلوبایت).
- عکس درونمحتوا: ۸۰ تا ۱۵۰ کیلوبایت.
- بندانگشتی: ۱۰ تا ۳۰ کیلوبایت.
- کل تصاویر هر صفحه: سعی کنید برای کل صفحه زیر حدود ۱ مگابایت بمانید.
اگر یک تصویر واحد از حدود ۳۰۰ کیلوبایت بگذرد، آن را مثل یک باگ برای بررسی در نظر بگیرید.
چرا این Core Web Vitals را هدایت میکند
Largest Contentful Paint (LCP) گوگل اندازه میگیرد چقدر طول میکشد تا بزرگترین عنصر روی صفحه رندر شود — و در بیشتر صفحهها، آن بزرگترین عنصر یک تصویر است (معمولاً همان تصویر شاخص). یک تصویر شاخص سنگین و بیشازحدبزرگ مستقیماً LCP را باد میکند. یک LCP خوب زیر ۲.۵ ثانیه است؛ یک تصویر شاخص متورم میتواند روی اتصالهای موبایل بهتنهایی از آن بگذرد.
دو برد دیگر مرتبط با تصویر:
- صفتهای عرض و ارتفاع را تنظیم کنید تا مرورگر فضا رزرو کند — این از امتیاز Cumulative Layout Shift (CLS) شما محافظت میکند.
- تصویر شاخص را اولویت بدهید (تصویر LCP را با تأخیر بارگذاری نکنید) و هر چیزی زیر خط دید را با تأخیر بارگذاری کنید.
روال دوگامی
گام ۱ — تغییر اندازه به عرض نمایش واقعی. از تغییر اندازه تصویر استفاده کنید تا هر تصویر را به اندازهای که در آن ظاهر میشود پایین بیاورید. قفل نسبت روشن، کوچکسازی باکیفیت. همین یکی اغلب حجم را ۸۰ تا ۹۰٪ کم میکند.
گام ۲ — فشردهسازی. فایلهای تغییراندازهدادهشده را به فشردهساز تصویر بدهید: کیفیت ۷۵ تا ۸۵ برای عکسها (از نظر بصری بدوناتلاف)، کوانتش ۲۵۶ رنگ برای PNGها. هرگز فایلی بزرگتر از نسخه اصلی خروجی نمیدهد، دستهها را از پس برمیآید و یک سقف عرض اختیاری دارد تا بتوانید عملاً هر دو گام را یکجا انجام بدهید. برای مرورگرهای امروزی، تبدیل عکسها به WebP ۲۵ تا ۳۵٪ دیگر بیرون میکشد.
اندازهاش بگیرید، حدس نزنید
وقتی تصاویرتان بهینه شدند، تأیید کنید که صفحه واقعاً سریعتر شده. Page QA از IMG.DIY یک URL زنده را از میان Google PageSpeed Insights ممیزی میکند و حجم تصویر صفحه را گزارش میدهد تا بتوانید هر فایلی را که هنوز خیلی سنگین است تشخیص بدهید. یک هشدار: Page QA به یک اتصال اینترنت نیاز دارد — برخلاف ابزارهای تصویر، رابط PageSpeed گوگل را فرا میخواند، پس نمیتواند آفلاین اجرا شود. بعد از استقرار از آن استفاده کنید تا LCP واقعی و بودجه تصویرتان را بررسی کنید.
خصوصی بهصورت پیشفرض
ابزارهای تغییر اندازه، فشردهسازی و تبدیل کاملاً در مرورگر شما با Canvas و WebAssembly اجرا میشوند — چیزی آپلود نمیشود و بعد از اولین بازدید کش میشوند و آفلاین کار میکنند. میتوانید تصاویر یک سایت کامل را بدون اتصال آماده کنید، بعد وقتی صفحه زنده شد Page QA را آنلاین اجرا کنید.
جمعبندی سریع: ابعاد را درستاندازه کنید، تا هدفهای حجم فشرده کنید، تصویر شاخص را برای LCP اولویت بدهید و با Page QA تأیید کنید.