استفاده از تصاویر base64 در طراحی سایت

در این مقاله به بررسی تبدیل تصاویر به فرمت base64 و فواید استفاده از آنها در طراحی سایت خواهیم پرداخت. همچنین به معرفی افزونه Web Essential برای Visual Studio خواهیم پرداخت.

مقالات مرتبط

در این مقاله به بررسی تبدیل تصاویر به فرمت base64 و فواید استفاده از آنها در طراحی سایت خواهیم پرداخت. همچنین به معرفی افزونه Web Essential برای Visual Studio خواهیم پرداخت.

معرفی افزونه Web Essential برای Visual Studio

افزونه Web Essential قابلیتهای گوناگون بسیاری که سالها جای خالی آنها در Visual Studio حس میشد را به این پلتفرم قدرتمند اضافه میکند.

بعد از نصب این افزونه هنگام کد نویسی CSS، HTML، Javascript، TypeScript، CoffeeScript و یا LESS متوجه ابزارهای پیشرفته و کار راه انداز مختلفی خواهید شد که لذت کد نویسی با این زبانها را دوچندان میکنند.

برای نصب Web Essential کافی است به منوی Tools در Visual Studio مراجعه کرده و گزینه Extensions and updates را انتخاب کنید و در پنجره باز شده Web Essential را جستجو و نصب کنید. در نهایت Visual Studio باید ریستارت شود. همچنین شما میتوانید به صورت مستقیم آن را از لینک زیر دانلود کنید:

Web Essentials

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

ابتدا بهتر است کمی در رابطه با اینکه base64 چیست توضیح داده شود. از base64 برای ذخیره و انتقال داده binary بر روی مدیاهای متنی استفاده میشود. به طور خلاصه فرضاً شما میتوانید یک عکس که فرمت binary دارد را به صورت متنی در یک فایل txt ذخیره کنید.

سوالی که هم اکنون مطرح میباشد این هست که استفاده از base64 چه فوایدی در طراحی سایت دارد؟ در پاسخ باید عرض کنم که به طور مثال زمانی که شما از یک تصویر binary برای تصویر زمینه یک صفحه وب استفاده میکنید این تصویر هر بار که آن صفحه لود میشود باید دوباره بارگذاری شود. البته میدانم که الان خیلی از شما خواهید گفت که با اعمال تنظیمات client cache در سرور میتوان کاری کرد که بروزر کاربر اقدام به دانلود فایل نکند و از فایل ذخیره شده در cache بروزر استفاده کند و بنده هم با شما موافقم اما در این صورت نیز همچنان بروزر باید درخواست دانلود عکس را به سرور بفرستد و سرور بررسی کند که آیا تصویر موجود در cache بروزر تغییر کرده یا نه.

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

برای نشان دادن تاثیر استفاده از تصاویر base64 به تصویر متحرک زیر که مربوط به استفاده از تصاویر binary میباشد توجه کنید، همانطور که ملاحظه میکنید بروزر در هر بار refresh صفحه درخواست دانلود تصویر زمینه را ارسال میکند.

استفاده از تصاویر binary و درخواست بروزر برای دانلود تصویر در هر refresh

تبدیل تصاویر باینری به base64

تبدیل تصاویر به base64 به لطف web essential بسیار ساده است کافی است که در ادیتور css نشانه گر ماوس خود را روی آدرس فایل باینری ببرید تا یک smart tag باز شود و سپس گزنیه Embed as base64 dataUri را انتخاب کنید. مانند تصویر زیر:

smart tag تبدیل تصاویر باینری به base64

پس از تبدیل تصویر باینتری به base64 استایل شما به این صورت خواهد شد:

استایل تصویر زمینه پس از تبدیل به base64

در تصویر بالا هر دو نوع استایل مربوط به تصویر زمینه را میبینید که اولی base64 میباشد و دومی همان تصویر باینری میباشد اما با این تفاوت که یک ستاره قبل از آن قرار دارد و این یک ترفند برای IE6 و IE7 هست. با استفاده از web essential شما حتی میتوانید پیشنمایش تصاویر base64 را نیز در ادیتور css مشاهده کنید:

پیش نمایش تصوایر base64 بواسطه web essential

با کامپایل مجدد پروژه و مشاهده صفحه وب در بروزر متوجه خواهید شد که درخواستی از سوی بروزر برای تصویر زمینه به سرور فرستاده نمیشود:

عدم ارسال درخواست دانلود تصویر پس از استفاده از تصاویر base64 توسط بروزر

در هر زمان که لازم دیدید میتوانید تصاویر base64 را به تصاویر باینری با استفاده از web essential تبدیل کنید کافی است در گزنیه های smart tag اینبار گزینه save to file را انتخاب کنید.

ذخیره تصاویر base64 به صورت باینری

امیدوارم این مقاله مورد پسند شما واقع شده باشد و در آینده از ترفندهای مورد بحث این مقاله در پروژه های طراحی سایت خود بهره ببرید. لطفاً ما را از نظرات خود محروم نفرمایید.