در ابتدا شما را با الگوریتم base64 آشنا کرده و سپس به بررسی مزایا و معایب استفاده از این الگوریتم برای کدگذاری تصاویر در صفحات وب می پردازیم. در انتها نیز به عنوان یک مثال، روش انجام این کار را در زبان php آموزش خواهیم داد.
Base64 چیست؟
الگوریتم انکودینگ Base64 در اصل به منظور انکودینگ داده های باینری به فرمت متنی ایجاد شد. انکودینگ Base64 ابتدا در سیستم های ایمیل که نیاز به پیوست داده های باینری همچون تصویر و اسناد متنی داشتند استفاده شد. چرا که این نوع پیوست ها بایستی به فرمت اسکی (ASCII) ارسال می شد. مجموعه کاراکتری انکودینگ Base64 Base64 حاوی یک مجموعه کاراکتری از کاراکترهای اسکی قابل چاپ می باشد. ۶۲ مقدار اصلی در تمام انواع انکودینگ Base64 یکسان می باشد که شامل کاراکترهای زیر میباشد : کاراکترهای حروف بزرگ زبان انگلیسی A تا Z کاراکترهای حروف کوچک زبان انگلیسی a-z اعداد ۰ تا ۹ کاراکتر های موجود در ایندکس ۶۲ و ۶۳ بر اساس نوع انکودینگ متفاوت می باشد. این کاراکترها شامل + / , – _ . : ! ~ می باشد.
جدول زیر کاراکترهای نسخه اصلی Base64 را نشان می دهد :
استفاده از base64 برای inline کردن عکس از base64 برای encode کردن باینری به متن استفاده می شود. با استفاده از این تکنیک این امکان وجود دارد که هر عکسی را به صورت داده های متنی ذخیره کنیم. یعنی به جای بار کردن عکسی که به فرمت باینری در سرور قرار گرفته، آنرا همراه با سند html و به صورت رشته ی انکود شده به مرورگر ارسال می کنیم.
به عبارت ساده تر، در حالت عادی برای لود هر عکس یک درخواست http به سرور ارسال می گردد. با استفاده از انکود کردن تصویر با الگوریتم base64، دیگر این درخواست اضافی به سرور ارسال نخواهد شد! چرا که خود تصویر به صورت کد شده و همراه با سند html به مرورگر ارسال می شود.
شاید بپرسید که فرآیند تبدیل این رشته ی کد شده به تصویر گرافیکی چگونه انجام می شود؟
در پاسخ باید گفت که تمامی مرورگرها این کار را به صورت خودکار انجام می دهند.
تأثیر Base64 بر سئو چگونه است؟
با استفاده از تکنیک inline کردن عکس ها می توانید از تعداد درخواستها به سرور برای بارگذاری یک صفحه بکاهید که این امر در هنگام وجود تعداد زیادی کاربر همزمان در سایت به دلیل پایین آوردن زمان پاسخگویی سرور یا همان response time بسیار مفید خواهد بود. این امر در سئوی سایت شما تاثیر بسزایی دارد، چرا که اگر تصاویر زیادی در یک صفحه از وبسایت شما لینک و لود شوند، از رتبه ی سایت شما کاسته می شود. در نقطه ی مقابل این حسن عیب زیر نیز وجود دارد:
تصاویری که با این روش انکود می شوند، دیگر توسط گوگل شناخته نمی‌شوند. به این معنی که تصاویری که شما بر مبنای 64 استفاده کردید توسط جستجوی تصاویر گوگل و یا همچنین در موتورهای جستجوی دیگر نمایش داده نمی‌شوند.
چرا Base64؟
فرض کنید شما یک داده ی باینری دارید و می خواهید آن را در بستر شبکه انتقال دهید. به طور کلی شما این کار را تنها از طریق Stream کردن بیت ها و بایت های خام انجام نخواهید داد. چرا؟ زیرا ابزارهایی برای Stream کردن متن وجود دارد. شما هرگز اطلاع ندارید که برخی از پروتکل ها ممکن است داده های باینری شما را به عنوان کاراکترهای کنترلی تفسیر کنند و یا برخی دیگر از پروتکل ها همانند FTP ممکن است تصور کنند که شما یک کاراکتر خاص مانند ending را وارد کرده اید. بنابراین برای مقابله با این مشکلات داده های باینری را به رشته ای از کاراکترها کد گذاری (encode) می کنند. Base64 یکی از انواع روش های کد گذاری می باشد.
با استفاده از آن شما می توانید همواره بر ۶۴ کاراکتری که در اغلب مجموعه کاراکترها (character set) ارائه می شود حساب کنید و بنابراین از نحوه ی صحیح نمایش داده های خود در سمت گیرنده اطمینان حاصل کنید.
کدام تصاویر برای انکود کردن مناسب اند؟
بسیاری از تصاویری که در صفحه شما وجود دارد مهم نیستند و اگر آن‌ها شناخته نشوند تأثیری بر روی ترافیک شما ندارند. بهترین مثال می‌تواند آیکون‌های اجتماعی باشد که در سایت خودتان استفاده می کنید. این تصاویر واقعاً کوچک هستند و نیاز به شناخته شدن ندارند. این موضوع در مورد تصاویری که فقط برای طراحی استفاده می‌شوند هم صدق می کند. زیرا این تصاویر هم برای سئو مهم نیستند.
بهتر است که تنها برای تصاویر کوچک از Base64 استفاده کنیم. اگر شما سعی می‌کنید که تصاویر بزرگ را با base64 انکود کنید، با سند HTML بزرگی روبرو خواهید شد.
چگونه از Base64 استفاده کنیم؟
تنها کافیست تا مقدار خاصیت src تگ img خود را به محتویات بدست آمده از ابزار Base64 جایگزین کنید. ابزار برای تست Base64 روی تصاویرتان، می توانید از ابزار رایگان base64 image_url encoder tool استفاده کنید.
مشکل کش
دقت نمایید که وقتی عکس به صورت فایل در یک صفحه لود شود، مرورگر می تواند آن عکس را کش کرده و برای دفعات بعد برای بارگذاری عکس به سرور درخواستی ارسال نکند و عکس را از کش بارگذاری کند. در نتیجه همه ی کاربران جدید که وارد صفحه مورد نظر می شوند برای بارگذاری عکس به سرور request ارسال می کنند ولی کاربران تکراری برای لود عکس از حافظه کش خودشان استفاده می کنند. ولی وقتی از تکنیک inline کردن عکس استفاده می کنید، مرورگر آن عکس را کش نمی کند و هر بار برای لود عکس باید کاراکترهای base64 درون HTML را بخواند.
در نتیجه برای عکس هایی که در صفحات گوناگون استفاده می شوند، استفاده از این تکنیک پیشنهاد نمی شود. توجه داشته باشید که اگر عکسی به صورت base64 به عنوان تصویر پس زمینه در CSS آمده باشد، به دلیل کش شدن فایلهای CSS توسط مرورگرها، آن عکس نیز کش خواهد شد.
