يتم تضمين صورة خلفية البيانات في CSS Base64 جيدة أو سيئة الممارسة ؟

https://stackoverflow.com/questions/1124149

13-09-2019
|

سؤال

كنت أبحث في مصدر غرسمونكي userscript و لاحظت التالي في css:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

أنا أقدر أن سكريبت تريد أن حزمة أي شيء يمكن أن داخل المصدر بدلا تستضيف على خادم ، هذا واضح بما فيه الكفاية.ولكن منذ أن كنت لم أر هذه التقنية سابقا ، فكرت في استخدامه و يبدو جذابا لعدد من الأسباب:

وسوف تقلل من كمية طلبات HTTP على تحميل الصفحة ، وبالتالي تعزيز الأداء
إذا لا CDN, بعد ذلك سوف يقلل من كمية حركة المرور التي تم إنشاؤها من خلال ملفات تعريف الارتباط إرسالها جنبا إلى جنب مع الصور
ملفات CSS يمكن أن يكون مؤقتا
CSS يمكن أن تكون الملفات المضغوطة

معتبرا ذلك IE6 (على سبيل المثال) لديه مشاكل مع ذاكرة التخزين المؤقت إلى الصور الخلفية ، هذا يبدو أنه ليس أسوأ فكرة...

اذا هذا هو جيدة أو سيئة الممارسة ، لماذا لا يمكنك استخدامه وما هي الأدوات التي سوف تستخدم base64 في ترميز الصور ؟

تحديث - نتائج الاختبار

اختبار مع الصورة: http://fragged.org/dev/map-shot.jpg - 133.6 Kb
اختبار URL: http://fragged.org/dev/base64.html
مخصص CSS الملف:http://fragged.org/dev/base64.css - 178.1 كيلوبايت
GZIP ترميز جانب الخادم
حجم الناتج إرسالها إلى العميل (YSLOW مكونات الاختبار): 59.3 كيلوبايت
توفير البيانات التي يتم إرسالها إلى مستعرض العميل من: 74.3 كيلوبايت

جميل, ولكن سيكون أقل قليلا من المفيد أصغر الصور, أعتقد.

تحديث:بريان ماكواد, مهندس البرمجيات في جوجل ، والعمل على PageSpeed, وأعرب في ChromeDevSummit 2013 أن البيانات:محددات CSS يعتبر تجعل حجب لمكافحة نمط تقديم الحرجة/الحد الأدنى CSS أثناء حديثه #perfmatters: Instant mobile web apps.انظر http://developer.chrome.com/devsummit/sessions والحفاظ على ذلك في الاعتبار - الفعلية الشريحة

المحلول

إنها ليست فكرة جيدة عندما تريد أن يتم تخزين صور صورك وأسلوبها بشكل منفصل. أيضا إذا قمت بترميز صورة كبيرة أو عدد كبير من الصور في ملف CSS الخاص بك، فسوف يستغرق الأمر المستعرض لفترة أطول لتنزيل الملف الذي يترك موقعك دون أي من معلومات النمط حتى يكمل التنزيل. بالنسبة للصور الصغيرة التي لا تنوي تغييرها في كثير من الأحيان إذا كان من أي وقت مضى حل جيد.

بقدر ما توليد ترميز Base64:

http://b64.io/
http://www.motobit.com/util/base64-decoder-encoder.asp. (تحميل)
http://www.greywyvern.com/code/php/binary2base64. (من الرابط مع البرامج التعليمية الصغيرة تحتها)

نصائح أخرى

هذا الجواب هو خارج التاريخ و لا ينبغي أن تستخدم.

1) متوسط زمن الوصول هو أسرع بكثير على الهاتف المحمول في عام 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) HTTP2 السينمائية https://http2.github.io/faq/#why-is-http2-multiplexed

"محددات البيانات" بالتأكيد ينبغي أن يكون النظر في مواقع الجوال.HTTP الوصول عبر الشبكات الخلوية يأتي مع أعلى الكمون في طلب/الاستجابة.لذلك هناك بعض الحالات التي تستخدم فيها تشويش الصور الخاصة بك وكذلك البيانات في CSS أو HTML قوالب يمكن أن تكون مفيدة على الهاتف المحمول تطبيقات الويب.يجب استخدام مقياس على كل حالة على حدة-أنا لا أدعو إلى أن محددات البيانات ينبغي أن تستخدم في كل مكان في التطبيق المحمول على شبكة الإنترنت.

علما بأن متصفحات الجوال القيود على مجموع حجم الملفات التي يمكن تخزينها مؤقتا.حدود دائرة الرقابة الداخلية 3.2 كانت منخفضة جدا (25K في الملف) ، ولكن يتم الحصول على أكبر (100 ألف) على إصدارات أحدث من رحلات السفاري المحمول.لذلك تأكد من إبقاء العين على مجموع حجم الملف عندما بما في ذلك محددات البيانات.

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

إذا قمت بالإشارة إلى أن الصورة مرة واحدة فقط، لا أرى مشكلة في تضمينها في ملف CSS الخاص بك. ولكن بمجرد استخدام أكثر من صورة واحدة أو بحاجة إلى الرجوع إليها عدة مرات في CSS، قد تفكر في استخدام خريطة صورة واحدة بدلا من ذلك، يمكنك بعد ذلك اقتصاص صورتك الفردية من (انظر CSS العفاريت).

إحدى الأشياء التي أقترحها هي أن يكون لديك أوراق من أنماط منفصلة: واحد مع تعريفات النمط العادي وواحد آخر يحتوي على صورك في ترميز Base64.

يجب عليك تضمين ورقة الأنماط الأساسية قبل ورقة أنماط الصورة بالطبع.

بهذه الطريقة ستؤكد أنك تقوم بتنزيل ورقة أنماط منتظمة وتطبيقها في أقرب وقت ممكن للوثيقة، ولكن في الوقت نفسه تستفيد من انخفاض طلبات HTTP والفوائد الأخرى، تعطيك بيانات الفوائد الأخرى.

يضيف Base64 حوالي 10٪ إلى حجم الصورة بعد gzpeced لكن هذا يفوق الفوائد عندما يتعلق الأمر بالهاتف المحمول. نظرا لأن هناك اتجاه عام مع تصميم ويب مستجيب، يوصى بشدة.

توصي W3C أيضا بهذا النهج للجوال وإذا كنت تستخدم خط أنابيب الأصول في القضبان، فهذه ميزة افتراضية عند ضغط CSS الخاص بك

http://www.w3.org/tr/mwabp/#b-conserve-css-images.

لا أتفق مع التوصية لإنشاء ملفات CSS منفصلة للصور غير التحريرية.

على افتراض أن الصور لأغراض واجهة المستخدم، فإن تصميم طبقة العرض التقديمي، كما هو مذكور أعلاه، إذا كنت تقوم بعمل UI المتنقل فكرة جيدة للحفاظ على جميع التصميم في ملف واحد حتى يمكن تخزينها مؤقتا مرة واحدة.

في حالتي، تتيح لي تطبيق ورقة أنماط CSS دون القلق بشأن نسخ الصور المرتبطة، لأنها مدمجة بالفعل في الداخل.

حاولت تطبيق مفهوم CSS/HTML أداة محلل:

http://www.motobit.com/util/base64/css-images-to-base64.asp

يمكن أن:

تحميل و تحليل ملفات HTML/CSS, استخراج href/src/url العناصر
الكشف عن ضغط (gzip) و حجم البيانات على URL
مقارنة البيانات الأصلية الحجم ، base64 حجم البيانات و المضغوطة base64 حجم البيانات
تحويل رابط (صورة, الخط, css, ...) إلى base64 البيانات URI المخطط.
عد عدد من الطلبات التي يمكن أن تكون بمنأى عن طريق محددات البيانات

تعليقات/اقتراحات هي موضع ترحيب.

الانطونية

يمكنك تشفيرها في PHP :)

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

مصدر

جلب بعض الشيء لمستخدمي النص Sublime 2، هناك مكون إضافي يعطي رمز Base64 الذي نقوم بتحميل الصور في القديس.

يسمى image2base64: https://github.com/tm-minty/sublime-text-2-image2base64.

ملاحظة: لا تحفظ هذا الملف الذي تم إنشاؤه بواسطة البرنامج المساعد لأنه سيؤدي إلى الكتابة إلى الملف وستدمر.

شكرا للمعلومات هنا. أجد أن هذا التضمين مفيدا وخاصة بالنسبة للجوال خاصة مع ملف CSS المصنوع من الصور المضمنة مؤقتا.

للمساعدة في جعل الحياة أسهل، نظرا لأن محرر الملفات الخاص بي لا تتعامل مع هذا، فأنت بضعة برامج نصية بسيطة لعمل تحرير الكمبيوتر المحمول / سطح المكتب، حصة هنا في حالة وجود أي استخدام لأي شخص آخر. لقد علقت مع PHP لأنه يتعامل مع هذه الأشياء مباشرة وصيفة جيدة.

تحت ويندوز 8.1 قل ---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... هناك كمسؤول يمكنك إنشاء اختصار إلى ملف دفعي في طريقك. سيتصل الملف الدفعي بهذا البرنامج النصي PHP (CLI).

يمكنك بعد ذلك النقر بزر الماوس الأيمن فوق صورة في ملف Explorer، و SendTo The BatchFile.

طيب طلب admiinstartor، وانتظر نوافذ قذيفة القيادة السوداء لإغلاقها.

ثم مجرد لصق النتيجة من الحافظة في محرر النص الخاص بك ...

<img src="|">

أو

 `background-image : url("|")`

يجب أن تكون قابلة للتكيف مع نظام التشغيل الآخرين.

ملف دفعة ...

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

ومع php.exe في المسار الخاص بك، يستدعي البرنامج النصي PHP (CLI) ...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

بقدر ما كنت أبحثت،

استخدم: 1. عند استخدام SVG Sprite. 2. عندما تكون صورك من حجم أقل (200 ميجابايت كحد أقصى).

لا تستخدم: 1. عندما تكون صورا أكبر. 2. الرموز كما SVG. لأنها جيدة بالفعل و gzpeced بعد الضغط.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow