क्या मुझे सीएसएस या HTML में डेटा / बेस 64 के रूप में छवियों को एम्बेड करना चाहिए

131

सर्वर पर संख्या अनुरोधों को कम करने के लिए मैंने कुछ चित्र (PNG & SVG) को BASE64 के रूप में सीधे css में एम्बेड किया है। (इसकी निर्माण प्रक्रिया में स्वचालित)

इस तरह:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

क्या यह अच्छा अभ्यास है? क्या इससे बचने के कुछ कारण हैं? क्या कुछ प्रमुख ब्राउज़र हैं जिनके पास डेटा url समर्थन नहीं है?

बोनस प्रश्न: क्या सीएसएस और जेएस के लिए भी ऐसा करने का कोई मतलब है?

html css base64

— Meo
स्रोत

1

बहुत से लोग IE7 का उपयोग नहीं करते हैं और सभी डाउनसाइड के लिए वास्तव में अच्छा उल्टा है - कम छवि फ़ाइलों को प्रबंधित करने के लिए! यानी यदि आपको किसी पेड़ के घटक के लिए विशेष रेखाएँ खींचने की आवश्यकता है तो सीएसएस में छोटी कोहनी की छवियों को दोहराने-एक्स या रिपीट-वाई के संयोजन से एम्बेड करना सुनिश्चित करता है कि अतिरिक्त छवि फ़ाइलों को सही जगह पर रखने की आवश्यकता बहुत कम है (बहुत कम के साथ) इस उपयोग के मामले के लिए ओवरहेड)

— डेवअल्गर

153

क्या यह अच्छा अभ्यास है? क्या इससे बचने के कुछ कारण हैं?

यह एक अच्छा अभ्यास है जो आमतौर पर केवल बहुत छोटी सीएसएस छवियों के लिए होता है जो एक साथ उपयोग किए जाने वाले होते हैं (जैसे सीएसएस स्प्राइट्स) जब IE संगतता कोई फर्क नहीं पड़ता, और अनुरोध को सहेजना cacheability से अधिक महत्वपूर्ण है।

इसमें उल्लेखनीय संख्याएँ हैं:

IE6 और 7 में बिल्कुल काम नहीं करता है।
IE8 में केवल 32k आकार तक संसाधनों के लिए काम करता है । यह वह सीमा है जो बेस 64 एनकोडिंग के बाद लागू होती है। दूसरे शब्दों में, अब 32768 अक्षर नहीं हैं।
यह एक अनुरोध बचाता है, लेकिन इसके बजाय HTML पेज को ब्लास्ट करता है! और छवियों को अस्वीकार्य बनाता है। वे हर बार लोड हो जाते हैं जिसमें युक्त पेज या स्टाइल शीट लोड हो जाती है।
बेस 64 एनकोडिंग ब्लोट्स इमेज साइज को 33% बढ़ाती है।
यदि एक gzipped संसाधन में सेवा दी जाती है, तो data:चित्र लगभग निश्चित रूप से सर्वर के संसाधनों पर एक भयानक तनाव होने वाले हैं! आकार में बहुत कम कमी के साथ, छवियां पारंपरिक रूप से संपीड़ित करने के लिए गहन सीपीयू हैं।

— पेका
स्रोत

2

@meo दिलचस्प बिंदु। मुझे उम्मीद है कि यह gzip प्रदर्शन के लिए खराब है, क्योंकि आमतौर पर छवियां बहुत पहले से ही बहुत अच्छी तरह से संकुचित होती हैं। उन्हें संपीड़ित करने से एकल-अंक प्रतिशत लाभ के लिए सीपीयू स्थान की भयानक राशि खर्च होती है। एक JPG फाइल को जिप करने की कोशिश करें और आप देखेंगे कि आपका क्या मतलब है। मैं जवाब में है कि संपादित करेंगे

— Pekka

1

मुझे पता है कि संकुचित चित्रों को जिप करना जाने का तरीका नहीं है। लेकिन मैं सोच रहा था कि शायद बेस 64 पर इसका अधिक प्रभावी है। विशेषकर जब आपके पास स्रोत में एक से अधिक छवि हो।

— मेओ

2

@meo nope, यह किसी भी परिस्थिति में base64 पर अधिक प्रभावी नहीं होगा, क्योंकि अंतर्निहित पैटर्न अभी भी संपीड़ित छवि डेटा होगा जो बस base64 अंकन में व्यक्त होने के लिए होता है।

— पेका

1

@meo आह, मैं देख रहा हूँ। IE में यह बिल्कुल भी काम नहीं करेगा, और इसमें एक ही कैचेबिलिटी की समस्या है: आप एक अनुरोध सहेजते हैं, लेकिन हर पेज अनुरोध आकार में बढ़ता है। यह आमतौर पर एक सीएसएस में सब कुछ कॉम्पैक्ट करने के लिए बेहतर है, और एक जेएस फाइल

— पक्का

5

जब आप सीएसएस फ़ाइल में छवियों को एम्बेड कर रहे हों तो यह HTML पेज को ब्लोट नहीं करता है क्योंकि यह प्रश्न इंगित करता है।

— डैनियल दाढ़ी

38

कानूनी कारणों के एक सेट के लिए यहां आम जवाबों से लगता है कि इसकी जरूरत नहीं है। हालांकि, ये सभी आधुनिक एप्लिकेशन व्यवहार और निर्माण प्रक्रिया की उपेक्षा करते हैं।

यह असंभव नहीं है (और वास्तव में काफी आसान है) एक सरल प्रक्रिया को डिजाइन करना जो एक फ़ोल्डर छवियों के माध्यम से चलेगा और इस फ़ोल्डर की सभी छवियों के साथ एक एकल सीएसएस उत्पन्न करेगा।

यह सीएसएस पूरी तरह से कैश किया जाएगा और नाटकीय रूप से सर्वर पर गोल यात्रा को कम करेगा, जो कि @MemeDeveloper द्वारा सबसे बड़ी प्रदर्शन हिट्स में से एक है।

ज़रूर, यह हैक है। इसमें कोई शक नहीं। जैसा कि प्रेत एक हैक है। सही दुनिया में इसकी आवश्यकता नहीं होगी, तब तक, यदि आपको इसे ठीक करने की आवश्यकता है, तो यह एक संभव अभ्यास है:

कई छवियों वाले पृष्ठ, जो आसानी से "स्प्रिचुअल" नहीं हैं।
सर्वर के लिए राउंड ट्रिप एक वास्तविक अड़चन है (मोबाइल सोचो)।
गति (मिलीसेकंड स्तर तक) वास्तव में आपके उपयोग के मामले के लिए महत्वपूर्ण है।
आप IE5 और IE6 के बारे में परवाह नहीं करते हैं (जैसा कि आपको चाहिए, अगर आप चाहते हैं कि वेब आगे बढ़े)।

मेरे विचार।

— JAR.JAR.beans
स्रोत

4

इस पर अधिक ध्यान दिया जाना चाहिए। अन्य उत्तर थोड़े अप्रचलित हैं- IE6 के बारे में बात करते हैं जबकि IE8 इन दिनों अप्रचलित है ... (और इसके लिए धन्यवाद)

— हर्ट्जेल गिनीज

11

यह एक अच्छा अभ्यास नहीं है। कुछ ब्राउज़र डेटा यूआरआई (जैसे IE 6 और 7) का समर्थन नहीं कर रहे हैं या समर्थन सीमित है (उदाहरण के लिए IE8 के लिए 32KB)।

डेटा यूआरआई नुकसान के पूर्ण विवरण के लिए यह विकिपीडिया लेख भी देखें:

डेटा यूआरआई योजना

नुकसान

डेटा URI को उनके दस्तावेज़ों (जैसे CSS या HTML फ़ाइलों) से अलग से कैश नहीं किया जाता है, इसलिए डेटा को हर बार डाउनलोड किया जाता है जिसमें युक्त दस्तावेज़ बेकार हो जाते हैं।

हर बार बदलाव किए जाने पर सामग्री को फिर से एन्कोडेड किया जाना चाहिए और फिर से एम्बेड किया जाना चाहिए।

संस्करण 7 के माध्यम से इंटरनेट एक्सप्लोरर (जनवरी 2011 के अनुसार बाजार का लगभग 15%), समर्थन का अभाव है।

इंटरनेट एक्सप्लोरर 8 डेटा यूआरआई को अधिकतम 32 केबी तक सीमित करता है।

डेटा को एक सरल स्ट्रीम के रूप में शामिल किया गया है, और कई प्रसंस्करण वातावरण (जैसे वेब ब्राउज़र) मेटाडेटा, डेटा कम्प्रेशन, या सामग्री वार्ता जैसे अधिक जटिलता प्रदान करने के लिए कंटेनरों (जैसे कि multipart/alternativeया तो message/rfc822) का उपयोग करने का समर्थन नहीं कर सकते हैं ।

बेस 64-एनकोडेड डेटा यूआरआई उनके बाइनरी समकक्ष की तुलना में आकार में 1/3 बड़ा है। (हालांकि, यह ओवरहेड 2-3% तक कम हो जाता है यदि HTTP सर्वर gzip का उपयोग करके प्रतिक्रिया को संकुचित करता है)

डेटा यूआरआई सामग्री को फ़िल्टर करने के लिए सुरक्षा सॉफ़्टवेयर के लिए अधिक कठिन बनाते हैं।

— मार्टिन बुबर्ल
स्रोत

3

सीएसएस हर अनुरोध पर फिर से डाउनलोड किया जाता है? यह एक नया है! इसके अलावा, यदि आपने कभी अपने जीवन में एक फ़ाइल संग्रहीत की है, तो आपने देखा होगा कि संपीड़न दर 2-3% नहीं है! अगर मैं गलत नहीं हूं, तो मैंने पहली बार yahoo.com पर इस तकनीक को लागू किया है। ... स्पष्ट रूप से अच्छा अभ्यास नहीं है!

— स्टीफन नच

@StefanNch ऐसा नहीं है जो यह कहता है। अंश में, "युक्त दस्तावेज़" सीएसएस फ़ाइल को संदर्भित करता है।

— क्रिस्टोफ

9

मैं लगभग एक महीने के लिए डेटा-यूरी का उपयोग कर रहा था, और Ive ने केवल उनका उपयोग करना बंद कर दिया क्योंकि उन्होंने मेरी स्टाइलशीट को बहुत बड़ा बना दिया था।

IE6 / 7 में डेटा-यूरी का काम करते हैं (आपको बस उन ब्राउज़र में एक mhtml फ़ाइल की सेवा करने की आवश्यकता है)।

डेटा-यूरी का उपयोग करने से मुझे जो लाभ हुआ, वह यह था कि मेरी पृष्ठभूमि की छवियाँ स्टाइलशीट डाउनलोड होते ही प्रदान की गई थीं, धीरे-धीरे लोड होने के कारण हम अन्यथा देखते हैं

यह अच्छा है कि हमारे पास यह तकनीक उपलब्ध है, लेकिन मैं भविष्य में इसका उपयोग नहीं करूंगा। मैं इसे आज़माने की सलाह देता हूं, हालांकि आप अपने लिए जानते हैं

— stephenmurdoch
स्रोत

3

मैं छवियों को संयोजित करने और अनुरोधों को सहेजने के लिए सीएसएस स्प्राइट्स का उपयोग करने के लिए अधिक इच्छुक हूं। मैंने कभी भी बेस 64 तकनीक की कोशिश नहीं की है, लेकिन यह जाहिरा तौर पर IE6 और IE7 में काम नहीं करता है। इसका अर्थ यह भी है कि यदि कोई भी चित्र बदलता है तो आपको पूरी तरह से खोई हुई चीजों को फिर से वितरित करना होगा, जब तक कि आपके पास कई सीएसएस फाइलें न हों।

— स्टीव क्लेरिज
स्रोत

मेरे पास पहले से ही स्प्राइट हैं, मैं सोच रहा था कि क्या मैं इसे उस विधि के साथ और भी बेहतर बना सकता हूं।

— Meo

2

मुझे सामान्य सर्वोत्तम प्रथाओं के बारे में कोई पता नहीं है लेकिन मैं किसी के लिए भी उस तरह की चीज नहीं देखना चाहूंगा, अगर मैं उसकी मदद कर सकूं। :)

वेब ब्राउज़रों और सर्वरों में कैशिंग सामानों का एक पूरा भार होता है, इसलिए मैंने सोचा होगा कि आपका सबसे अच्छा दांव सिर्फ आपके सर्वर को क्लाइंट को छवि फ़ाइलों को कैश करने के लिए कहना है। जब तक आप एक पेज पर वास्तव में छोटी छवियों का भार नहीं उठाते हैं, तब तक मुझे नहीं लगता था कि कई अनुरोधों के ओवरहेड उस बड़ी बात थी। ब्राउज़र आमतौर पर बहुत सारी फ़ाइलों का अनुरोध करने के लिए एक ही कनेक्शन का उपयोग करेंगे ताकि कोई नया नेटवर्क कनेक्शन स्थापित न हो, जब तक कि HTTP हेडर के माध्यम से यातायात की मात्रा छवि फ़ाइलों के आकार की तुलना में महत्वपूर्ण नहीं है, मैं कई अनुरोधों के बारे में बहुत अधिक चिंता नहीं करूंगा। ।

क्या कारण हैं कि आपको लगता है कि इस समय सर्वर में बहुत सारे अनुरोध हैं?

— क्रिस
स्रोत

4

अनुरोधों की संख्या सबसे बड़ी हिट में से एक है, यदि आप अपनी पहली चीज़ की देखभाल करने और उससे निपटने की कोशिश करते हैं। yahoo का डेवलपर देखें ।yahoo.com/performance/rules.html "बदले में घटकों की संख्या कम करने से पृष्ठ को रेंडर करने के लिए आवश्यक HTTP अनुरोधों की संख्या कम हो जाती है। यह तेज़ पृष्ठों की कुंजी है।"

— मेमेवेदर

0

मैं इसे उन छोटी छवियों के लिए सुझाऊंगा जिनका उपयोग अक्सर किया जाता है, उदाहरण के लिए एक वेब एप्लिकेशन के सामान्य आइकन।

टिनी, क्योंकि बेस 64 एन्कोडिंग आकार बढ़ाता है
अक्सर उपयोग किया जाता है, क्योंकि यह लंबे प्रारंभिक लोड समय को सही ठहराता है

निश्चित रूप से पुराने ब्राउज़रों के साथ समर्थन की समस्याओं को ध्यान में रखा जाना चाहिए। इसके अलावा, यह एक अच्छा विचार हो सकता है कि किसी फ्रेमवर्क की क्षमता का उपयोग करने के लिए छवियों को स्वचालित रूप से डेटा डेटा जैसे कि GWT के ClientBundle या इनलाइन तत्व की शैली में सीधे जोड़ने के बजाय CSS कक्षाओं का उपयोग करें।

अधिक जानकारी यहां एकत्र की गई है: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/

— सेबस्टियन
स्रोत