استفاده از تصاویر در وبسایت بخش عمده فایل‌های آپلود شده روی یک سایت رو تشکیل میدن و تاثیر بسیار زیادی روی ایجاد تغییرات ظاهری در سایت دارند. همه ما در سایتامون و در هر نوشته از چند تصویر به خاطر اینکه بتونیم در جستجوی تصاویر گوگل هم بالا بیایم استفاده می‌کنیم. در این بین سعی میشه همیشه از تصاویر با کیفیت و زیبایی استفاده بشه که با خواندن پیام چشمی توسط بازدیدکننده در نگاه اول کاری کنید که محتوای سایت شما رو تا انتها دنبال کنند.
اما یک شرط مهمی که برای استفاده از تصاویر در سایت وجود داره متاسفانه نادیده گرفته میشه که اونم چیزی نیست جز بهینه سازی کردن تصاویر سایت از نظر اندازه که در مبحث تست بهینه سازی سایت ازش با نام serve scaled images یاد میبریم. این بهینه سازی از دو جهت مورد بررسی قرار میگیره که بخش اول شامل اندازه تصاویر و بخش دوم شامل حجم تصاویر میشه که در اینجا منظورمون اندازه تصاویر هست.
در این آموزش قصد دارم به نحوه رفع خطای serve scaled images در جی تی متریکس بپردازم که در اون به معرفی چندین راهکار مختلف برای اینکه بتونید اندازه تصاویر رو به صورت استاندارد تعیین کنید می‌پردازم. پس اگر شما هم تصاویری که در سایت استفاده می‌کنید در اندازه بزرگ هستند تا انتهای این آموزش با ما همراه باشید تا به موضوع optimize image بپردازیم.
آموزش رفع خطای serve scaled images در GTmetrix
وقتی هنگام تست سرعت سایت با جی تی متریکس به خطای serve scaled images برخورد می‌کنید. منظور از مشکل serve scaled images اینه که تصاویر در اندازه درست و استانداردی قرار ندارند.
هر تصویری که به صورت بهینه قرار داده نشده باشه، در مقابلش اندازه استانداردی که میتونید استفاده کنید به همراه میزان فشرده شدنش نشون داده شده که اگه بتونید به این عدد نزدیک کنید تاثیر خیلی زیادی روی سرعت لود صفحات سایت شما خواهد داشت. حالا که با این خطا آشنا شدیم بیاین ببینیم علت رخ دادن این خطا چی هست.
وقتی از قالبی استفاده می‌کنید که اندازه استاندارد تصاویر شاخص برای نوشته‌ها روی ۳۵۰*۸۰۰ تنظیم شده باید از همین اندازه تو همه نوشته‌ها استفاده کنید تا بر اساس امکانات قالب برای سایر بخش‌ها مثل نوشته‌های مرتبط، نمایش مطالب در سایدبار و… که وجود داره بیاد و از برش تصاویر استفاده بکنه. بنابراین وقتی تصویر رو آپلود می‌کنید وردپرس میاد و از تصویر ۳۵۰*۸۰۰ پیکسلی که آپلود می‌کنید در چند اندازه مختلف برش میزنه که هر کدوم برای نمایش نوشته در یک بخش دیگه از سایت هست. به عنوان نمونه برای سایدبار ممکنه از یک تصویر با اندازه ۴۸*۱۱۰ استفاده بشه. اگه فرض کنیم که تصویر اولیه و اصلی ما که با اندازه ۳۵۰*۸۰۰ لوده حجمی برابر با ۶۰۰ کیلوبایت رو داشته باشه، در این صورت موقع برش خوردن ممکنه به حجم ۶۰ کیلوبایت برسه که این عدد واقعا خیلی خوب هست.
اما برخی قالب‌ها هستند که چنین قابلیتی رو ندارند و از تصاویر تو اندازه مختلف برش نمی‌زنند. اینجاست که با استفاده از CSS اندازه تصاویر تغییر داده میشه و در قالب گفته میشه که برای نمایش آخرین مطالب در سایدبار اندازه تصویر رو با استفاده از CSS مثلا روی ۴۸*۱۱۰ نمایش بده. اتفاق بد درست در اینجا میفته و درست تصویر اصلی با همون حجم ۶۰۰ کیلوبایت نمایش داده میشه، در این صورت برای لود هر بار این تصویر ۶۰۰ kb از ترافیک هاست شما مصرف میشه که اگر در روز فرض کنیم برای ۱۰۰۰ بازدیدکننده این تصویر لود بشه، در این صورت برای این تعداد بازدید باید ۶۰۰ مگابایت پهنای باند رو از دست بدین، در صورتی که اگه تصویر رو برش بدین و حجمش به ۶۰ کیلوبایت برسه شما برای این تعداد بازدید فقط ۶۰ مگابایت پهنای باند رو در هر روز مصرف خواهید کرد.
روش اول: استفاده از برنامه ویرایشگر عکس(توصیه شده)
توی این روش شما باید با قالب خودتون آشنایی داشته باشید و تصاویری که قصد دارید در نوشته‌ها استفاده کنید رو با اندازه استاندارد بسازید. به عنوان نمونه در قالب جنه استانداردی که برای تصاویر شاخص گرفته شده روی ۴۰۵*۷۸۰ پیکسل هست که وقتی از این اندازه استفاده کنید، تصاویر که تو اندازه‌های دیگه برش میخورند هم به صورت استاندارد هستند.
