पीएनजी छवियों को सीधे HTML में एकीकृत करना

पीएनजी छवियों को HTML में एम्बेड करना बाहरी फ़ाइल संदर्भ के बिना ब्राउज़र के भीतर सीधे प्रदर्शन की अनुमति देता है। इसे प्राप्त करने के लिए, बेस64 एन्कोडिंग तकनीक का उपयोग करें:

बेस64 पीएनजी छवि को एनकोड करें:

पीएनजी छवि को बेस64 स्ट्रिंग में बदलने के लिए ऑनलाइन एनकोडर का उपयोग करें। यह स्ट्रिंग टेक्स्ट प्रारूप में बाइनरी छवि डेटा का प्रतिनिधित्व करती है। छवि के लिए एक सीएसएस क्लास परिभाषित करें और यूआरएल() फ़ंक्शन और बेस 64 स्ट्रिंग का उपयोग करके पृष्ठभूमि-छवि संपत्ति सेट करें। उदाहरण के लिए:

div.image { चौड़ाई:100px; ऊँचाई:100px; पृष्ठभूमि-छवि:यूआरएल(डेटा:छवि/पीएनजी;बेस64,iVBORwA); }

छवि टैग विकल्प:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA);
}