दिलचस्प पोस्ट
विभिन्न ब्राउज़र में यूआरएल की अधिकतम लंबाई क्या है? एक दिन एक तारीख को जोड़ना दो समान वस्तुओं एक दूसरे के बराबर क्यों नहीं हैं? जांचें कि मान जावास्क्रिप्ट में ऑब्जेक्ट है या नहीं कई इकाई फ़्रेमवर्क में कई को डालें / अपडेट करें मैं यह कैसे करुं? क्या jQuery के स्क्रीन के शीर्ष पर "गलत पासवर्ड" बार की तरह "संदेश बार" प्रदर्शित करने के लिए प्लगइन है? छवि के क्लिक करने योग्य क्षेत्र एंड्रॉइड में TextView के फ़ॉन्ट को बदलने के लिए कैसे करें पोस्ट json शब्दकोश LINQ लैम्ब्डा में कई तालिकाओं के बीच जुड़ने के लिए कैसे करें त्रुटि: इवेंटलेट इंस्टॉल करते समय कमांड 'जीसीसी' एक्जिट स्टेटस 1 में विफल हुआ वस्तु क्षेत्र के आधार पर एक सरणी क्रमबद्ध करें एंड्रॉइड केवल उन संपर्कों के साथ एक कर्सर प्राप्त करते हैं, जिनमें एक ईमेल सूचीबद्ध है> android 2.0 उत्तरदायी छवि संरेखण केंद्र बूटस्ट्रैप 3 एक डबल घुमाएगी इसे एक इंटर्न (जावा) में बदल दें

पृष्ठभूमि छवि डेटा को सीएसएस में Base64 अच्छा या बुरा अभ्यास के रूप में एम्बेड करना है?

मैं एक ग्रीसम्मीकी यूज़रस्क्रिप्ट के स्रोत को देख रहा था और अपने सीएसएस में निम्नलिखित को देखा:

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

मैं सराहना कर सकता हूं कि एक greasemonkey स्क्रिप्ट किसी सर्वर पर होस्ट करने के विरोध में स्रोत के भीतर कुछ भी बंडल करना चाहती है, यह स्पष्ट है कि पर्याप्त है लेकिन जब से मैंने इस तकनीक को पहले नहीं देखा था, मैंने इसका उपयोग माना और यह कई कारणों के लिए अपील करता है:

  1. इससे पृष्ठ लोड पर HTTP अनुरोधों की मात्रा कम हो जाएगी, इस प्रकार प्रदर्शन को बढ़ाया जाएगा
  2. यदि कोई सीडीएन नहीं है, तो यह छवियों के साथ भेजे जा रहे कुकीज़ के माध्यम से उत्पन्न यातायात की मात्रा को कम करेगा
  3. सीएसएस फ़ाइलों को कैश्ड किया जा सकता है
  4. सीएसएस फ़ाइलों को GZIPPED किया जा सकता है

यह देखते हुए कि IE6 (उदाहरण के लिए) पृष्ठभूमि छवियों के लिए कैश में समस्या है, ऐसा लगता है कि यह सबसे खराब विचार नहीं है …

तो, यह एक अच्छा या बुरा अभ्यास है, आप इसका उपयोग क्यों नहीं करेंगे और बेस 64 एन्कोड करने के लिए आप उपकरण किस उपकरण का उपयोग करेंगे?

अपडेट – परीक्षण के परिणाम

  • छवि के साथ परीक्षण: http://img.hiwab.com/css/map-shot.jpg – 133.6 केबी

  • परीक्षण यूआरएल: http://fragged.org/dev/base64.html

  • समर्पित सीएसएस फ़ाइल: http://fragged.org/dev/base64.css – 178.1 केबी

  • GZIP एन्कोडिंग सर्वर साइड

  • परिणामस्वरूप ग्राहक को भेजा गया आकार (वाईएसएलओयू घटकों का परीक्षण): 59.3 केबी

  • के क्लाइंट ब्राउज़र को भेजी गई डेटा की बचत: 74.3 केबी

अच्छा, लेकिन छोटे चित्रों के लिए यह थोड़ा कम उपयोगी होगा, मुझे लगता है।

अद्यतन करें: ब्रायन मैककाडे, Google पर एक सॉफ्टवेयर इंजीनियर, पेजस्पीड पर काम कर रहे हैं, जो ChromeDevSummit 2013 में व्यक्त किया गया है: डेटा: सीएसएस में #perfmatters: Instant mobile web apps अपनी चर्चा #perfmatters: Instant mobile web apps दौरान महत्वपूर्ण / न्यूनतम सीएसएस देने के लिए एक प्रति-अवरोध विरोधी पैटर्न माना जाता है #perfmatters: Instant mobile web apps । Http://developer.chrome.com/devsummit/sessions देखें और इसे ध्यान में रखें – वास्तविक स्लाइड

Solutions Collecting From Web of "पृष्ठभूमि छवि डेटा को सीएसएस में Base64 अच्छा या बुरा अभ्यास के रूप में एम्बेड करना है?"

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

जहाँ तक base64 एन्कोडिंग उत्पन्न करना:

यह उत्तर पुराना है और इसका उपयोग नहीं किया जाना चाहिए।

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 पहुंच प्रति अनुरोध / प्रति उत्तर अधिक विलंबता के साथ आता है। इसलिए कुछ ऐसे उपयोग के मामले हैं जहां सीएसएस या एचटीएमएल टेम्प्लेट में डेटा के रूप में आपकी छवियों को ठेस करना मोबाइल वेब एप्लिकेशन पर फायदेमंद हो सकता है। आपको केस-बाय-केस आधार पर उपयोग को मापना चाहिए – मैं यह नहीं कह रहा हूं कि किसी मोबाइल वेब ऐप में डेटा यूआरआई का उपयोग हर जगह किया जाना चाहिए।

ध्यान दें कि मोबाइल ब्राउज़र की कुल आकार की फ़ाइलों पर सीमाएं हैं जिन्हें कैश्ड किया जा सकता है। आईओएस 3.2 की सीमाएं बहुत कम थीं (प्रति फ़ाइल 25K), लेकिन मोबाइल सफारी के नए संस्करणों के लिए बड़े (100K) हो रहे हैं इसलिए डेटा यूआरआई को शामिल करते समय अपने कुल फ़ाइल आकार की नज़र रखना सुनिश्चित करें

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

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

जिन चीजों का मैं सुझाव देता हूं उनमें से एक में दो अलग-अलग स्टाइलशीट हैं: एक अपनी नियमित शैली की परिभाषाओं में और दूसरा, जिसमें आपकी छवि बेस 64 एन्कोडिंग में है

आपको पाठ्यक्रम की छवि स्टाइलशीट से पहले मूल स्टाइलशीट को शामिल करना होगा।

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

बेस 64 GZipped के बाद छवि आकार में लगभग 10% जोड़ता है, लेकिन यह मोबाइल की बातों के मुकाबले लाभ के कारण अधिक है। चूंकि उत्तरदायी वेब डिज़ाइन के साथ एक समग्र प्रवृत्ति है, इसलिए इसे अत्यधिक अनुशंसित किया जाता है।

डब्ल्यू 3 सी ने मोबाइल के लिए इस दृष्टिकोण की सिफारिश की है और यदि आप रेल में परिसंपत्ति पाइपलाइन का उपयोग करते हैं, तो यह आपकी सीएसएस को संपीड़ित करते समय एक डिफ़ॉल्ट विशेषता है

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

मैं गैर-संपादकीय छवियों के लिए अलग सीएसएस फ़ाइलों को बनाने के लिए सिफारिश के साथ असहमत हूं।

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

मेरे मामले में यह मुझे सीएसएस स्टाइलशीट लागू करने की इजाजत देता है बिना संबंधित छवियों की प्रतिलिपि बनाने के बारे में चिंता किए, क्योंकि वे पहले से ही अंदर एम्बेड किए गए हैं

मैंने सीएसएस / एचटीएमएल विश्लेषक टूल की एक ऑनलाइन अवधारणा बनाने की कोशिश की:

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

यह:

  • HTML / CSS फ़ाइलों को डाउनलोड और पार्स करें, href / src / url तत्व निकालें
  • URL पर संपीड़न (gzip) और आकार डेटा का पता लगाएं
  • मूल डेटा आकार, बेस 64 डेटा आकार और जीज़िप बेस 64 डेटा आकार की तुलना करें
  • यूज़एल (छवि, फ़ॉन्ट, सीएसएस, …) को बेस 64 डेटा यूआरआई योजना में कनवर्ट करें।
  • उन अनुरोधों की संख्या की गणना करें जो डेटा यूआरआई द्वारा बच सकते हैं

टिप्पणियाँ / सुझावों का स्वागत है

एन्टोनिन

आप इसे 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); ?> 

स्रोत

सब्लाइम टेक्स्ट 2 के उपयोगकर्ताओं के लिए थोड़ा सा लाने के लिए, एक प्लगइन है जो बेस 64 कोड देता है जो हम एसटी में छवियों को लोड करते हैं।

बुलाया Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

पुनश्च: कभी भी इस फ़ाइल को प्लगइन द्वारा उत्पन्न न करें क्योंकि यह फ़ाइल को अधिलेखित करेगा और नष्ट कर देगा।

यहां जानकारी के लिए धन्यवाद मुझे यह एम्बेडिंग उपयोगी और विशेष रूप से मोबाइल के लिए एम्बेडेड छवियों 'सीएसएस फाइल कैश्ड होने के साथ मिल रहा है।

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

विंडोज 8.1 के तहत कहें —

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

… वहां एक प्रशासक के रूप में आप अपने रास्ते में एक बैच फ़ाइल के लिए शॉर्टकट स्थापित कर सकते हैं। वह बैच फ़ाइल एक php (cli) स्क्रिप्ट को कॉल करेगी।

फिर आप फ़ाइल एक्सप्लोरर में एक छवि पर राइट क्लिक कर सकते हैं, और बैटफ़ाइल को भेजें।

ठीक है 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. एसवीजी के रूप में प्रतीक जैसा कि वे पहले से ही अच्छे हैं और संपीड़न के बाद gzipped