CSS Sprites چیست؟تاثیر استفاده از css sprites_سئوسایت

css sprites چیست؟

 

CSS Sprites چیست؟

تکنیک CSS sprites روشی برای کاهش تعداد درخواستهای HTTP ساخته شده برای منابع تصویر ، با ترکیب تصاویر در یک پرونده است.

Sprites تصاویر دو بعدی هستند که از ترکیب تصاویر کوچک در یک تصویر بزرگتر در مختصات X و Y تشکیل شده اند.

برای نمایش یک تصویر از تصویر ترکیبی ، می توانید از background-positionویژگی CSS استفاده کنید و موقعیت دقیق تصویر را برای نمایش تعریف کنید.

تاثیر استفاده از CSS Image Sprite

بارگیری یک صفحه وب با بسیاری از تصاویر ، به ویژه بسیاری از تصاویر کوچک ، مانند آیکون ها ، دکمه ها و غیره ، می تواند مدت زمان زیادی طول بکشد و چندین درخواست سرور ایجاد می کند.

استفاده از sprites های تصویری به جای تصاویر مجزا ، تعداد درخواست های HTTP مرورگر را به سرور کاهش می دهد ، که می تواند برای بهبود زمان بارگیری صفحات وب وعملکرد کلی سایت  و سئو سایت بسیار موثر باشد.

 
توجه: کاهش تعداد درخواستهای HTTP تأثیر عمده ای در کاهش زمان پاسخ دارد که باعث می شود صفحه وب بیشتر برای کاربر پاسخگو باشد

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

CSS Image Sprite چگونه به توسعه وب کمک می کند؟

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

 

SpSS های CSS به توسعه دهندگان کمک می کنند تا این تصاویر کوچک را که اغلب استفاده می شود ، در یک تصویر بزرگ ترکیب کنند. سپس مرورگر باید فقط یک فایل را بارگیری کند.

 

مزایای استفاده از CSS Sprites

دو مزیت اصلی استفاده از sprite های CSS نسبت به تصاویر عادی وجود دارد:

بارگیری سریعتر صفحه:زمان بارگیری صفحه که یکی از عوامل رتبه بندی سایت ها و موارد تاثیرگذار بر سئواست را افزایش می دهد.
بهره وری بیشتر و استفاده کمتر از منابع: نه تنها این روش با سریعتر بارگذاری صفحه ، تجربه کاربر را بهبود می بخشد ،اما همچنین با ایجاد تعداد کمتری از درخواست های HTTP ، ازدحام شبکه را کاهش می دهد.
 

یک توسعه دهنده هنگام کار با CSS Sprites چه کاری باید انجام دهد؟

هنگام کار با تصاویر منفرد ، توسعه دهنده می تواند به سادگی با برچسب HTML <img> کار کند و در صورت لزوم آن را در CSS سبک کند. اما هنگام کار با CSS Sprites ، یک توسعه دهنده باید دو کار خاص انجام دهد:

ایجاد ورق Sprite
در صورت ایجاد یک صفحه وب در صورتی که توسعه دهنده تصمیم به استفاده از SpSS های CSS بگیرد ، باید ابتدا با ادغام تمام عناصر مورد نظر مانند دکمه ها ، آرم ها و غیره در یک الگوی شبکه ، صفحه Sprite را ایجاد کند. این کار را می توان با استفاده از هر برنامه ویرایش تصویر مانند فتوشاپ یا Gimp انجام داد. همچنین بسیاری از ابزارهای آنلاین در دسترس هستند که به شما کمک می کنند ورق sprite را تهیه کنید.

دسترسی به یک عنصر خاص از با استفاده از CSS:توسعه دهنده مجبور است از ویژگی های CSS برای دسترسی به قسمت های مختلف ورق استفاده کند.

width: عرض
background: مرجع به صفحه sprite
Background-Position: مقادیر افست (بر حسب پیکسل) برای دسترسی به فقط قسمت مورد نیاز صفحه sprite
 

چگونه یک CSS Sprite Sheet ایجاد کنیم؟

شما می توانید از هر نرم افزار ویرایش تصویر برای مرتب سازی تصاویر کوچکتر در یک شبکه استفاده کنید اما در زیر دو روش آسان تر مورد بحث قرار گرفته است:

1. ابزار ایجاد ورق آنلاین Sprite

toptal.com/developers/css/sprite-generator/

 

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

 

2. تولید Sprite Sheet با Sprity

اگر از Grunt ، Node یا Gulp استفاده می کنید ، می توانید بسته ای به نام Sprity نصب کنید که به شما کمک می کند یک ورق Sprite را در قالب های مختلف مانند PNG ، JPG و غیره ایجاد کنید.

در مرحله اول ، شما باید Sprity را نصب کنید:

npm install sprity -g

سپس ، برای تولید ورق sprite ، از دستور زیر استفاده کنید:

sprity ./output-directory/ ./input-directory/*.png

 

در این مثال ، ما از جدول زیر استفاده خواهیم کرد:

افزایش سرعت سایت

همانطور که در تصویر بالا مشاهده می کنید ، شش آیکون (اینستاگرام ، توییتر و فیس بوک) به صورت شبکه ای مرتب شده اند. در ردیف اول ، یک حالت عادی داریم و در ردیف دوم ، حالت شناور آنها (تصویری که با نشانگر نشانگر ماوس روی آنها نشان داده می شود) ظاهر می شود.

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

ابتدا تصویر صفحه sprite خود را باز کنید (شبکه ای شامل تمام تصاویر کوچکتر) و نشانگر ماوس را در گوشه بالا سمت چپ sprite قرار دهید.

افزایش سرعت سایت

مرحله ی بعد

هنگامی که مختصات نقطه بالا سمت چپ sprite خود را دارید (تصویر بالا سمت چپ اینستاگرام) ، می توانید با استفاده از کد CSS ، این sprite خاص را در هر کجا که لازم باشد نمایش دهید:

background: url('img_sprites.png');
background-position:0 0;
width: 125px;
height: 125px;

ما از عرض و ارتفاع به عنوان 125 پیکسل استفاده می کنیم.برای واکشی تصویر بعدی (توییتر) در همان ردیف ، از کد زیر استفاده می کنیم:

background: url('img_sprites.png');
background-position:-128px 0px;
width: 125px;
height: 125px;

به ویژگی پس زمینه در قطعه فوق توجه کنید. (-128px ، 0) به این معنی است که ما صفحه sprite خود را با 128 پیکسل (با در نظر گرفتن لایه بین عناصر) و 0 پیکسل در Y-Axis خنثی می کنیم. اگر بخواهیم به نماد شناور توییتر دسترسی پیدا کنیم ، ویژگی موقعیت پس زمینه ما این خواهد بود:

background-position:-128px -128px;

به این ترتیب ، اکنون می توانیم با استفاده از CSS به هر جز component sprite sheet خود دسترسی پیدا کنیم. بیایید کد کامل HTML و CSS را در مورد چگونگی انجام این کار مرور کنیم.

 

مرحله 1: نوشتن کد HTML مورد نیاز

در کد زیر ، ما به راحتی سه پیوند اضافه می کنیم. همچنین ، ما HTML خود را با صفحه سبک (screen.css) پیوند خواهیم داد.

 <span class="instagram icon"><a href="#">Instagram</a></span>

 <span class="twitter icon"><a href="#">Twitter</a></span>

 <span class="facebook icon"><a href="#">Facebook</a></span>

مرحله 2: نوشتن CSS لازم. ابتدا کلاس آیکون مشترک خود را سبک می کنیم. در اینجا ، می بینید که ما به صفحه sprite ای که ایجاد کرده ایم ، ارجاع می دهیم.

/* Shared icon Class */

span.icon a:link,

span.icon a:visited {

  display: block;

  text-indent: -9999px;

  background-image: url(./img_sprites.png);

  background-repeat: no-repeat;

آموزش توسعه وب Front End
}

 

مرحله 3: دریافت نمادهای جداگانه از صفحه sprite

/* Instagram Icon */

span.instagram a:link,

span.instagram a:visited {

  width: 125px;

  height: 125px;

  background-position: 0 0;

}

/* Twitter Icon */

span.twitter a:link,

span.twitter a:visited {

  width: 125px;

  height: 125px;

  background-position: -128px 0;

}

/* Facebook Icon */

span.facebook a:link,

span.facebook a:visited {

  width: 125px;

  height: 125px;

  background-position: -257px 0;

}

مرحله 4: دریافت نمادهای شناور از صفحه sprite

 

span.instagram a:hover {background-position: 0 -128px;}

span.twitter a:hover {background-position: -128px -128px;}

 

span.facebook a:hover {background-position: -255px -128px;}

 

 

شرکتهایی که از CSS Sprites استفاده می کنند

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

 

Leave Comment

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