در این مقاله آموزشی با خطای Serve scaled images که در سایت GTmetrix نشان داده می‌شود آشنا خواهیم شد.

به علت ایجاد و روش رفع این خطا به طور کامل در این مقاله دوبست می‌پردازیم.

این اررور مهم به ما می‌گوید: هرچند شما عکس با اندازه بزرگ برای کاربر بارگذاری کرده‌اید ولی با ابعاد کوچک به نمایش درمی‌آید.

این خطا از سری خطاهای PageSpeed طبقه بندی می‌شود.

این آموزش به بهینه سازی لود عکس و در نهایت سرعت بیشتر سایت و بهبود سئو و رتبه سئو کمک شایانی خواهد کرد.

اما به این نکته توجه کنید که برای بهیته سازی عکس و رفع این خطا کد خاصی وجود ندارد و نیاز به یکسری بهینه سازی است.

خلاصه‌ای از خطای Serve scaled images

چگونه باید عکس های سایت را بهینه سازی کنیم؟!

برای انجام بهینه سازی عکس ما از دو روش کلی می‌توانیم بهره بگیریم:

1. بهینه سازی و کاهش حجم عکس Optimize images
   بهینه سازی عکس با کمک اتریبیوت‌های title و alt که مستقیم روی بهبود سئو سایت تاثیر می‌گذارند.
2. بهینه سازی سایز عکس Serve scaled images
   در این روش بهبود سئو به روش غیرمستقیم صورت می‌گیرد.

البته رفع خطای Serve scaled image به صورت مستقیم بر خطای Optimize images تاثیر گذار است.

چرا خطای بهینه سازی عکس در بخش PageSpeed نمایان می‌شود؟

برای درک بهتر چرایی ایجاد این خطا به مثال زیر توجه کنید:

مرورگر کاربر ابتدا درخواستی سمت سرور برای دریافت عکسی با رزولوشن 2400×1350 و حجم 2.5 مگابایت می‌فرستد.

این درحالی است که عکس ما توسط CSS تغییر سایز یا Scale شده و در سایت به اندازه تصویری بندانگشتی thumbnail قرار گرفته است.

در این قسمت ما به سئو سایت توجه نکرده ایم و حجم عکس را بیشتر از میزان مورد نیاز کاربر قرار داده ایم.

در تصویر چپ اندازه بارگذاری عکس مثلاً 300×200 مورد نیاز است پس رزولوشن 2400×1350 کاملاً بیهوده است.

فکر کنید در روز 500 بازدید کننده دارید که 500 بار عکس 2400×1350 با حجم 2.5 مگابایت را بارگذاری می‌کنند.

یعنی روزی 1250 مگابایت تنها صرف بارگذاری این یک عکس غیر بهینه می‌شود که در ماه حدود 40 گیگ خواهد شد.

حال فکر کنیم این عکس را بهینه کردید و 150 کیلوبایت رساندید.

با 500 بازدید، روزانه 50 مگ ترافیک برای این عکس صرف شده که در ماه می‌شود حدود 1.5 گیگ.

ببینید با بهینه سازی عکس تنها در یک عکس ساده نه تنها سرعت بارگذاری سایت بالا رفت بلکه فشار روی سرور یا هاست شما نیر بهینه شد.

حال فکر کنید با بهینه سازی 500 یا 1000 عکس چه تفاوت چشمگیری را شاهد خواهید بود.

Serve scaled images را چگونه رفع کنیم؟

در اینجا سه روش به شما معرفی خواهد شد.

روش 1 و 2 برای CMS های مختلف (وردپرسی، جوملا و …) و یا کدنویسی اختصاصی قابل انجام است.

در روش 3 تعدادی پلاگین کاربردی برای وردپرس و جوملا برای بهینه سازی عکس سایت معرفی شده است.

روش اول: بهینه سازی عکس به کمک فتوشاپ Photoshop

می‌توان گفت بهترین روش و کار همین است و شما بایستی قبل از آپلود عکس در سایت سایز آن را به کمک فتوشاپ بهینه کنید.

ابزار فتوشاپ به ما این امکان را می‌دهد اندازه و حجم عکس را بدون کاهش کیفیت، کم کنیم.

در فتوشاپ از قسمت File و بعد Export و سپس Save For Web می‌توانید سایز و کیفیتی که در خروجی می‌خواهید را تایین کنید.

روش دوم: بهینه سازی عکس به صورت آنلاین photo resizer online

در این روش خیلی ساده از ابزار های آنلاین که بسیاری از آن‌ها رایگان هستند، می‌توانید بهره بگیرید.

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

• picresize.com
• resizeimage.net
• simpleimageresizer.com
• img2go.com

روش سوم: بهینه سازی عکس با پلاگین wordpress and joomla

در هر دو روش اول ما قبل از آپلود عکس عمل بهینه سازی عکس را انجام می‌دادیم.

اما در این روش ما بعد از آپلود عکس و به کمک پلاگین وردپرس و جوملا این کار را انجام خواهیم داد.

البته بهتر است از ابتدا قبل از آپلود عکس آن‌ها را بهینه کنید اما فکر کنید تا حال این کار را انجام نداده‌اید.

حال فکر کنیم به دلیل تعداد بالای عکس و کمبود وقت یا … امکان انجام این کار را ندارید.

توجه: قبل از انجام هر تغییر اساسی، حتماً از اطلاعات سایت خود بکاپ کلی تهیه کنید.

در CMS وردپرس پلاگین  Imsanity و در CMS جوملا پلاگین EIR کار شما را به خوبی راه خواهد انداخت.

مشکلاتی که احتمال دارد در نمایش تصویر محصولات ایجاد شود:

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

درحالی که ما به کمک CSS اندازه عکس را در صفحه اصلی کوچکتر قرار داده بودیم.

ما تنها در صفحه محصول نیاز به لود باکیفیت عکس داشته ایم و این باعث شده سرعت لود صفحه اصلی سایت کاهش یابد.

در زیر به آموزش روش‌هایی برای رفع این خطا می‌پردازیم که روش انتخابی بر عهده شماست.

البته شاید این کار برای شما زمانبر باشد.

1. تغییر سایز:

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

2. برنامه نویسی و شخصی سازی:

   هرچند که یادگیری برنامه نویسی عملی پیچیده و زمانگیر است ولی در طولانی مدت به کمک شما خواهد آمد.

3. تغییر قالب یا ویرایش آن:

   در صورتی که قالب بهنه تری سراغ دارید بهتر است برای ادامه فعالیت خود به سمت آن قالب بروید.
   البته سعی کنید در صورت استفاده از قالب‌های آماده، قالب‌های معروف را انتخاب کنید.
   زیرا معمولاً قالب‌های معروف (مخصوصاً پولی) به صورت دائم به روز شده و بهینه خواهند شد.
   همچنین می‌توانید خود تغییراتی در کدهای آن انجام دهید یا از طراح آن درخواست کنید تغییرات را برای شما اعمال کند.

4. مشاوره و بهینه سازی سئو سایت:

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

پایان

در این مقاله سعی شد به بهترین روش‌ها برای تغییر و یا بهینه سازی عکس پرداخته شود.

جمع بندی کلّی این است که بهتر است از نرم افزار Photoshop قبل از آپلود تصویر در سایت کمک بگیرید.

با روش‌های گفته شده معمولاً به سادگی ولی با صبر و حوصله رفع خطای Serve scaled images در سایت GTmetrix امکان‌پذیر خواهد بود.

عمل کردن به این موارد بهبود سئو سایت، افزایش سرعت سایت و در نتیجه افزایش رتبه سئو را برای شما به همراه خواهد داشت.