ادغام تصاویر توسط تکنیک CSS Sprites
ادغام تصاویر توسط تکنیک CSS Sprites » در این مقاله، نحوه استفاده از تکنیک css sprites به منظور ترکیب یا ادغام تصاویر در قالب وب سایت را آموزش می دهیم.

ادغام تصاویر توسط تکنیک CSS Sprites

Combine images using CSS sprites

ادغام تصاویر توسط تکنیک CSS Sprites

 

ترکیب تصاویر با استفاده از روش CSS Sprites

 

فواید استفاده از تکنیک CSS Sprites چیست؟

فرض کنید شما ۶ تصویر در صفحه اصلی سایت تان دارید و مرورگر باید تمام این تصاویر را بطور جداگانه دانلود کند. اگر بتوان این ۶ تصویر را در یک تصویر با هم ادغام کرد در سرعت لود صفحه اصلی این وب سایت تاثیرگذار خواهد بود. مرورگر شما بجای دانلود ۶ عکس فقط کافیست یک عکس واحد را دانلود کند.

این زیبایی تکنیک CSS Sprites می باشد. یک تصویر و چند استفاده!

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

 

دانلود یک تصویر بجای چند تصویر:

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

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

 

نحوه ادغام تصاویر در تکنیک css sprites:

دو قدم اصلی برای استفاده از تکنیک CSS Sprites وجود دارد. قدم اول اینست که باید یک تصویر ادغام شده ایجاد کنیم (عکسی که از ترکیب چندین عکس کوچک تشکیل شده است) و در قدم دوم تعیین موقعیت ها در آن است.

 

ادغام تصاویر (Combining Images):

ما با یک مثال ساده نحوه ادغام تصاویر را در تکنیک سی‌اس‌اس اسپریت (CSS Sprites) آموزش می دهیم. فرض کنید ما دو تصویر کوچک در صفحه اصلی وب سایت خود داریم و می خواهیم آنها را در یک تصویر واحد ادغام کنیم تا بتوانیم از روش CSS Sprites استفاده کنیم. ابتدا باید ساز تک تک تصاویر را بدانیم. در این مثال، سایز هر دو عکس ما ۵۰px*50px می باشد.

 

ادغام تصاویر (Combining Images)

 

 

پیاده‌سازی تکنیک css sprites:

برای ادغام این دو تصویر ما باید یک تصویر با ابعاد width:50px و height:100px ایجاد کنیم. نام این تصویر را sprites.png قرار می دهیم. مطابق تصویر زیر، باید تصویر بلندگو را در ۵۰ پیکسل بالایی تصویر sprites قرار دهیم و عکس لبخند را در ۵- پیکسل پایینی آن درج کنیم.

 

پیاده سازی تکنیک css sprites

 

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

 

نحوه موقعیت یابی تصویر در css sprite:

در تکنیک css sprites ما از تصویر نهایی بصورت بک گراند div استفاده می کنیم. بدین صورت که برای نمایش هر یک از این دو تصویر یک div خالی در html تعریف می کنیم و برای div مربوط به بلندگو کلاس megaphone و div لبخند کلاس smile را تعریف می کنیم. برای نمایش بلندگو استایل های زیر لازم است:

.megaphone {

        width: 50px;

        height: 50px;

        background: url(images/sprite.png) 0 0px;

    }

 

در استایل فوق طول و عرض محل نمایش تصویر بلندگو را ۵۰ در ۵۰ درنظر گرفته ایم و در استایل بعدی تصویر ادغام شده (sprites.png) بعنوان تصویر بک گراند تعریف شده است. در پایان این استایل ۰ ۰px تعریف شده است که نکته اصلی تکنیک css sprites می باشد. با تعریف ۰ ۰px می گوییم تصویر بلندگو باید از مختصات صفر عمودی (محور y) و صفر افقی (محور x) تصویر بک گراند شروع شود.

 

مختصات تصاویر در روش CSS Sprites:

این مسئله نباید باعث نگرانی شما شود و تصور کنید برای بدست آوردن این مختصات نیاز به محاسبات عجیب و غریب دارید. موقعیت ۰ ۰px به زبان ساده می گوید تصویر megaphone باید از گوشه بالایی و سمت چپ تصویر sprites.png شروع شود. بدلیل اینکه ما طول و عرض تصویر بلندگو را ۵۰*۵۰ تعریف کردیم، با تعریف استایل فوق فقط به اندازه ۵۰ پیکسل از تصویر بک گراند را بعنوان تصویر بلندگو نمایش می دهد و از نمایش بقیه تصویر صرف نظر می کند و در نتیجه تصویر لبخند را در div بلندگو نمایش نخواهد داد.

 

تعریف استایل CSS Sprites:

اکنون نوبت تعریف استایل برای div لبخند است. این div را با کلاس smile تعریف می کنیم:

.smile {

        width: 50px;

        height: 50px;

        background: url(images/sprite.png) 0 -50px;

    }

به یاد داشته باشید که ما در استایل لبخند نیز طول و عرض ۵۰ پیکسل را ست کرده ایم. و نیز همان تصویر ادغام شده یعنی sprites را بعنوان پس زمینه تعریف کرده ایم. تنها نکته متمایز کننده این استایل نسبت به قبلی، نحوه موقعیت دهی تصویر بک گراند می باشد که در اینجا ۰ -۵۰px تعریف شده است. به بیان ساده مختصات ۰ -۵۰px به این معنیست که تصویر لبخند از ۵۰ پیکسل پایین تر از بالای تصویر sprites.png شروع می شود.

پس از تعریف استایل های لازم فقط کافیست در جایی که می خواهیم بلندگو نمایش یابد، کد html زیر را بنویسیم:

<div class="megaphone"></div>

و برای نمایش تصویر لبخند، کد html زیر را خواهیم داشت:

<div class="smile"></div>

 

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

با مطالعه مقاله "تکنیک های css" می توانید دانش بیشتری راجع به شیوه نامه استایل نویسی css کسب کنید.

 

منبع: https://varvy.com/pagespeed/combine-images-css-sprites.html


برچسب‌ها:

CSS Spritesآموزش cssآموزش css spritesترفندهای cssتکنیک CSS Spritesتکنیک سی اس استکنیک های cssروش spritesسی اس اس اسپیریت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

7 + شش =