ایجاد: ۱۰:۰۸ ۱۳۹۱/۷/۱۲
ویرایش: ۳:۰۵ ۱۳۹۴/۴/۱۲

آموزش‌ها

»

همه چیز درباره داده‌ها و تصاویر 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 اضافی برای لود فونت، یک خاصیت مهم این کار این است که مانع چشمک‌زدن متن قبل و بعد از لود فونت می‌شود.
یادداشت‌های مرتبط
  1. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
  2. تولید کپچای ضد گلوله!
  3. نکاتی برای افزایش سرعت و کارآمدی سایت
  4. حذف درخواست اضافه تصویر انیمیشن لودینگ
  5. ادیتورهای محتوای غنی‌شده برای صفحات وب
  6. همه چیز درباره کش(cache) سمت سرور و کاربر
  7. بهینه سازی و کاهش حجم تصاویر برای استفاده در صفحات وب
  8. کلید خارجی (Foreign Key) ، محاسن و معایب آن
  9. زوم (zoom) و بزرگنمایی تصویر و متن با جاوا اسکریپت و پی اچ پی
  10. کار با تصاویر در سمت کاربر
  11. هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)
  12. بهینه سازی آنلاین سی‌اس‌اس و جاوا اسکریپت

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام آموزش‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: