آموزش رفع خطای combine images using css sprites در gtmetrix

آموزش رفع خطای combine images using css sprites در gtmetrix

یکی از خطاهایی که هنگام تست سرعت سایت با Gtmetrix با آن مواجه می شویم به نام خطای combine images using css sprites که از سری خطاهای page speed است.  

combine images using css sprites چیست؟

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

اما یک نکته که باید به آن دقت کنید این است که : در این صورت تعداد زیادی درخواست برای لود این تصاویر به وجود می آید. اما اگر روش css sprites را استفاده کنید، می توانید با استفاده از css یک تصویر که از تعدادی تصاویر کنارهم قرار دارد استفاده کنید و با استفاده از css ناحیه هایی که میخواهید قابل کلیک باشد را روی هر عکس مشخص کنید که با کلیک بر روی آن ناحیه کاربر به آن لینک هدایت می شود.

مزایای css sprites چیست؟

• افزایش سرعت بارگذاری سایت (سرعت سایت یک موضوع بسیار مهم است )

• باعث افزایش ux سایت می شود

• افزایش رتبه سایت درگوگل و موتورهای جستجو

حال چگونه خطای combine images using css sprites را رفع کنیم ؟

روش اول : استفاده از فتوشاپ برای css sprites  

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

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

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

لیست ابزارهای آنلاین برای css sprites :

Spritepad.wearekiss.com Spritegen.website-performance.org Css.spritegen.com www.spritecow.com

نکته : برای css sprites کردن عکس ها بهتر است فرمت عکس های کوچک png باشد و بک گراند آن شفاف باشد.