पारदर्शी छवि के लिए संभव सबसे छोटा डेटा URI छवि

125

मैं पृष्ठभूमि छवि के साथ पारदर्शी 1x1 छवि का उपयोग कर रहा हूं, स्प्राइट्स का उपयोग करने में सक्षम होने के लिए और अभी भी कुछ आइकन के लिए वैकल्पिक पाठ प्रदान करता हूं।

मैं HTTP अनुरोधों की संख्या को कम करने के लिए छवि के लिए एक डेटा यूआरआई का उपयोग करना चाहता हूं, लेकिन पारदर्शी छवि बनाने के लिए सबसे छोटा संभव स्ट्रिंग क्या होगा ?

मुझे पता है कि मैं डेटा यूआरआई का उपयोग कर सकता हूं: स्प्राइट्स के बजाय वास्तविक छवियों के लिए, लेकिन जब सब कुछ सीएसएस में रखा जाता है, तो इसे बिखेरने के बजाय बनाए रखना आसान होता है।

css css-sprites

— जैकब रस्क
स्रोत

1

कैशिंग सेटअप के साथ वास्तविक 1x1 छवि का उपयोग करना बेहतर नहीं होगा? आपके पास अधिक http अनुरोध नहीं हैं, और कुल डेटा में छवि के लिए url ओवरहेड डेटा URI के 78 बाइट्स से छोटा हो सकता है।

— Redzarf

1

@Redzarf: वास्तव में, नहीं यह शायद बेहतर नहीं होगा। छोटे, शायद ही कभी बदलते संसाधन पृष्ठ लोड समय को फ़ाइल आकार के कारण नहीं बल्कि HTTP अनुरोध के गोल यात्रा के कारण प्रभावित करते हैं। एक और सूक्ष्मता यह है कि अधिकांश ब्राउज़र अन्य संसाधनों की तुलना में CSS को कैशिंग करने के बारे में अधिक आक्रामक हैं, इसलिए ब्राउज़र अधिक http दौर यात्राओं को सहेजते हुए ताज़ा सीएसएस (और इस तरह से एम्बेडेड) के साथ प्रयोग करने की संभावना कम है।

— एकलकरण

167

विभिन्न पारदर्शी GIF के साथ खेलने के बाद, कुछ अस्थिर होते हैं और सीएसएस ग्लिच का कारण बनते हैं। उदाहरण के लिए, यदि आपके पास एक है <img>और आप संभवतया सबसे पारदर्शी पारदर्शी GIF का उपयोग करते हैं, तो यह ठीक काम करता है, हालांकि, यदि आप चाहते हैं कि आपका पारदर्शी GIF एक है background-image, तो यह असंभव है। किसी कारण से, कुछ GIF जैसे कि निम्नलिखित सीएसएस पृष्ठभूमि (कुछ ब्राउज़रों में) को रोकते हैं।

कम (लेकिन अस्थिर - 74 बाइट्स)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

मैं थोड़ा लंबा और अधिक स्थिर संस्करण का उपयोग करने की सलाह दूंगा:

By स्थिर ⇊ (लेकिन थोड़ा लंबा - 78 बाइट्स)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

एक और टिप के रूप में, जैसा image/gifकि एक टिप्पणी से पता नहीं चलता है। यह कई ब्राउज़रों में टूट जाएगा।

— Layke
स्रोत

1

+1 धन्यवाद! मैंने देखा कि यह काम में आता है। मैंने इस प्लगइन को बनाने के लिए आपके डेटा का उपयोग किया है इसलिए मैं उत्तरदायी प्रकार की छवियों को मूल रूप से पृष्ठभूमि कवर के साथ या समाहित कर सकता हूं-> github.com/sebringj/jquery-transparent-gif/blob/master/…

— जेसन सेब्रेशन

1

छोटा एक "अस्थिर" क्यों है? मैं देखता हूं कि यह कभी-कभार एक काली छवि का कारण बनता है, अगर कोई जानता है तो मैं बहुत उत्सुक हूं।

— jvenema

बहुत दर्द के बाद मैंने वास्तव में पाया है कि "छोटा" संस्करण वास्तव में पुराने एंड्रॉइड ब्राउज़र (एचटीसी वन एस, ओएस 4.1) पर मेरी साइट पर कुछ (सभी नहीं) पृष्ठों पर ब्राउज़र को क्रैश कर रहा था।

— WebSeed

महान जवाब लेकिन अभी तक संभव सबसे छोटा नहीं ।

— जोश हबदास

22

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

अंतिम लंबाई इस बात पर निर्भर करती है कि इसके साथ क्या हुआ है।

— एड्रिया
स्रोत

3

एसवीजी का उपयोग करने के खिलाफ कोई तर्क हैं? कोई भी मामला जहां यह एक अच्छा विचार नहीं है?

— कांपना

एक एसवीजी कई मामलों के लिए ठीक है, लेकिन जब width: auto;एक एसवीजी के साथ संयुक्त होता है , तो यह अपने माता-पिता की चौड़ाई पर ले जाएगा। एक स्थिर छवि जैसे कि GIF या PNG, जब एक निश्चित ऊंचाई और चौड़ाई ऑटो दी जाती है, तो इसका पहलू अनुपात बरकरार रहेगा।

— स्नेज़ज़ीबौच

16

मुझे लगता है कि यह एक संकुचित पारदर्शी 1x1 GIF फ़ाइल (82 बाइट्स) होनी चाहिए:

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

Dopiaza.org डेटा के साथ उत्पन्न : URI जनरेटर ।

— KARASZI इस्तवान
स्रोत

14

सबसे छोटा पीएनजी - 114 बाइट्स:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

— joshcarr
स्रोत

यह ध्यान देने योग्य है कि यह आसानी से GIMP का उपयोग करने योग्य है। परिणामस्वरूप फ़ाइल का आकार 68 बाइट्स (सबसे छोटा संभव, अब तक) होगा।

— इस्माईल मिगुएल

@ अमिनाहनुरैनी यह पीएनजी है।

— 23

2

@AminahNuraini: इस उत्तर के बारे में आपके लिए "SVG" क्या कहता है?

— in पर ऑर्बिट

10

यह व्यक्ति GIF युक्ति के माध्यम से समस्या को तोड़ता है। transparent.gif37 बाइट्स के लिए उसका समाधान होगा:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

वह पहले पारदर्शिता को हटाकर और भी छोटा होता चला जाता है, फिर रंग तालिका ...

GIF89a विनिर्देश

हैडर (6 बाइट्स)

बाइट्स "GIF" और संस्करण संख्या से मिलकर बनता है, जो आमतौर पर है 89a।
तार्किक स्क्रीन डिस्क्रिप्टर (7 बाइट्स)
बहुत अधिक विस्तार में जाने के बिना, फ़ाइल का यह खंड निम्नलिखित इंगित करता है:
- फ़ाइल आकार में 1x1 पिक्सेल है।
- एक वैश्विक रंग तालिका है।
- वैश्विक रंग तालिका में 2 रंग हैं, दूसरे का उपयोग पृष्ठभूमि रंग के रूप में किया जाना चाहिए।
वैश्विक रंग तालिका (6 बाइट्स)

क्रमशः 3 बाइट्स प्रति रंग, लाल, हरे और नीले रंग के लिए एक बाइट। हमारी फाइल में, पहला रंग सफेद है और दूसरा रंग काला है।
ग्राफिक कंट्रोल एक्सटेंशन (8 बाइट्स)

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

जीआईएफ फ़ाइल वास्तव में इसके भीतर कई "चित्र" हो सकती है, जो आपको छवि के कुछ हिस्सों के लिए छवि डेटा निर्दिष्ट करने से रोकती है, जिसमें पृष्ठभूमि रंग के समान रंग होता है। प्रत्येक छवि ब्लॉक में समग्र छवि आकार के भीतर एक स्थिति और आकार होता है। उपरोक्त फ़ाइल में, स्थिति 0,0 है और आकार 1x1 है।
छवि डेटा (5 बाइट्स)

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

3B( ;ASCII में) के हेक्स मान के साथ एक एकल बाइट GIF के अंत को इंगित करता है।

एक पारदर्शी GIF के लिए आवश्यक संरचनाओं के आधार पर, यह पता चला है कि 43 बाइट्स छोटे के करीब हैं जितना आप प्राप्त कर सकते हैं।

लेकिन, मैं इसे थोड़ा छोटा करने के लिए एक चाल का पता लगाने में कामयाब रहा। यह मानक में उल्लिखित है कि यह वैश्विक रंग तालिका के लिए वैकल्पिक है। बेशक, यह अपरिभाषित है कि क्या होता है जब आप एक जीआईएफ को बिना रंग की मेज पर बनाते हैं।

जब आपके पास एक रंग तालिका सूचकांक पारदर्शी के रूप में परिभाषित होता है, हालांकि, जीआईएफ डिकोडर्स को यह ध्यान नहीं रहता है कि वास्तव में रंग तालिका नहीं है।

इसलिए मैंने यह बताने के लिए तार्किक स्क्रीन डिस्क्रिप्टर को बदल दिया कि कोई वैश्विक रंग तालिका नहीं थी और तालिका को हटा दिया गया, कुल छह बाइट्स बचाए, फ़ाइल का आकार मात्र 37 बाइट्स तक ला दिया।

दिलचस्प बात यह है कि, Wordpress ने मुझे GD के त्रुटि संदेशों की एक सुंदर सूची दी है जिसमें कहा गया है कि यह एक वैध GIF फ़ाइल नहीं है, इस तथ्य के बावजूद कि फ़ायरफ़ॉक्स और GIMP दोनों खुले और प्रदर्शन (यह पारदर्शी होने पर "प्रदर्शित होता है?) बस ठीक।

इसे और भी छोटा बनाने के लिए, मैंने चित्र में सबसे बड़े शेष "वैकल्पिक" ब्लॉक को देखा, ग्राफिक कंट्रोल एक्सटेंशन। यदि आपको पारदर्शिता की आवश्यकता नहीं है, तो इस ब्लॉक की आवश्यकता नहीं है, और यह एक और 8 बाइट्स हैं जो आप दूर ले जा सकते हैं।

स्रोत: द टिनीस्ट जीआईएफ एवर ।

— mckamey
स्रोत

1

उस लेख के अनुसार, 37 बाइट भिन्नता अपरिभाषित व्यवहार पर निर्भर करती है, और वास्तव में लेखक का उल्लेख है कि वर्डप्रेस की छवि पार्सर इसे संभाल नहीं सकती है। हालांकि यह संभवतः अधिकांश ब्राउज़रों पर काम करेगा, मैं इसे जोखिम भरा विकल्प मानूंगा। मैं उसी लेख से 43 बाइट भिन्नता के साथ रहना चाहता हूँ,। उस का एक प्रकार पहले से ही ऊपर पोस्ट किया गया है । शीर्ष उत्तर

— ब्रायन

9

आप निम्न SVG डेटा (60 बाइट्स) आज़मा सकते हैं:

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

स्टैंडअलोन svg फ़ाइल की तरह दिखेगा (62 बाइट्स):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

यह सभी देखें:

— kenorb
स्रोत

2

मई भी जा इनकोडिंग और एक फ़ेविकॉन या सीएसएस में इस्तेमाल किया contentसंपत्ति।

— जोश हबडास

6

यह सबसे छोटा मैंने पाया है (26 बाइट्स):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

— KarasQ
स्रोत

यह IE11 में काला आता है।

— tomasz86

4

एक खाली छवि प्राप्त करने के लिए मैं निम्नलिखित डेटा uri का उपयोग कर रहा हूं: //:0

— Jurgis
स्रोत

फ़ायरफ़ॉक्स 44 और इंटरनेट एक्सप्लोरर 11 में img ऑल्ट टैग दिखाया गया है। आपको या तो उपरोक्त में से एक का उपयोग करना होगा या Alt टैग को हटाना होगा

— PersyJack

यह अधिक कुशल है कि एक छवि के लिए एक अनुरोध / प्रतिक्रिया?

— एनयू एवरेस्ट

हालांकि मान्य नहीं होगा

— लुसियान डेविदस्कु

0

खाली छवि के लिए:

data:null

(इसमें अनुवाद होगा src=(unknown))

— T.Todua
स्रोत

मैं इस सिद्धांत को पसंद करता हूं, लेकिन w3c सत्यापनकर्ता व्यवहार में अनुमोदन नहीं करता है: त्रुटि: खराब मूल्य डेटा: तत्व img पर विशेषता src के लिए अशक्त: URI का समयपूर्व अंत।

— ब्रेननियॉन्ग