استفاده از تصاویر در وبسایت بخش عمده فایل‌های آپلود شده روی یک سایت رو تشکیل میدن و تاثیر بسیار زیادی روی ایجاد تغییرات ظاهری در سایت دارند. همه ما در سایتامون و در هر نوشته از چند تصویر به خاطر اینکه بتونیم در جستجوی تصاویر گوگل هم بالا بیایم استفاده می‌کنیم. در این بین سعی میشه همیشه از تصاویر با کیفیت و زیبایی استفاده بشه که با خواندن پیام چشمی توسط بازدید کننده در نگاه اول کاری کنید که محتوای سایت شما رو تا انتها دنبال کنند.
اما یک شرط مهمی که برای استفاده از تصاویر در سایت وجود داره متاسفانه نادیده گرفته میشه که اونم چیزی نیست جز بهینه سازی کردن تصاویر سایت از نظر اندازه که در مبحث تست بهینه سازی سایت ازش با نام serve scaled images یاد میبریم. این بهینه سازی از دو جهت مورد بررسی قرار میگیره که بخش اول شامل اندازه تصاویر و بخش دوم شامل حجم تصاویر میشه که در اینجا منظورمون اندازه تصاویر هست.
در این آموزش از رسانه نکست میزبان فا قصد دارم به نحوه رفع خطای serve scaled images در جی تی متریکس بپردازم که در اون به معرفی چندین راهکار مختلف برای اینکه بتونید اندازه تصاویر رو به صورت استاندارد تعیین کنید می‌پردازم. پس اگر شما هم تصاویری که در سایت استفاده می‌کنید در اندازه بزرگ هستند تا انتهای این آموزش با ما همراه باشید تا به موضوع optimize image بپردازیم.
آموزش رفع خطای serve scaled images در GTmetrix
وقتی هنگام تست سرعت سایت با جی تی متریکس به خطای serve scaled images برخورد می‌کنید با تصویری مشابه زیر مواجه خواهید شد. منظور از مشکل serve scaled images اینه که تصاویر در اندازه درست و استانداردی قرار ندارند.
هر تصویری که به صورت بهینه قرار داده نشده باشه، در مقابلش اندازه استانداردی که میتونید استفاده کنید به همراه میزان فشرده شدنش نشون داده شده که اگه بتونید به این عدد نزدیک کنید تاثیر خیلی زیادی روی سرعت لود صفحات سایت شما خواهد داشت. حالا که با این خطا آشنا شدیم بیاین ببینیم علت رخ دادن این خطا چی هست.
وقتی از قالبی استفاده می‌کنید که اندازه استاندارد تصاویر شاخص برای نوشته‌ها روی 350*800 تنظیم شده باید از همین اندازه تو همه نوشته‌ها استفاده کنید تا بر اساس امکانات قالب برای سایر بخش‌ها مثل نوشته‌های مرتبط، نمایش مطالب در سایدبار و… که وجود داره بیاد و از برش تصاویر استفاده بکنه. بنابراین وقتی تصویر رو آپلود می‌کنید وردپرس میاد و از تصویر 350*800 پیکسلی که آپلود می‌کنید در چند اندازه مختلف برش میزنه که هر کدوم برای نمایش نوشته در یک بخش دیگه از سایت هست.
به عنوان نمونه برای سایدبار ممکنه از یک تصویر با اندازه 48*110 استفاده بشه. اگه فرض کنیم که تصویر اولیه و اصلی ما که با اندازه 350*800 لوده حجمی برابر با 600 کیلوبایت رو داشته باشه، در این صورت موقع برش خوردن ممکنه به حجم 60 کیلوبایت برسه که این عدد واقعا خیلی خوب هست.
اما برخی قالب‌ها هستند که چنین قابلیتی رو ندارند و از تصاویر تو اندازه مختلف برش نمی‌زنند. اینجاست که با استفاده از CSS اندازه تصاویر تغییر داده میشه و در قالب گفته میشه که برای نمایش آخرین مطالب در سایدبار اندازه تصویر رو با استفاده از CSS مثلا روی 48*110 نمایش بده.
اتفاق بد درست در اینجا میفته و درست تصویر اصلی با همون حجم 600 کیلوبایت نمایش داده میشه، در این صورت برای لود هر بار این تصویر 600 kb از ترافیک هاست شما مصرف میشه که اگر در روز فرض کنیم برای 1000 بازدیدکننده این تصویر لود بشه، در این صورت برای این تعداد بازدید باید 600 مگابایت پهنای باند رو از دست بدین، در صورتی که اگه تصویر رو برش بدین و حجمش به 60 کیلوبایت برسه شما برای این تعداد بازدید فقط 60 مگابایت پهنای باند رو در هر روز مصرف خواهید کرد.
روش اول: استفاده از برنامه ویرایشگر عکس(توصیه شده)
توی این روش شما باید با قالب خودتون آشنایی داشته باشید و تصاویری که قصد دارید در نوشته‌ها استفاده کنید رو با اندازه استاندارد بسازید. به عنوان نمونه در قالب جنه استانداردی که برای تصاویر شاخص گرفته شده روی 405*780 پیکسل هست که وقتی از این اندازه استفاده کنید، تصاویر که تو اندازه‌های دیگه برش میخورند هم به صورت استاندارد هستند.
پس وقتی دارید تصویر برای نوشته میسازید باید از این اندازه استفاده کنید که دیگه نیاز نباشه قالب بیاد و با استفاده از CSS اندازه تصویر رو کوچیک نشون بده. هر چند این گزینه در وردپرس استفاده نمیشه و خود وردپرس بسته به امکان قالب این برش رو انجام میده، اما اگر تصویر با اندازه خیلی بزرگ هم استفاده کنید، موقع برش خوردن ممکنه اندازه استانداردش رو از دست بده.
روش دوم: استفاده از ابزار آنلاین
یکی از سایت‌های آنلاین که با استفاده ازش میتونید اندازه تصاویر خودتون رو تغییر بدین Imageresize هست که امکان آپلود تصویر از کامپیوتر و آپلود از آدرس رو به شما خواهد داد. کافیه روی دکمه زیر کلیک کنید تا به سایت مورد نظر برید.
بعد از اینکه وارد سایت شدید میتونید تصویر رو آپلود کرده و یا آدرس تصویر رو از سایتی وارد کنید. سپس این تصویر روی سرورهای سایت قرار میگیره و با ابزاری که در اختیارتون قرار میده میتونید اندازه دلخواه برای تصویر رو ایجاد کرده و در نهایت خروجی ازش تهیه کنید. حالا تصویر رو در سایت با اندازه استاندارد که آپلود کنید، ارور serve scaled images هم برطرف میشه.
روش سوم: برش تصاویر توسط سایت ساز
وردپرس به صورت پیش فرض امکان تعیین برش تصاویر رو در سه سطح بزرگ، میانه و بندانگشتی بهتون میده. اما اینکه بتونید بیشتر از این تعداد روی برش تصاویر کاری انجام بدین وجود نداره و باید از افزونه برای این کار استفاده کنید. یکی از افزونه‌های خوب و در عین حال در وردپرس با نام Imsanity در مخزن وردپرس به ثبت رسیده که به شما این امکان رو میده اندازه مختلفی بر اساس تنظیمات قالب خودتون برای تصاویر در نظر بگیرید که وقتی دارید آپلود می‌کنید علاوه بر اندازه‌های خود وردپرس با این اندازه‌ها هم تصاویر برش بخورند.
جمع بندی
امیدوارم که این آموزش هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده از این آموزش تونسته باشید اقدام به رفع و بهبود serve scaled images در جی تی متریکس بکنید. در صورتی که در رابطه با این آموزش و نحوه بهینه سازی برش تصاویر در سایت سوال یا مشکلی داشتید در بخش دیدگاه‌ها اعلام کنید.
