CSS Sprites چیست؟ آموزش کامل تکنیک css sprites

✨ سلامی با طعم ترکیب عکس‌ها و درودی با آموزش تکنیک CSS Sprites تقدیم به شما ✨

❔ آیا می‌دانید ۷۰% (به‌طور میانگین) سرعت سایت شما به بهینه‌سازی تصاویر بستگی دارد؟

❔ آیا می‌دانید سرعت یکی از فاکتورهای کلیدی سئو سایت است؟

❔ آیا می‌دانید هر تصویر در سایت، یک درخواست اضافی به سرور ارسال می‌کند؟

❔ آیا می‌دانید با CSS Sprites می‌توان صدها عکس در سایت قرار داد به‌طوریکه فقط یک درخواست به سرور شود؟

❔ آیا مایل هستید با نحوه‌ی پیاده‌سازی این تکنیک با استفاده از کدهای CSS آشنا شوید؟

❔ آیا دوست دارید روش استفاده از تکنیک CSS Sprites را در وردپرس (به‌شکل عملی) مشاهده نمایید؟

در مقاله‌ی CSS Sprites چیست؟ قصد داریم تمامی ابهامات فوق را مرتفع سازیم. این شما و این هم:

 

منظور از CSS Sprites چیست؟

? تعریف در یک جمله: مجموعه‌ای از عکس‌ها در یک عکس❕

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

از این تکنیک عموماً برای آیکون‌ها استفاده می‌شود. در ادامه مراحل پیاده‌سازی تکنیک CSS Sprites را به‌طور دقیق و گام‌به‌گام بررسی خواهیم کرد.

نقشه راه ما برای اجرای تکنیک CSS Sprites

به‌صورت کلی دو مرحله پیش‌ِ روی ماست:

⚪ گام نخست: ابتدا نیاز است تا آیکون‌های موردنظر را انتخاب کرده و با بهره‌گیری از ابزارهای ویرایش تصویر مانند فوتوشاپ، تمامی آیکون‌ها را در کنار هم قرار دهیم و در نهایت نیز یک تصویر بزرگ که حاویِ چندین تصویر کوچک است را خروجی بگیریم.

⚪ گام آخر: با استفاده از کدهای CSS مختصات هر تصویر کوچک را بدست آورده و هر کدام را به یک کلاس CSS مجزا تبدیل نماییم. حال فقط کافیست از کلاس‌های CSS ساخته‌شده در فضاهای دل‌خواه استفاده نماییم.

در ادامه به‌شکل کاملاً عملی، هر دو قدم را طی خواهیم کرد.

۱) آموزش ترکیب عکس‌ها توسط ابزارهای آنلاین

در وهله اول نیاز است تا آیکون‌های خاص خود را انتخاب نماییم. یکی از بهترین منابع برای انتخاب آیکون، وب‌سایت Freepik.com است.

پس از دانلود تصاویر منتخب، اکنون باید آن‌ها را در کنار هم (درقالب یک عکس) قرار دهیم. برای ترکیب تصاویر، ابزارهای بسیاری وجود دارد. یکی از کم‌دردسرترین آن‌ها وب‌سایت spritepad.wearekiss.com است. صرفاً کافیست به این آدرس مراجعه کرده و تصاویر خود را در فضای خالی (مطابق تصویر زیر) قرار دهید.

در گام بعد، روی گزینه‌ی Fit Document کلیک کنید تا فضاهای اضافی تصویر، حذف شوند. سپس روی دکمه Download کلیک کنید تا تصاویر ترکیب‌شده، به همراه کدهای CSS برای شما دانلود شوند.

آشنایی با مفهوم Background Position در CSS

اگر به بخش کدها در تصویر بالا دقت نمایید، درخواهید یافت که ابزار قدرتمند Spritepad باتوجه به نام هر عکس، یک کلاس CSS (جداگانه) ایجاد کرده و با استفاده از کلیدواژه‌های width و height عرض و ارتفاع هر تصویر را مشخص کرده است. اما چه چیزی باعث می‌شود، تکنیک CSS Sprites به‌درستی کار کند؟!

در زبان CSS دستوری تحت عنوان background-position وجود دارد که به ما امکان تغییر جایگاه یک المان (در پس‌زمینه) را می‌دهد. اکنون لازم است برحسب نیاز خود، تصویر ساخته شده را از کادر مرورگر خارج نماییم تا آن بخشی که مقصودِ ماست توسط کاربران دیده شود.

اگر از دوران باشکوه مدرسه به یاد داشته باشید، برای بدست‌آوردن مختصات یک نقطه حداقل مقادیر مورد نیاز ما x (حرکت در محور افقی) و y (حرکت در محور عمودی) بودند. خاصیت background-position هم همین دو مقدار را متوجه می‌شود!

حال اگر بخواهیم فقط آیکون مربوط به پشتیبانی (با کلاس support) برای کاربران نمایان شود، باید عکس را ۶۱px به سمت چپ حرکت دهیم و ۶۵px نیز به سمت بالا ببریم. دلیل منفی بودن اعداد، این است که درواقع ما عکس بزرگ را (از بالا و چپ) از قاب مرورگر خارج می‌کنیم (برای درک هرچه‌بهتر این مفهوم، لطفاً ویدیو آموزشی ابتدای همین مطلب را بادقت مشاهده نمایید).

۲) استفاده از تکنیک CSS Sprites در فضای کدنویسی

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

برای استفاده از ترفند CSS Sprites فقط کافیست یک سند html ایجاد کنید، کدهای CSS دانلود شده را به آن اضافه نمایید و در آخر با انتساب کلاس‌های CSS مذکور، در هر فضایی که خواستید، بخش‌های مختلف این تصویر را نمایش دهید. تمامی کدهای مورد نیاز به همراه نحوه‌ی اجرای آن در عکس زیر قابل مشاهده است:

آموزش پیاده‌سازی CSS Sprites در وردپرس

❔ یک سوال: چگونه تکنیک خارق‌العاده‌ی CSS Sprites را در وردپرس پیاده‌سازی نماییم؟

⬛ چند جواب: روند کار مشابه روش قبل است. در اغلب قالب‌های استاندارد وردپرس، بخشی تحت عنوان سی اس اس اختصاصی وجود دارد که به ما امکان نوشتن استایل‌های مضاعف را می‌دهد. اگر از قالب فلت‌سام استفاده می‌کنید، از بخش سفارشی‌سازی روی گزینه استایل کلیک کرده و CSS اختصاصی را انتخاب می‌کنیم. در صفحه‌ی پیش‌ِ رو باید تمامی استایل‌هایی که در قسمت قبل مورد استفاده قرار دادیم را کپی کنیم.

اکنون لازم است یک تغییر کوچک در کدها اعمال شود؛ آدرس تصویر پس‌زمینه باید آپدیت شود. برای این کار بدیهی است که باید ابتدا عکس را در سایت آپلود نماییم. بنابراین از قسمت رسانه‌ها، روی بارگذاری پرونده کلیک می‌کنیم و تصویر خود را upload می‌نماییم و سپس نشانی عکس را کپی کرده و در بخش background-image قرار می‌دهیم. درنهایت هم شاید باورتان نشود اما باید تغییرات را ذخیره کنیم❕

حال اگر یک نوشته جدید اضافه کنیم و روی تب متن کلیک کنیم، می‌توانیم با درج تگ div و انتساب کلاس‌های تعریف‌شده، تصاویر را در سایت نمایش دهیم.