همه چیز درباره داده ها و تصاویر Inline درون برنامه ای

تصاویر و برخی محتویات ارائه شونده توسط CSS, JS, HTML را می‌توان به صورت آدرس آن درج کرد و براوزر کاربر، پس از دریافت این کد، تصویر مربوطه را از آدرسش درخواست می‌کند.

html, css:
<img alt="test" src="test.jpg" />
<div style="background-image:url(example.png);"><div>
js:
window.open('test.html');

اما علاوه بر این کار، می‌توان بجای درج آدرس عکس، دیتای تشکیل دهنده خود عکس را ذکر کرد تا بدون درخواست اضافه، تصویر نمایش داده شود که به این تکنیک Data URI و به این تصاویر Inline image گفته می‌شود:

html, css:
<img src="data:image/gif;base64,R0lGODlhNAAQAKIHAIQKhNkPNzgQ2fbw97FksRTfFNas1v///yH5BAEAAAcALAAAAAA0ABAAAAPtCAoz8qLBeAZR5ujNuzdAxi2MA0nncS2i53Zgq5HoU0eD0gDE62+NQYdmshUFh5jm0jAMDM4KVPOUPZtQZ1C4rXSVSQaIqFOFOLHcouttUINhEXNMuPRABLxwk1bUA4ABDQWEBTc7BDtiPDMlJDJxahqBggOFhkdCK2tgTGGMMCE5PQeUg4WHFXZzZ2ZcGB+ioKaWqJlXmotyDJ+kaLKkW1xwwmGkCsaNirC/TqBs0MQYFxl0dsZ4qtXAk4ENtCuJZmufa2pCGKORs94DtDQaBnV7MVBcU1JOU7j4tO/kLsD8GFiq3b8yAVsR/JEAADs=" alt="test">
background: white url('data:image/gif;base64,R0lGODlhNAAQAKIHAIQKhNkPNzgQ2fbw97FksRTfFNas1v///yH5BAEAAAcALAAAAAA0ABAAAAPtCAoz8qLBeAZR5ujNuzdAxi2MA0nncS2i53Zgq5HoU0eD0gDE62+NQYdmshUFh5jm0jAMDM4KVPOUPZtQZ1C4rXSVSQaIqFOFOLHcouttUINhEXNMuPRABLxwk1bUA4ABDQWEBTc7BDtiPDMlJDJxahqBggOFhkdCK2tgTGGMMCE5PQeUg4WHFXZzZ2ZcGB+ioKaWqJlXmotyDJ+kaLKkW1xwwmGkCsaNirC/TqBs0MQYFxl0dsZ4qtXAk4ENtCuJZmufa2pCGKORs94DtDQaBnV7MVBcU1JOU7j4tO/kLsD8GFiq3b8yAVsR/JEAADs=') no-repeat scroll left top;
js:
window.open('data:text/html;charset=utf-8,%3C%21DOCTYPE%20' +
  'html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%' +
  '3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhead%' +
  '3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0A' +
  '%3C%2Fhtml%3E%0A%0D%0A','_blank','height=300,width=400');

آیا همه براوزرها اینگونه تصاویر و محتویات را ساپورت می‌کنند؟

فقط براوزرهای قدیمی آن را ساپورت نمی‌کنند و الا اپرا، سافاری، فایرفاکس و کروم که اکثر کاربران از آنها استفاده می‌کنند و همچنین نسخه‌های IE8 به بعد آن را ساپورت می‌کنند که با استفاده از conditional css می‌توان برای ie های قدیمی، تصاویر را به صورت آدرس بارگذاری کرد یا اینکه با کمک htaccess برای براوزرهای قدیمی، طبق این مطلب css خاص آنها را بارگزاری کرد. این مطلب نیز به روش بسیار زیبایی برای تشخیص پشتیبانی شدن/نشدن dataURI پرداخته و روش جالبی برای جایگزین تصویر در براوزر قدیمی ارائه کرده است.

محاسن این کار چیست؟

یکی از محاسن مهم این کار، کاهش تعداد درخواست است (درست مثل css sprite) که این امر نقش موثری در بهینه‌سازی سایت و سرعت آن دارد.
همچنین در صورتی که یک صفحه از https استفاده کند، لازم است سایر تصاویر و محتواهای خارجی از https بارگذاری شود (و الا کاربر با هشدار کاهش امنیت مواجه می‌شود) و با توجه به اینکه بارگذاری محتواها از طریق ssl موجب بار اضافی در سرور می‌گردد، یکی از فواید استفاده از data uri ها مشخص می‌شود.
همچنین افزودن تصاویر با این روش به ایمیل‌ها، ساده‌تر از ضمیمه کردن آن به عنوان attach به نظر می‌رسد.

آیا معایبی هم دارد؟

بله. حجم داده‌ی کدشده به روش base64 حدود 33 درصد از حجم باینری آن بیشتر است (هرچند با فعال بودن gzip این افزایش به 3 درصد می‌رسد) و این امر باعث می‌شود که این روش عمدتا برای تصاویر کوچک مورد استفاده قرار گیرد نه یک تصویر باکیفیت 1 مگابایتی!
همچنین به دلیل تغییر ساختار تصویر، پس از هر بار تغییر در آن، لازم است که مجددا base64_encode آن تولید شود (البته می‌توان این کار را با استفاده از تابع انتهای این مطلب، به صورت آنلاین انجام داد هرچند پرفرمنس پایین‌تری دارد)
در خصوص کش شدن هم؛ تصاویری که به صورت inline در css درج شده باشند، به دلیل کش شدن css کش می‌شوند اما تصاویری که در سورس صفحه html در تگ IMG قرار داده شده باشند، با این روش کش نمی‌شوند.

روش تولید این داده‌ها

کد این تصاویر را می‌توان با base64_encode کردن محتوای آن تصاویر به دست آورد:

<?php
function data_uri($file){
    $contents = file_get_contents($file);
    $base64 = base64_encode($contents);
    return 'data:' . mime_content_type($file) . ';base64,' . $base64;
}
?>
<img src="<?php echo data_uri('elephant.png');?>" alt="test" />

اما سرویس‌های متعدد آنلاینی هم برای این کار وجود دارد از جمله:

نکته: استفاده از dataURI جدیدا برای فونت هم مرسوم شده که مقاله Font-Face and Base64 Data-URI را می‌توانید در این زمینه بخوانید.
بجز کم شدن request اضافی برای لود فونت، یک خاصیت مهم این کار این است که مانع چشمک‌زدن متن قبل و بعد از لود فونت می‌شود.

یادداشت‌های مرتبط

علیرضا معظمی

مشاوره و اجرای پروژه‌های خاص طراحی و برنامه‌نویسی وب

آموزش‌ها

همه چیز درباره داده ها و تصاویر Inline درون برنامه ای

آیا همه براوزرها اینگونه تصاویر و محتویات را ساپورت می‌کنند؟

محاسن این کار چیست؟

آیا معایبی هم دارد؟

روش تولید این داده‌ها

مدیریت

یادداشت‌های کوتاه فنی تخصصی

آموزش‌هایی برای ارتقاء فنی سایت و سرور

تبلیغات

ربات‌های تلگرامی:

دامنه‌های فروشی: