بهینه سازی تصاویر در GTmetrix از شناسایی فایل‌های پرهزینه در صفحه شروع می‌شود، نه نصب هم‌زمان چند افزونه. عبارت Optimize images متعلق به گزارش‌های قدیمی است. در گزارش‌های جدید ممکن است توصیه‌های مرتبط با فشرده‌سازی، اندازهٔ مناسب یا تحویل تصویر را ببینید. هدف، کاهش حجم انتقال و زمان نمایش با حفظ کیفیت لازم است.
معنای خطای قدیمی و گزارش فعلی
طبق راهنمای انتقال گزارش‌های GTmetrix، Optimize images قدیمی به Efficiently encode images و Serve scaled images به Properly size images نگاشت شده است. نام دقیق ممیزی می‌تواند با نسخهٔ گزارش تغییر کند. به فهرست URL فایل‌ها و صرفه‌جویی برآوردشده توجه کنید؛ نبود دکمهٔ optimized version در گزارش فعلی به معنی خطای حساب نیست.
اندازهٔ مناسب برای بهینه سازی تصاویر در GTmetrix
ابتدا عرض نمایش تصویر در موبایل و دسکتاپ را اندازه بگیرید. کوچک‌شدن تصویر با CSS الزاماً فایل دریافتی را کوچک نمی‌کند. برای نمایش در چگالی‌های متفاوت نیز تنها یک عرض ثابت کافی نیست؛ نسخه‌های مناسب و srcset و sizes به مرورگر کمک می‌کنند منبع سازگار با شرایط نمایش را انتخاب کند.
در وردپرس، خروجی واقعی قالب را بررسی کنید: ممکن است نسخه‌های کوچک تولید شده باشند اما قالب همچنان فایل اصلی بزرگ را درخواست کند. ساخت نسخهٔ کوچک بدون استفادهٔ واقعی از آن، حجم انتقال صفحه را کاهش نمی‌دهد. بریدن تصویر نیز نباید نوشته، نمودار یا بخش مهم آموزش را حذف کند.
فرمت و میزان فشرده‌سازی
برای عکس، نمودار و لوگو یک قاعدهٔ ثابت وجود ندارد. فرمت‌هایی مانند JPEG، PNG، WebP یا AVIF را با نوع تصویر، شفافیت، کیفیت و سازگاری خروجی مقایسه کنید. PNG همیشه «بهتر» و JPEG همیشه «بی‌کیفیت‌تر» نیست. حجم فایل، تعداد پیکسل و تنظیم فشرده‌سازی مهم‌تر از عدد DPI برای نمایش معمول وب‌اند.
یک نمونه را با چند تنظیم خروجی بگیرید و نوشته‌های ریز، لبه‌ها و رنگ‌ها را در اندازهٔ مصرف واقعی بررسی کنید. کاهش چند کیلوبایت نباید تصویر آموزش را ناخوانا کند. نسخهٔ اصلی باکیفیت را برای ویرایش‌های آینده نگه دارید و فایل عمومی را متناسب با مصرف سایت تهیه کنید.
تصویر اصلی صفحه را دیر بارگذاری نکنید
تصویر بزرگ ابتدای صفحه ممکن است عنصر LCP باشد. طبق راهنمای بهینه‌سازی LCP، lazy loading برای تصویر LCP تأخیر غیرضروری ایجاد می‌کند. بارگذاری تنبل را برای تصاویر پایین صفحه و خارج از دید اولیه ارزیابی کنید، نه همهٔ تصاویر بدون استثنا.
برای تصاویر ابعاد یا نسبت مناسب رزرو کنید تا هنگام دریافت فایل، متن اطراف جابه‌جا نشود. اگر تصویر در پس‌زمینهٔ CSS است، زمان کشف آن را نیز بررسی کنید. صرف کاهش حجم، تأخیر ناشی از درخواست دیرهنگام را همیشه حل نمی‌کند.
افزونه یا ابزار آنلاین را چگونه به‌کار ببریم؟
یک مسیر مشخص برای تولید و ارائهٔ خروجی انتخاب کنید. چند افزونهٔ هم‌پوشان می‌توانند نسخه‌های تکراری یا قواعد ناسازگار بسازند. پیش از پردازش دسته‌جمعی، یک تصویر شفاف، یک عکس و یک تصویر متنی را آزمایش کنید. تصاویر خصوصی یا دارای اطلاعات شخصی را بدون بررسی مقصد در ابزار آنلاین بارگذاری نکنید.
بررسی نتیجهٔ واقعی
کش مرتبط را به‌روز و درخواست واقعی فایل را در Network بررسی کنید: URL، فرمت، اندازهٔ انتقال و تصویر نمایش‌داده‌شده باید با انتظار هماهنگ باشد. سپس همان صفحه را با تنظیمات مشابه دوباره اندازه بگیرید. کوچک‌شدن فایل باید همراه با سالم‌بودن نمایش موبایل و خوانایی محتوا باشد؛ تعداد زیاد تصویر یا امتیاز سبز به‌تنهایی موفقیت محتوایی را ثابت نمی‌کند.
مطالعهٔ مرتبط
بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.
