ترکیب تصاویر با استفاده از CSS Sprites در وردپرس یک تکنیک بهبود عملکرد مشهور است که میتواند سرعت وردپرس را با کاهش دادن تعداد درخواست های HTTP جهت بارگزاری تصاویر موجود در سایت به طور چشمگیری افزایش دهد.
با یک تولیدکننده CSS Sprite وردپرس، میتوان از این تکنیک بهینه سازی برای بهبود عملکرد سایت استفاده کرد. برای شروع باید با CSS و HTML در یک سطح پایه آشنا باشید، اما نیاز نیست که کدهای این تکنیک را درک کنید، ما به شما نشان می‌دهیم که دقیقا هرچیز را کجا قرار دهید.
در این مقاله، در مورد ماهیت سی اس اس اسپریت و اینکه چه زمانی باید آنها را در سایت وردپرس خود استفاده کنید اندکی بیشتر توضیح میدهیم.

ترکیب تصاویر با استفاده از CSS Sprites به چه معنی است؟

بدون سی اس اس اسپریت، هر تصویر در سایت وردپرس یک فایل جداگانه است. زمانی که فردی از وبسایت بازدید میکند، مرورگر این شخص یک درخواست HTTP برای دانلود هر فایل منفرد تصاویر ایجاد میکند، که میتوانید هنگام نگاه کردن به نمودار آنالیز آبشاری در یک ابزار آزمایش بهینه سازی عملکرد مانند Pingdom یا GTMetrix ببینید.
اگر شما از پنج تصویر در یک صفحه استفاده کنید، به معنی پنج درخواست جداگانه HTTP یعنی یک درخواست به ازای هرتصویر، است.
این یک مشکل جدی است، زیرا زمانی که همه شرایط یکسان باشد، درخواست‌های HTTP بیشتر به معنی سایت کندتر خواهد بود.
برای حل این مشکل،  باید تصاویر را با استفاده از سی اس اس اسپریت به کمترین تعداد ممکن ترکیب کنید.
یعنی تمامی تصاویر جداگانه را به یک فایل تصویر ترکیب کرده سپس، با استفاده از CSS هر بخش از تصویر را در مکان مناسب استفاده نمائید؛ حال می‌توانید پنج تصویر جداگانه را بر روی صفحه خود نمایش دهید درحالی که از یک فایل تصویر آمده‌اند.
در ظاهر، بازدیدکنندگان انسانی هیچ تفاوتی بین استفاده از CSS sprites و یا فایل‌های تصاویر جداگانه نمی‌بینند، اما در پشت صحنه مرورگرها تنها باید یک فایل تصویر را بارگزاری کنند که سرعت بارگزاری سایت شما را خواهد داد.

چه زمانی باید تصاویر را با استفاده از CSS sprites ترکیب کرد؟

هرچند CSS sprites میتواند سرعت بارگزاری صفحه شما را افزایش دهد، ولی نباید تمامی تصاویر وردپرس خود را با استفاده از سی اس اس اسپریت با هم ترکیب کرد چرا که مشکلاتی با خود به همراه دارد.

به عنوان مثال، ترکیب تصاویر با CSS sprites به شما اجازه اضافه کردن alt text جداگانه و عنوان برای هر تصویر را نمیدهد که :

•  میتواند به صورت منفی بر روی سئوی شما اثر بگذارد، مخصوصا اگر بخواهید تصاویر در جستجوی تصاویر گوگل اثر بگذارد. (که با CSS sprites ممکن نیست زیرا تنها یک فایل تصویری منفرد است)
• به دسترسی شما آسیب میزند زیرا افرادی که از اسکرین ریدر (Screen Readers) استفاده میکنند قادر به درک اینکه هر تصویر نمایانگر چه چیزی است نخواهند بود زیرا تمامی آنها از یک فایل مشترک هستند.
  به این دلایل، بهتر است استفاده از CSS sprites را تنها به تصاویر تزئینی محدود کنید.

چند مثال از موارد منطقی استفاده از CSS sprites شامل موارد زیر است :

• آیکون‌های تزئینی بر روی صفحه نخست (البته اگر از آیکون فونت استفاده نمیکنید.)
• لوگوها و تصاویر مشتریان و یا افرادی که برای شما نظر می‌نویسند
• آیکون‌های به اشتراک گذاری شبکه های اجتماعی

این موارد احتمالا تصاویری هستند که شما در تمامی سایت و یا صفحات ثابت مرکزی خود از آن ها استفاده میکنید.
به این موضوع فکر نکنید که با استفاده از CSS sprites تصاویر نوشته‌های بلاگ خود را ترکیب کنید!
البته، تصویر زیر مربوط به  صفحه نخست AWeber گزینه خوبی برای CSS sprites است، زیرا :

• چندان برای اهداف سئو حایز اهمیت نیست.
• از دست دادن قابلیت اضافه کردن alt text به آنها بر روی دسترسی صفحه اثر نخواهد گذاشت.

چگونه CSS sprites در سطح بالا عمل میکند

اینجا یک فرآیند دو مرحله ای برای ترکیب تصاویر با استفاده از CSS sprites بیان شده است :

1. از یک ابزار تولیدکننده CSS sprites برای ترکیب چندین تصویر به یک فایل تصویر منفرد استفاده کنید.
2. از CSS و HTML تنها برای نمایش دادن قسمت خاصی از فایل تصویر کلی که حاوی تصاویری که میخواهید نمایش داده شود، هستند، استفاده کنید.

بیایید در نظر بگیریم که میخواهید دو تصویر مختلف را بر روی صفحه نخست خود نمایش دهید :

1. پرچم ایران
2. پرچم کانادا

در ابتدا باید از تولید کننده CSS sprites برای ترکیب کردن تصاویر جداگانه هر پرچم به یک فایل مشترک استفاده کنید. تصویر ترکیب شده به صورت زیر نمایش داده میشود :

حال از CSS که ابزاری برای سایت فراهم کرده است استفاده میکنید و هر تصویر را با اضافه کردن یک <div> یا <span> با همان کلاس CSS در محتوای خود نمایش دهید.
نگران نباشید اگر به طور کامل متوجه این موضوع نمی‌شوید،در قسمت بعد قدم به قدم نشان خواهیم داد که چطور این کار را بر روی سایت وردپرس خود انجام دهید!

چگونه تصاویر را با استفاده CSS sprites در ورپرس ترکیب کرد

اکنون، بیایید روند بالا را انجام داده و بر نحوه ترکیب کردن تصاویر با استفاده CSS sprites در وردپرس دقت کنیم
بیایید با مثال پرچم‌ها کار خود را ادامه دهیم و یک پرچم سوم برای آلمان اضافه کنیم.
صفحه مثال بدون CSS sprites به شکل زیر خواهد بود، پس در کل سه تصویر و سه درخواست HTTP برای تصاویر وجود دارد:

و این هم ظاهر محتوا در ویرایشگر وردپرس است که میتوانید سه تصویر مجزا را در قسمت بلوک های تصویر ببینید:

اکنون بیایید این تصاویر را با استفاده از CSS sprites ترکیب کنیم!

1. ترکیب تصاویر به کمک یک تولید کننده CSS sprites

برای شروع، از یک ابزار فعال کننده CSS sprites برای ترکیب فایل های جداگانه تصاویر خود استفاده کنید.
از سایزبندی مناسب تصاویر  قبل از آپلود آنها به ابزار تولید کننده CSS اطمینان حاصل کنید. انجام اینکار بعدا بسیار سخت تر خواهد بود زیرا شما نیاز خواهید داشت که آن ها را به کمک CSS، دستکاری کنید که اگر  استفاده از CSS را بلد نیستید سخت خواهد بود.
تولیدکنندگان خوب بسیاری وجود دارند اما فعال کننده مورد علاقه من CSS Sprites Tool نام دارد.
تمام کاری که باید بکنید این است که تصاویر خود را به اینترفیس یا رابط کشیده و بر روی دکمه Generate CSS Sprite کلیک کنید. شما میتوانید تمام تنظیمات دیگر را به صورت پیشفرض رها کنید :

پس از انجام کار سه بخش زیر را در خروجی خواهید دید:

1. تعدادی کد CSS
2. تعدادی کد HTML
3. فایل تصاویر ترکیب شده

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

2. تصاویر ترکیب شده را به آرشیو رسانه های وردپرس خود آپلود کنید

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

3. اضافه کردن کد CSS به سایت وردپرس

برای اضافه کردن کد CSS به سایت وردپرس خود به Appearance → Customize → Additional CSS بروید.
سپس کد CSS تولیدکننده Sprites در قدم اول را Paste کنید. همانطور که این کار را انجام میدهید، قسمت Background:url را با لینک مستقیم برای فایل تصاویر ترکیب شده در آرشیو رسانه وردپرس خود جایگزین نمائید:

4. استفاده از کد HTML برای نمایش دادن تصاویر

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

به یاد داشته باشید که این کد HTML را میتوانید از تولیدکننده CSS Sprites در گام اول دریافت نمائید.
که در ظاهر و باطن به  همان صورت دیده میشود. اکنون، بازدیدکنندگان باید یک فایل تصویر را به جای سه تصویر مختلف بارگزاری کنند:

و اینگونه است که میتوان تصاویر را با استفاده از CSS sprites در وردپرس ترکیب کرد!

کار با CSS sprites را امروز شروع کنید

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

برای ترکیب کردن تصاویر به کمک CSS sprites شما میتوانید :
1. از یک ابزار تولیدکننده CSS sprites وردپرس برای ترکیب کردن چندین تصویر به یک عدد استفاده کنید.
2. تصاویر ترکیب شده را به سایت خود آپلود کنید.
3. کد CSS را به سایت وردپرس خود از طریق سفارشی‌سازی وردپرس اضافه کنید.
4. کد HTML فراهم شده را در جایی که باید هر تصویر نمایش داده شود اضافه نمائید.