راهنمای رفع خطای serve scaled images در GTmetrix

استفاده از تصاویر در وبسایت بخش عمده فایل‌های آپلود شده روی یک سایت رو تشکیل میدن و تاثیر بسیار زیادی روی ایجاد تغییرات ظاهری در سایت دارند. همه ما در سایتامون و در هر نوشته از چند تصویر به خاطر اینکه بتونیم در جستجوی تصاویر گوگل هم بالا بیایم استفاده می‌کنیم. در این بین سعی میشه همیشه از تصاویر با کیفیت و زیبایی استفاده بشه که با خواندن پیام چشمی توسط بازدیدکننده در نگاه اول کاری کنید که محتوای سایت شما رو تا انتها دنبال کنند. اما یک شرط مهمی که برای استفاده از تصاویر در سایت وجود داره متاسفانه نادیده گرفته میشه که اونم چیزی نیست جز بهینه سازی کردن تصاویر سایت از نظر اندازه که در مبحث تست بهینه سازی سایت ازش با نام serve scaled images یاد میبریم. این بهینه سازی از دو جهت مورد بررسی قرار میگیره که بخش اول شامل اندازه تصاویر و بخش دوم شامل حجم تصاویر میشه که در اینجا منظورمون اندازه تصاویر هست.

در این آموزش از پایگاه دانش میزبان‌فا قصد دارم به نحوه رفع خطای serve scaled images در جی تی متریکس بپردازم که در اون به معرفی چندین راهکار مختلف برای اینکه بتونید اندازه تصاویر رو به صورت استاندارد تعیین کنید می‌پردازم. پس اگر شما هم تصاویری که در سایت استفاده می‌کنید در اندازه بزرگ هستند تا انتهای این آموزش با ما همراه باشید تا به موضوع optimize image بپردازیم.

آموزش رفع خطای serve scaled images در GTmetrix

وقتی هنگام تست سرعت سایت با جی تی متریکس به خطای serve scaled images برخورد می‌کنید با تصویری مشابه زیر مواجه خواهید شد. منظور از مشکل serve scaled images اینه که تصاویر در اندازه درست و استانداردی قرار ندارند.

هر تصویری که به صورت بهینه قرار داده نشده باشه، در مقابلش اندازه استانداردی که میتونید استفاده کنید به همراه میزان فشرده شدنش نشون داده شده که اگه بتونید به این عدد نزدیک کنید تاثیر خیلی زیادی روی سرعت لود صفحات سایت شما خواهد داشت. حالا که با این خطا آشنا شدیم بیاین ببینیم علت رخ دادن این خطا چی هست.

وقتی از قالبی استفاده می‌کنید که اندازه استاندارد تصاویر شاخص برای نوشته‌ها روی ۳۵۰*۸۰۰ تنظیم شده باید از همین اندازه تو همه نوشته‌ها استفاده کنید تا بر اساس امکانات قالب برای سایر بخش‌ها مثل نوشته‌های مرتبط، نمایش مطالب در سایدبار و… که وجود داره بیاد و از برش تصاویر استفاده بکنه. بنابراین وقتی تصویر رو آپلود می‌کنید وردپرس میاد و از تصویر ۳۵۰*۸۰۰ پیکسلی که آپلود می‌کنید در چند اندازه مختلف برش میزنه که هر کدوم برای نمایش نوشته در یک بخش دیگه از سایت هست. به عنوان نمونه برای سایدبار ممکنه از یک تصویر با اندازه ۴۸*۱۱۰ استفاده بشه. اگه فرض کنیم که تصویر اولیه و اصلی ما که با اندازه ۳۵۰*۸۰۰ لوده حجمی برابر با ۶۰۰ کیلوبایت رو داشته باشه، در این صورت موقع برش خوردن ممکنه به حجم ۶۰ کیلوبایت برسه که این عدد واقعا خیلی خوب هست.

اما برخی قالب‌ها هستند که چنین قابلیتی رو ندارند و از تصاویر تو اندازه مختلف برش نمی‌زنند. اینجاست که با استفاده از CSS اندازه تصاویر تغییر داده میشه و در قالب گفته میشه که برای نمایش آخرین مطالب در سایدبار اندازه تصویر رو با استفاده از CSS مثلا روی ۴۸*۱۱۰ نمایش بده. اتفاق بد درست در اینجا میفته و درست تصویر اصلی با همون حجم ۶۰۰ کیلوبایت نمایش داده میشه، در این صورت برای لود هر بار این تصویر ۶۰۰ kb از ترافیک هاست شما مصرف میشه که اگر در روز فرض کنیم برای ۱۰۰۰ بازدیدکننده این تصویر لود بشه، در این صورت برای این تعداد بازدید باید ۶۰۰ مگابایت پهنای باند رو از دست بدین، در صورتی که اگه تصویر رو برش بدین و حجمش به ۶۰ کیلوبایت برسه شما برای این تعداد بازدید فقط ۶۰ مگابایت پهنای باند رو در هر روز مصرف خواهید کرد.

روش اول: استفاده از برنامه ویرایشگر عکس(توصیه شده)

توی این روش شما باید با قالب خودتون آشنایی داشته باشید و تصاویری که قصد دارید در نوشته‌ها استفاده کنید رو با اندازه استاندارد بسازید. به عنوان نمونه در قالب جنه استانداردی که برای تصاویر شاخص گرفته شده روی ۴۰۵*۷۸۰ پیکسل هست که وقتی از این اندازه استفاده کنید، تصاویر که تو اندازه‌های دیگه برش میخورند هم به صورت استاندارد هستند. پس وقتی دارید تصویر برای نوشته میسازید باید از این اندازه استفاده کنید که دیگه نیاز نباشه قالب بیاد و با استفاده از CSS اندازه تصویر رو کوچیک نشون بده. هر چند این گزینه در وردپرس استفاده نمیشه و خود وردپرس بسته به امکان قالب این برش رو انجام میده، اما اگر تصویر با اندازه خیلی بزرگ هم استفاده کنید، موقع برش خوردن ممکنه اندازه استانداردش رو از دست بده.

روش دوم: استفاده از ابزار آنلاین

یکی از سایت‌های آنلاین که با استفاده ازش میتونید اندازه تصاویر خودتون رو تغییر بدین Imageresize هست که امکان آپلود تصویر از کامپیوتر و آپلود از آدرس رو به شما خواهد داد. کافیه روی دکمه زیر کلیک کنید تا به سایت مورد نظر برید.

imageresize

بعد از اینکه وارد سایت شدید میتونید تصویر رو آپلود کرده و یا آدرس تصویر رو از سایتی وارد کنید. سپس این تصویر روی سرورهای سایت قرار میگیره و با ابزاری که در اختیارتون قرار میده میتونید اندازه دلخواه برای تصویر رو ایجاد کرده و در نهایت خروجی ازش تهیه کنید. حالا تصویر رو در سایت با اندازه استاندارد که آپلود کنید، ارور serve scaled images هم برطرف میشه.

روش سوم: برش تصاویر توسط سایت ساز

وردپرس به صورت پیش فرض امکان تعیین برش تصاویر رو در سه سطح بزرگ، میانه و بندانگشتی بهتون میده. اما اینکه بتونید بیشتر از این تعداد روی برش تصاویر کاری انجام بدین وجود نداره و باید از افزونه برای این کار استفاده کنید. یکی از افزونه‌های خوب و در عین حال در وردپرس با نام Imsanity در مخزن وردپرس به ثبت رسیده که به شما این امکان رو میده اندازه مختلفی بر اساس تنظیمات قالب خودتون برای تصاویر در نظر بگیرید که وقتی دارید آپلود می‌کنید علاوه بر اندازه‌های خود وردپرس با این اندازه‌ها هم تصاویر برش بخورند.