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

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

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

 

علت خطای serve scald image :

 خطای serve scaled images یا سرو تصاویر مرتب شده! منظور ازاین خطا این است که تصاویر دراندازه درست واستانداردی قرارندارند.این خطا به شما اعلام می کند که تعدادی از عکس هایی که در وب سایت به کار بردید در سایز واقعی خود به کار برده نشده اند، یعنی شما از یک تصویر بزرگ در یک قسمت کوچک سایت خود استفاده کرده اید. برای مثال فرض کنید شما میخواهید  تصاویریک گل و یا نوشته های خود را بارگذاری کنید ، درواقع در قالب شما به صورت بهینه اندازه تصاویر باید در سایز 600×400 پیکسل قرار‌ بگیرد اما عکسی که شما برای این منظور استفاده کردید سایزی در اندازه 1400×1000 پیکسل  و حدود 3 مگابایت است ،این تصاویر در سایت شما با استفاده از css  وimg width height  در اندازه 600×400  نمایش داده می شوند و فشرده تر می شوند اما حجم آن تغییری نمی کند و همان 3 مگابایت است، این باعث می شود تا کاربر چند برابر آن چه که درواقع میبیند را لود کند که این موضوع هم در زمان بارگذاری صفحات وب سایت وهم سرعت سایت تاثیرگذار است و حجم و زمان دانلود کاربر را افزایش می دهد و علاوه بر این مصرف پهنای باند وب سایت شما را به شدت بالا می برد زیرا فرض کنید اگر یک عکس 2 مگابایتی در وب سایت باشد و وب سایت شما در روز 1000 بازدید کننده داشته باشد این یعنی 2000 مگابایت از پهنای باند شما مصرف میشود.  

حال چطورخطای serve scaled imagesرا حل کنیم؟

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

ابزارهای ویرایشگر تصاویرمثل : فتوشاپ، snagit editor یا ACDsee که یکی از بهترین روش ها و درواقع روشی که خود ماهم آن را برای رفع خطا serve scaled images پیشنهاد میکنیم استفاده ازفتوشاپ است که با استفاده از آن سایز و حجم عکس را بدون کاهش کیفیت کم کنید، به این ترتیب که عکس مورد نظر را در فتوشاپ باز کرده و بعد از آن بر روی تب File کلیک کنید و گزینه Export را انتخاب کنید، در زیرمنوهای نمایش داده شده گزینه Save for Web را انتخاب کنید، در پنجره باز شده می‌توانید انواع کیفیت و سایز مد نظر برای عکس را وارد یا انتخاب کنید.وخروجی بگیرید یا اگرعکسی را قبلا آپلود کردید دوباره اقدام به جایگزین کردن همان عکس با سایز و حجم جدید کنید.

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

یکی دیگر از روش هایی که می توانید برای رفع این خطا بکار ببرید استفاده از ابزارهای آنلاین تغییر سایز می باشد، مثل سایت هایpicresize.com , imageresize.com و resizeimage.net ابزارهای آنلاین مناسبی برای تغییر سایز و ابعاد فایل‌های تصویری هستند که با انتخاب تصاویر از سیستم خود و یا وارد کردن آدرس مورد نظر ویرایش تصاویر را انجام می دهند.

روش سوم : استفاده از پلاگین و افزونه های وردپرس و جوملا برای رفع خطا 

استفاده از افزونه imsanity و افزونه Regenerate Thumbnails در وردپرس افزونه imsanity:

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

افزونه Regenerate Thumbnails: 

وقتی قالب سایتتان را تغییر می‌دهید عملا باید تصاویر را برای قالب جدید تغییر سایز دهید. اینکار با افزونه regenerate thumbnails قابل انجام است.

استفاده از افزونه imageResizer در جوملا:

برای CMS جوملا هم پلاگین ImageResizer موجود است، توجه داشته باشید قبل از نصب و اعمال تنظیمات این پلاگین‌ها، بک آپ از هاست و دیتابیس خود بگیرید.    

درآخر آپدیت (Feb 6 2018): یکی از مشکلاتی که خیلی از دوستان درباره این خطا دارند این هست که عکس موجود در صفحه محصولات، همان عکسی است که در صفحه اصلی سایت فراخوانی می‌شود با این تفاوت که در صفحه اصلی عکس به کمک CSS تغییر سایز داده شده و کوچیک تر شده است، درواقع عکسی که باید فقط در صفحه محصولات باکیفیت و تقریبا بزرگ باشد ولی در صفحه اصلی هم لود می‌شود که این موضوع جدا از بروز خطای Serve scaled images در gtmeteix باعث بالاتر رفتن حجم صفحه اول سایت و دیر لود شدن آن برای کاربران و ربات های نظیر گوگل بات‌ها می‌گردد.

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