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

خطا Serve Scaled Images

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

ارائه تصاویر با اندازه مناسب، می تواند در زمینه ذخیره بایت های داده صرفه جویی کرده و عملکرد صفحه وب را خصوصاً در دستگاه های کم مصرف (به عنوان مثال موبایل)، بهبود ببخشد.

Scaled Images

یک تصویر مقیاس پذیر (Scaled Images) به معنای آن دسته از تصاویری می باشد که اندازه آن ها دقیقاً مطابق با اندازه تعریف شده توسط HTML و CSS موضوع وب سایت فعلی شما (WordPress) است. بنابراین بسته به موضوع وردپرس، مقیاس گذاری یک تصویر می تواند برای تم های مختلف متفاوت باشد.

نکته مهم: یکی از اصلی ترین دلایل عدم تغییر قالب، می تواند منجر به حداکثر رساندن کار شما با ارائه تصاویر بیش از یک بار مقیاس گذاری شده، شود.

به عنوان مثال، در نظر بگیرید که برای تصاویر کوچک صفحه اصلی خود به تصاویری با اندازه 180*90 احتیاج دارید. اما در طول ایجاد پست، تصویری برجسته با ابعاد 1200 * 550 بارگذاری شده است.
در این حالت، مرورگر بازدید کننده باید تصویر اصلی را بارگیری کند و سپس آن را در مقیاس پایین قرار دهد تا بر اساس تنظیمات قالب به درستی نمایش داده شود. به طور کلی، در وردپرس پس از بارگذاری یک تصویر، به طور خودکار به اندازه های مختلف تبدیل می شود. اما با این حال، گاهی اوقات مسئله تصویر مقیاس شده ظاهر می شود.

Serve Scaled Images - تغییر سایز

ارائه یک تصویر بدون مقیاس، بار اضافی را برای مرورگر به ارمغان خواهد آورد، به همین دلیل مرورگر به زمان بیشتری جهت بارگذاری کامل صفحه نیاز دارد و در نهایت صفحه به آرامی بارگیری می شود.
شایان ذکر است که این مسئله تنها در صفحه اصلی اتفاق نمی افتد. این امکان وجود دارد که گاهی، بعضی از پست های اصلی شما حاوی تصاویری باشند که نیاز به سرویس دهی دارند.
یکی از روش هایی که جهت بهبود سرعت صفحه وب سایت استفاده می شود، این است که از تصویری که قبلاً بر اساس تنظیمات قالب مقیاس گذاری شده، استفاده نمود. اما در بعضی مواقع، این راه حل پاسخگو نمی باشد، زیرا فهمیدن اندازه دقیق مناسب برای قالب، کار بسیار دشواری می باشد.

در صورت ارائه تصاویر مقیاس پذیر، زمان بارگذاری وب سایت با بهبود در میزان عملکرد سایت کاهش می یابد. همچنین کارایی بهتر سایت باعث افزایش رتبه سئو و گوگل می شود.

این امکان وجود ندارد که فقط با نگاه کردن به صفحه وب، بفهمیم کدام تصویر باید مقیاس بندی شود. بنابراین جهت تشخیص این تصاویر به برخی ابزارها (Pingdom, GTmetrix, web-grader) نیاز دارید.
توصیه می شود، ابتدا به GTmetrix یا Google page insights رفته و اقدام به تست دامنه و صفحات خود کنید. در صورت مواجه شدن با خطا Serve Scaled Images، با کلیک بر روی آن می توانید جزئیات کاملی از آن را مشاهده کنید.

مشاهده خطا Serve Scaled Images در GTmetrix
لینک های داخل تصویر، لینک تصاویری می باشند که نیاز به مقیاس پذیری دارند و با کلیک بر روی آن لینک، می توانید نحوه نمایش تصویر در صفحه را مشاهده کنید.

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

راه های رفع خطا serve scaled images

  • استفاده از برنامه ها و ابزار های ویرایشگر تصاویر (فتوشاپ)
  • استفاده از ابزارهای آنلاین ( picresize.com , imageresize.com و resizeimage.net )
  • استفاده از پلاگین و افزونه (افزونه imsanity)