data URI

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

ساده ترین روش برای تبدیل یک عکس به فرمت data URI استفاده از converter های آنلاین مثل http://dopiaza.org/tools/datauri می باشد. بعد از تبدیل عکس به فرمت data URI باید خروجی کدگذاری شده را که به صورت متن می باشد، با مقدار صفت src در تگ <img> و یا مقدار تابع url() در دستورات CSS جایگزین کرد.

یکی از معایب استفاده از عکس ها برای bullet لیست های نامرتب این است که این عکس ها نیاز دارند که توسط مرورگر دانلود شوند و علاوه بر این باید یک درخواست اضافی نیز برای دانلود این عکس به سرور ارسال شود. در صورت استفاده از یک یا تعداد کمی عکس مشکلی نیست اما در صورت استفاده از تعداد زیادی عکس این موضوع می تواند باعث افزایش تعداد درخواست های ارسالی به سرور و سنگین شدن وب سایت گردد. با استفده از data URI میتوان این مشکل را برطرف کرد.

مثال :

<style>
   ul{
      list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUh..."); /* red square */
   }
</style>

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li>list item 3</li>
   <li>list item 4</li>
</ul>

مرورگرهای IE6,7 از data URI پشتیبانی نمی کنند و در مثال فوق به جای data URI مقدار پیش فرض square را برای لیست های نامرتب اعمال می کنند. تمام متن مربوط به data URI مورد استفاده باید همگی در یک خط و پشت سرهم قرار بگیرند، در غیر اینصورت خروجی مورد نظر به دست نخواهد آمد.

تنها عیب این روش این است که قابلیت خوانایی پایینی برای انسان دارد. بنابراین بهتر است به منظور مشخص کردن عکس مورد استفاده یک comment در انتهای دستور قرار دهیم.