illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش روش CSS Image Sprites

18182 ۲۴ مهر ۹۲

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

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

شاید مقدار ناچیزی بنظر برسد اما برای کسی که سرعت اینترنت پایینی داشته باشد  لود 110 کیلوبایت بیش از 1 دقیقه  طول خواهد کشید و حتما یک امتیاز منفی در سئوی سایت به حساب خواهد آمد. در اینجا روش css image sprites راه حل مناسبی برای کم کردن حجم تصاویر خواهد بود.

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

خب به تصویر زیر نگاه کنید که ادغام شده ی 18 تصویری است که در سری آموزشی طراحی قالب html استفاده کردیم.

بعد از انجام اینکار حجم فایل به 25 کیلوبایت تغییر کرد یعنی 85 کیلو بایت کاهش حجم داشته ایم و تعداد درخواست ها به سرور برای لود تصاویر از 18 به 1 رسیده است.  فکر نکنم مقادیر کمی باشند درصورتی که از تصاویر خیلی زیادی در قالب استفاده کرده ایم حتما این روش بسیار مؤثر خواهد بود. البته من استفاده از این روش رو حتی اگه از دو تصویر استفاده کرده اید هم پیشنهاد میدم.

نکته :

پس از پایان ادغام تصاویر جهت ذخیره تصویر از منوی file گزینه save for web …. رو انتخاب کنید  و تنظیمات پنجره باز شده رو به شکل زیر انجام دهید

همانطور که می بینید زمان لود این فایل با اینترنت دایل آپ 5 ثانیه طول خواهد کشید.

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

این کار بسیار ساده است  کافی است که یک id یا class به تگ مورد نظر اختصاص دهیم و سپس با استفاده از height و width  و background در css  موقعیت و اندازه تصویر را تعیین کنیم.

به طور مثال برای لوگو اگر کد html زیر را داشته باشیم

کد css به شکل زیر خواهد بود :

خب همانطور که می بینید با استفاده از height و width طول و عرض تصویر را تعیین کرده و با استفاده از background آدرس تصویر و سپس دو مقدار بر حسب px و سپس عدم تکرار تصویر را تعیین کرده ایم. قسمت مهم این کد این دو مقداری که برحسب پیکسل نوشتیم. این دو مقدار مختصات ابتدای تصویر را تعیین می کنند.

مقدار اول (385px) تعیین می کند که در تصویر بزرگ ابتدا 385px به سمت راست و مقدار دوم 5px به سمت پایین، مختصات نقطه ی شروع تصویر خواهد بود. اگر توضیح کمی گیج کننده بود به تصویر زیر نگاه کنید تا بهتر متوجه منظورم بشوید :

حال هر چه مقدار عرض  را افزایش دهید نقطه شروع به سمت راست حرکت خواهد کرد و هر چه مقدار طول را افزایش دهید نقطه ی شروع به سمت پایین حرکت خواهد کرد.

خب امیدوارم که از این آموزش نهایت استفاده رو برده باشید. اگر مشکلی در استفاده از این روش داشتید در بخش نظرات همین پست مطرح کنید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 43 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    خیلی خیلی خیلی ساده و با حال و کاربردی دمت گرم :)

  • ‏‏
    omid hajiloo(۱۷ دی ۱۳۹۲)

    😛 ممنونم

  • ‏‏

    سلام
    از آموزشتون تا الان توی چند تا قالب استفاده کردم خیلی مفیده فقط آیا امکان داره از این روش برای list-style هم استفاده کرد.

  • ‏‏
    اکبر قره باغی(۱۲ اردیبهشت ۱۳۹۳)

    ممنون

  • ‏‏

    دم شما گرم 😀

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram