shift

کدگذاری تصاویر صفحه در فایل HTML بوسیله Base64

کدگذاری تصاویر صفحه در فایل HTML بوسیله Base64

عاطفه
دسته: طراحی وبسایت  تگ ها: کدگذاری بر مبنای 64 , Base64 encoding images , تصاویر بر مبنای 64 , چگونه تصاویر بر مبنای 64 بسازیم , Base64 encoding images for faster pages | Performance and seo factors

 

بسیاری از مردم از اینکه عکس‌ها را می‌توانند در بین کدهای HTML قرار دهند مطلع نیستند. روشی که در آن این کار انجام می‌شود کدگذاری بر مبنای 64 نامیده می‌شود. تصاویر با کدگذاری بر مبنای 64 بخشی از HTML شده‌اند و بدون بارگذاری شدن نمایش داده می‌شوند، در عوض مرورگر وب تصاویر را دانلود می‌کند.


مبنای 64 یا Base64 چیست؟

کدگذاری کردن چیزی، در HTML یک روش قدیمی است (اولین بار در سال 1987 ارائه شد). این‌یک راه تبدیل انواع مختلفی از داده‌ها به یک سری از حروف و اعداد است که در HTML محفوظ هستند. یک نوع از این داده‌ها تصاویر هستند.


کدگذاری تصاویر بر مبنای 64

یک تصویر بزرگ را در بالا می‌بینید. این عکس بر مبنای 64 کدگذاری شده است. آیکون‌هایی را نیز در سمت راست می‌بینید. آن‌ها نیز بر مبنای 64 کدگذاری شده‌اند. من برای این سایت از تصاویر بر مبنای 64 استفاده کرده‌ام و دلیل اصلی که صفحات من سریع بارگذاری می‌شوند همین است.


استفاده از Base64

برای بردن یک عکس بر مبنای 64 می‌توانید ازابزاری که من برای این هدف ساخته‌ام استفاده کنید Base64 image encoder. یا می‌توانید عبارت کدگذاری تصاویر بر مبنای 64" را جستجو کنید. ابزارهای بسیاری برای این کار وجود دارد.


چگونه مبنای 64 به‌سرعت صفحات کمک می‌کند؟

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

  1. HTML
  2. CSS
  3. اولین تصویر
  4. دومین تصویر

 


اینجا یک صفحه وب دیگر با تصاویر بر مبنای 64 وجود دارد. این صفحه برای بارگذاری تنها به دو چیز نیاز دارد.

  1. HTML
  2. CSS


تأثیر Base64 بر سئو چگونه است؟

تأثیر اصلی که تصاویر Base64 بر سئو می‌گذارد این است که تصاویر توسط گوگل شناخته نمی‌شوند. به این معنی که تصاویری که شما بر مبنای 64 استفاده کردید توسط جستجوی تصاویر گوگل نمایش داده نمی‌شوند و یا همچنین در موتورهای جستجوی دیگر نیز نمایش داده نمی‌شوند.


پس چرا از آن استفاده می‌کنیم؟

بسیاری از تصاویری که در صفحه شما وجود دارد مهم نیستند و اگر آن‌ها شناخته نشوند تأثیری بر روی ترافیک شما ندارند. بهترین مثال می‌تواند آیکون‌های اجتماعی باشد، تعداد آن‌ها کم است مانند Twitter، Google+، Facebook و غیره.
تصاویر واقعاً کوچک هستند و نیاز به شناخته شدن ندارند. شما هرگز از ترافیک آیکون کوچک توییتر سود نمی‌برید. در مورد تصاویری که فقط برای طراحی استفاده می‌شوند مانند «دکمه پایین»، «نقل‌قول» فکر کنید، چیزهایی شبیه به این‌ها برای سئو مهم نیستند؛ اما سرعت بارگذاری صفحاتتان را کم می‌کنند. درهروب سایت 8 تا 12 آیکون اجتماعی وجود دارد که هرکدام از آن‌ها یک درخواست را به HTTP می‌فرستند درحالی‌که اگر شما از Base64 استفاده کنید نیاز نیست که آن‌ها دانلود شوند.


سایر ملاحظات

بهتر است که تنها برای تصاویر کوچک از Base64 استفاده کنیم. اگر شما سعی می‌کنید که تصاویر بزرگ را بر مبنای 64 بیاورید آنگاه شما با یک مقدار بزرگی کد در HTML روبرو هستید که مزیت عملکرد Base64 را از دست می‌دهید.


چگونه در این سایت از Base 64 استفاده کرده‌ایم؟

همان‌طور که ذکر شد من از Base64 به مقدار گسترده استفاده کرده‌ام. هر صفحه در این سایت به‌طور وسیع از Base64 استفاده‌شده است. ازآنجاکه من برای مدت طولانی از Base64 برای بسیاری از تصاویر استفاده کرده‌ام یاد گرفته‌ام که چگونه بین موضوع سئو و عملکرد تعادل برقرار کنم.


چگونه گوگل Base64 را شناسایی می‌کند؟

همان‌طورکه قبلاً ذکرشد گوگل تصاویرکدگذاری شده برمبنای 64 را نمی‌تواند بشناسد. دراین مقاله چندعکس بزرگ وجود دارد. همه آن‌ها توسط گوگل شناسایی‌شده‌اند.

چگونه من این کار را انجام دادم؟

یک‌راه این است که یک پوشه تصاویر که همه تصاویر آن کدگذاری شده‌اند را داشته باشید، سپس شما آن را روی هاست خود آپلود کنید، در قسمت HEAD در HTML از نشانه‌های Opengraph برای جهت‌دهی گوگل به آن تصاویر استفاده کنید.

اینجا کدهایی را که در قسمت HEAD در HTML این صفحه آورده‌ام را قرار داده‌ام.

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope itemtype="http://schema.org/Article">
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://shift.ir/pagespeed/images/base64-image.png">

در بخش اول این کدهای به‌هم‌ریخته، Opengraph ها آورده شده‌اند و در بخش آخر تصویر معرفی‌شده است، نتیجه این کار این است که تصاویر من در گوگل شناخته‌شده است.

<meta property="og:image" content="https://shift.ir/pagespeed/images/base64-image.png">


مسائل مربوط به‌اندازه

نتیجه کدگذاری یک فایل عکس 2kb بر مبنای 64 2.5 یا 3kb است. بااین‌حال اگر شما باید فایلتان را فشرده کنید. در پایان سایزی در حدود همان سایز فایل عکس به دست می‌آورید. من توصیه نمی‌کنم که برای عکس‌های بزرگ‌تر از 5kb از کدگذاری بر مبنای 64 استفاده کنید.


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

یک عکس معمولی در HTML شما وجود دارد.
مکان فایل (به‌طور مثال Example.com) را با اطلاعات SRC به‌دست‌آمده از ابزار Base64 جایگزین کنید. اکنون منبع عکس شما از یک فایل خارجی دیگری نیست در عوض آن، داده‌های کدگذاری شده در SRC قرار دارد.


ابزار

برای تست کار با Base64، لطفاً از ابزار رایگان base64 image encoder tool استفاده کنید.
 

نظر خود را بنویسید...
ارسال نظر
لغو