استفاده از تصاویر در وبسایت بخش عمده فایل‌های آپلود شده روی یک سایت رو تشکیل میدن و تاثیر بسیار زیادی روی ایجاد تغییرات ظاهری در سایت دارند. همه ما در سایتامون و در هر نوشته از چند تصویر به خاطر اینکه بتونیم در جستجوی تصاویر گوگل هم بالا بیایم استفاده می‌کنیم. در این بین سعی میشه همیشه از تصاویر با کیفیت و زیبایی استفاده بشه که با خواندن پیام چشمی توسط بازدیدکننده در نگاه اول کاری کنید که محتوای سایت شما رو تا انتها دنبال کنند. اما یک شرط مهمی که برای استفاده از تصاویر در سایت وجود داره متاسفانه نادیده گرفته میشه که اونم چیزی نیست جز بهینه سازی کردن تصاویر سایت از نظر اندازه که در مبحث تست بهینه سازی سایت ازش با نام 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 در مخزن وردپرس به ثبت رسیده که به شما این امکان رو میده اندازه مختلفی بر اساس تنظیمات قالب خودتون برای تصاویر در نظر بگیرید که وقتی دارید آپلود می‌کنید علاوه بر اندازه‌های خود وردپرس با این اندازه‌ها هم تصاویر برش بخورند.
سلام.من از قالب avada classic shop استفاده میکنم و نمیدونم سایز تصویر در نظر گرفته شده برای این قالب چه اندازه ایی است.در صورت امکان راهنمایی کنید.ممنون
سلام، یکی از مطالب داخل دمو رو باز کنید. تصویر شاخص رو تو پنجره جدید باز کنید ببینید در چه اندازه‌ای هست. اگر تصویر برش خورده باشه بعد از نام عکس سایزش رو میزنه که اینم سایز استاندارد هست. این کار روی برای چند نوشته تست کنید تا اندازه استاندارد بیاد دستتون.
میشود بعد از اینکه تصاویر را با افزونه Imsanity ریسایز کردیم و بهینه کردیم این افزونه رو پاک کنیم یا اینکه نه وقتی پاک کنیم دوباره سایز ها برمیگرده به حالت قبل
و اینکه ایا افزونه regenerate thumbnails این عمل رو انجام نمیده ؟
یکی از خطاهایی که من در سایتم دارم همین هست ولی این مشکل با این روش که میگید قابل حل نیست چون من یک تصویر شاخص برای مقاله در نظر میگیرم که سایرش برای اون مقاله خوب هست ولی در صفحه اصلی سایت لیستی از جدید ترین مقالات نمایش داده میشه که همراه با با تصویر شاخص اون ها، که تصویر شاخص در جدید ترین مقالات کوچک تر نمایش داده میشود. این تصویر برای خود مقاله مناسب هستش ولی برای نمایش لیستی از مقالاتی که در صفحه اصلی نمایش داده میشود مناسب نیست اگر برای این هم راه حل وجود داره ممنون می شم بگید
سلام
در خطای جی تی متریکس به لوگو سایتم اشاره می کنه و میگه
is resized in HTML or CSS from 4078×2327 to 105×60. Serving a scaled image could save 97.4KiB (99% reduction).
در صورتی که من هم حجم رو کم کردم هم سایزش تغییر دادم
و زمانی که روی لوگو در سایت inspect میگیرم زیر عکس می نویسه
105*60px (intrinsic : 4078*2327px)
سلام
این خط کد زیر در سایت برای تصاویر شاخص مطالب تعریف شده است و در حالت مبایل هم همین عکس بارگزاری میشه و باعث کاهش سرعت سایت شده است. از برنامه نویس های میزبان فا کسی میتونه که این کد را طوری تغییر دهد که در حالت مبایل تصویری در اندازه 256×103 بارگزاری کنه؟
$avia_config[‘imgSize’][‘entry_with_sidebar’] = array(‘width’=>845, ‘height’=>321); // big images for blog and page entries
سلام
می شه از طریق هاست سی پنل عکس رو حذف کرد ؟
من عکس زیر رو از طریق کتابخانه ووردپرس حذف کردم ولی جی تی متریکس مسیر هاست رو نشون میده .
ممنون
سلام روزبخیر؛
بله امکان حذف محتوا از طریق هاست و کتابخانه وردپرس فراهم هست منتهی دقت داشته باشید با حذف فایلی در سایت استفاده شده باشه یا ایندکس شده ارور 404 میگیرید.
سلام من از Imsanity استفاده کردم . تصاویر شاخص پست هام بهینه میشه اما تصاویری ک تو لیست پست ها هست (همون عکس که میزنی روش و پست باز میشه ) بهینه نشده و تو جی تی ام اتریکس این خطا بازم میاد. چطور تصویر بهینه رو جایگزین کنم
سلام وقتتون بخیر
یک سایت فروشگاهی وردپرسی دارم با قالب zshop که برای بهینه سازی serve scale image ، سایز تصاویر محصولات را کوچک کردم که کیفیت شان فوق العاده پایین اومد. وقتی دمو همین قالب رو در gtmetrix وارد کردم عکسهای اون از نظر serve scale image مشکلی نداشتند و کیفیت عکسها خوب بودند. دمو، تصویر شاخص محصولات رو با سایز 900x 900 و تصاویر گالری رو با سایز 150×150 و همین تصاویر رو در صفحه اصلی با سایز 300×300 میخونه. این درحالیه که من یه عکس تصویر شاخص رو در سایت قرار میدم ولی در هر سه جایی که اشاره کردم با همون سایز میخونه و سایزهای متفاوت بر روی آن اعمال نمیشود
ممنون میشم راهنمایی کنید یا روش دیگه ای برای بهینه سازی عکسها ارائه بدید