🛠️

Whiz Tools

Build • Create • Innovate

બેઝ64 છબી ડિકોડર અને દર્શક | બેઝ64ને છબીઓમાં રૂપાંતરિત કરો

બેઝ64-એન્કોડેડ છબી સ્ટ્રિંગ્સને તરત જ ડિકોડ અને પૂર્વદર્શન કરો. JPEG, PNG, GIF અને અન્ય સામાન્ય ફોર્મેટ્સને સમર્થન આપે છે અને અમાન્ય ઇનપુટ માટે ભૂલ સંભાળવામાં આવે છે.

બેસ64 છબી ડીકોડર અને દર્શક

બેસ64-એન્કોડેડ છબી સ્ટ્રિંગ પેસ્ટ કરો અને તેને ડીકોડ કરીને છબી જુઓ.

છબી પૂર્વાવલોકન

દર્શાવવા માટે કોઈ છબી નથી. તેને આપોઆપ ડીકોડ કરવા માટે બેસ64 સ્ટ્રિંગ પેસ્ટ કરો.

JPEG, PNG, GIF અને અન્ય સામાન્ય છબી ફોર્મેટ્સને સપોર્ટ કરે છે.

હુકમો

1. ઉપરના ટેક્સ્ટ વિસ્તારમાં બેસ64-એન્કોડેડ છબી સ્ટ્રિંગ પેસ્ટ કરો.

2. તમે ટાઇપ કરતા જ છબી આપોઆપ ડીકોડ થશે, અથવા 'છબી ડીકોડ કરો' બટન પર ક્લિક કરો.

3. ડીકોડ કરેલી છબી નીચેના પૂર્વાવલોકન વિસ્તારમાં દેખાશે.

નોંધ: શ્રેષ્ઠ પરિણામો માટે, સ્ટ્રિંગ 'data:image/' થી શરૂ થવું જોઈએ, પરંતુ ટૂલ આ પ્રિફિક્સ વિના સ્ટ્રિંગ્સને ડીકોડ કરવાનો પ્રયાસ કરશે.

📚

દસ્તાવેજીકરણ

Base64 છબી ડિકોડર અને દર્શક

પરિચય

Base64 એ બિનરીથી ટેક્સ્ટ એનકોડિંગ યોજના છે જે બિનરી ડેટાને ASCII સ્ટ્રિંગ ફોર્મેટમાં પ્રતિનિધિત્વ કરે છે. તે સામાન્ય રીતે HTML, CSS, JavaScript, JSON અને અન્ય ટેક્સ્ટ આધારિત ફોર્મેટ્સમાં છબીના ડેટાને સીધા સમાવી લેવા માટે ઉપયોગમાં લેવામાં આવે છે જ્યાં બિનરી ડેટા સીધા સમાવેશ કરવામાં આવતું નથી. આ સાધન તમને base64-એન્કોડેડ છબીની સ્ટ્રિંગને ડિકોડ કરવા અને પરિણામે મળતી છબીઓને સીધા તમારા બ્રાઉઝરમાં જોવા માટેની મંજૂરી આપે છે.

Base64 એનકોડિંગ મૂળ બિનરીની સરખામણીમાં ડેટા કદને લગભગ 33% વધારવા માટે જવાબદાર છે, પરંતુ તે છબીઓને ટેક્સ્ટ આધારિત દસ્તાવેજોમાં સીધા સમાવેશ કરવાની મંજૂરી આપે છે જે અલગ ફાઇલ ડાઉનલોડ કરવાની જરૂર નથી. આ નાના છબીઓ જેમ કે આઇકોન, લોગો, અથવા સરળ ગ્રાફિક્સ માટે ખાસ ઉપયોગી હોઈ શકે છે જ્યાં એમ્બેડિંગની સુવિધા કદની વધારાની સરખામણીમાં વધુ મહત્વપૂર્ણ છે.

અમારો Base64 છબી ડિકોડર સાધન એક સરળ ઇન્ટરફેસ પ્રદાન કરે છે જ્યાં તમે base64-એન્કોડેડ છબીની સ્ટ્રિંગને પેસ્ટ કરી શકો છો અને તરત જ ડિકોડ કરેલી છબી જોઈ શકો છો. તે JPEG, PNG, GIF, WebP, અને SVG સહિતની તમામ સામાન્ય છબીની ફોર્મેટ્સને સપોર્ટ કરે છે, અને તે ડેટા URL ફોર્મેટ (જેમાં data:image/... પૂર્વસૂચક છે) અને કાચા base64 સ્ટ્રિંગ્સ બંનેને સંભાળે છે.

ટેકનિકલ વિગતો

Base64 એનકોડિંગ ફોર્મેટ

Base64 એનકોડિંગ બિનરી ડેટાને 64 ASCII અક્ષરો (A-Z, a-z, 0-9, +, અને /) ના સમૂહમાં રૂપાંતરિત કરે છે, જેમાં = પેડિંગ માટે ઉપયોગમાં લેવાય છે. વેબ પર છબીઓ માટે, base64 ડેટા સામાન્ય રીતે નીચેના માળખામાં ડેટા URL તરીકે ફોર્મેટ કરવામાં આવે છે:

1data:[<media type>][;base64],<data>
2

ઉદાહરણ તરીકે, એક base64-એન્કોડેડ PNG છબી આવી દેખાય છે:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

આ ફોર્મેટના ઘટકો છે:

  • data: - URL યોજના
  • image/png - ડેટાનો MIME પ્રકાર
  • ;base64 - એનકોડિંગ પદ્ધતિ
  • , - હેડર અને ડેટા વચ્ચેનો વિભાજક
  • વાસ્તવિક base64-એન્કોડેડ ડેટા

ડિકોડિંગ પ્રક્રિયા

જ્યારે base64 છબીની સ્ટ્રિંગને ડિકોડ કરવામાં આવે છે, ત્યારે નીચેના પગલાં થાય છે:

  1. સ્ટ્રિંગને પાર્સ કરવામાં આવે છે કે તે ડેટા URL પૂર્વસૂચક ધરાવે છે કે નહીં તે ઓળખવા માટે
  2. જો પૂર્વસૂચક હોય, તો છબીના ફોર્મેટને નક્કી કરવા માટે MIME પ્રકારને કાઢવામાં આવે છે
  3. base64 ડેટાનો ભાગ અલગ કરવામાં આવે છે અને બિનરી ડેટામાં ડિકોડ કરવામાં આવે છે
  4. બિનરી ડેટાને Blob અથવા ઓબ્જેક્ટ URL માં રૂપાંતરિત કરવામાં આવે છે જે છબી તરીકે દર્શાવવામાં આવી શકે છે

જો ઇનપુટમાં ડેટા URL પૂર્વસૂચક ન હોય, તો ડિકોડર તેને કાચા base64 ડેટા તરીકે માન્ય રાખવાનો પ્રયાસ કરે છે અને ડિકોડ કરેલી બિનરી હેડર પરથી છબીના પ્રકારને અનુમાન કરે છે અથવા PNG પર ડિફોલ્ટ કરે છે.

સમર્થિત છબીના ફોર્મેટ્સ

આ સાધન તમામ સામાન્ય વેબ છબીના ફોર્મેટ્સને સપોર્ટ કરે છે:

ફોર્મેટMIME પ્રકારસામાન્ય ઉપયોગ કેસ
JPEGimage/jpegફોટા, ઘણા રંગો સાથેની જટિલ છબીઓ
PNGimage/pngપારદર્શિતા જરૂરી હોય તેવા છબીઓ, સ્ક્રીનશોટ, ગ્રાફિક્સ
GIFimage/gifસરળ એનિમેશન, મર્યાદિત રંગોની છબીઓ
WebPimage/webpJPEG/PNG કરતા વધુ સારી સંકોચન સાથેનો આધુનિક ફોર્મેટ
SVGimage/svg+xmlવેક્ટર ગ્રાફિક્સ, સ્કેલેબલ આઇકોન અને ચિત્રો

ઉપયોગ કેસ

Base64-એન્કોડેડ છબીઓમાં વેબ વિકાસ અને અન્યમાં અનેક વ્યાવસાયિક એપ્લિકેશનો છે:

  1. HTML/CSS/JS માં છબીઓનું એમ્બેડિંગ: નાના છબીઓમાં કોડમાં સીધા સમાવેશ કરીને HTTP વિનંતીઓને ઘટાડે છે, જે નાના છબીઓ માટે પેજ લોડ સમય સુધારવા માટે મદદ કરી શકે છે.

  2. ઈમેઇલ નમૂનાઓ: ઈમેઇલ ક્લાયન્ટ્સમાં છબીઓ યોગ્ય રીતે દર્શાવવામાં ખાતરી કરે છે જે બાહ્ય છબીઓને ડિફોલ્ટે અવરોધિત કરે છે.

  3. એકલ ફાઇલ એપ્લિકેશન્સ: એવી સ્વતંત્ર HTML એપ્લિકેશન્સ બનાવે છે જ્યાં તમામ સંસાધનો એક જ ફાઇલમાં સમાવવામાં આવે છે.

  4. API પ્રતિસાદ: છબીના ડેટાને સીધા JSON પ્રતિસાદોમાં સમાવેશ કરે છે જે અલગ છબીના અંતિમ બિંદુઓની જરૂર નથી.

  5. CSS માં ડેટા URI: નાના આઇકોન અને પૃષ્ઠભૂમિ છબીઓને સીધા CSS ફાઇલોમાં એમ્બેડ કરે છે.

  6. કેનવાસ મેનિપ્યુલેશન્સ: કેનવાસ છબીના ડેટાને સાચવવા અને પ્રસારિત કરવામાં સહાય કરે છે.

  7. ઓફલાઇન એપ્લિકેશન્સ: સ્થાનિક સ્ટોરેજ અથવા IndexedDB માં છબીઓને ટેક્સ્ટ સ્ટ્રિંગ્સ તરીકે સાચવે છે.

કાર્યક્ષમતા પર વિચાર

જ્યારે base64 એનકોડિંગ સુવિધા પ્રદાન કરે છે, ત્યારે તે સાથેના વેપાર પણ છે:

  • ફાઇલ કદમાં વધારો: Base64 એનકોડિંગ ડેટાના કદને લગભગ 33% વધારવા માટે જવાબદાર છે.
  • બ્રાઉઝર કેશિંગ નથી: એમ્બેડેડ છબીઓ અલગ છબીની ફાઇલોની જેમ અલગથી કેશ કરવામાં આવતી નથી.
  • પાર્સિંગ ઓવરહેડ: બ્રાઉઝરોએ ડિકોડિંગ કરવા માટે base64 સ્ટ્રિંગને ડિકોડ કરવું પડશે.
  • રખરખાવની પડકારો: એમ્બેડેડ છબીઓ અપડેટ કરવી સંકેતિત ફાઇલો કરતા વધુ મુશ્કેલ છે.

શ્રેષ્ઠ કાર્યક્ષમતા માટે, base64 એનકોડિંગ સામાન્ય રીતે નાના છબીઓ (10KB ની અંદર) માટે જ ભલામણ કરવામાં આવે છે. મોટા છબીઓની સામાન્ય રીતે અલગ ફાઇલો તરીકે સેવા આપવામાં આવે છે જે યોગ્ય રીતે કેશ અને ઑપ્ટિમાઇઝ કરી શકાય છે.

વિકલ્પો

વિવિધ ઉપયોગ કેસો માટે base64 એનકોડિંગના ઘણા વિકલ્પો ઉપલબ્ધ છે:

  1. SVG ઇનલાઇન એમ્બેડિંગ: વેક્ટર ગ્રાફિક્સ માટે, ઇનલાઇન SVG ઘણી વખત base64-એન્કોડેડ SVG કરતા વધુ સારી કાર્યક્ષમતા અને લવચીકતા પ્રદાન કરે છે.

  2. WebP અને આધુનિક છબીના ફોર્મેટ્સ: આ base64-એન્કોડેડ JPEG/PNG કરતા વધુ સારી સંકોચન પ્રદાન કરે છે.

  3. છબી સ્પ્રાઇટ્સ: CSS પોઝિશનિંગનો ઉપયોગ કરીને એક જ ફાઇલમાં અનેક નાના છબીઓને સંયોજિત કરે છે.

  4. CDNs (સામગ્રી ડિલિવરી નેટવર્ક): ઉત્પાદન સાઇટો માટે, એક CDN પરથી ઑપ્ટિમાઇઝ કરેલી છબીઓની સેવા આપવી ઘણીવાર વધુ કાર્યક્ષમ છે.

  5. ડેટા સંકોચન: મોટા પ્રમાણમાં બિનરી ડેટા પ્રસારિત કરવા માટે, વિશિષ્ટ સંકોચન એલ્ગોરિધમ જેમ કે gzip અથવા Brotli base64 કરતા વધુ કાર્યક્ષમ છે.

કોડ ઉદાહરણો

અહીં વિવિધ પ્રોગ્રામિંગ ભાષાઓમાં base64-એન્કોડેડ છબીઓ સાથે કામ કરવા માટેના ઉદાહરણો છે:

1// જાવાસ્ક્રિપ્ટ (બ્રાઉઝર) માં છબીને base64 માં રૂપાંતરિત કરવા માટે
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // ડેટા URL (base64 સ્ટ્રિંગ) તરીકે મેળવો
11  return canvas.toDataURL('image/png');
12}
13
14// base64 છબી દર્શાવો
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // ડેટા URL પૂર્વસૂચક વગરની સ્ટ્રિંગ્સને સંભાળવું
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

HTML અમલ

અહીં HTML માં સીધા base64 છબીને એમ્બેડ કરવાની રીત છે:

1<!-- HTML માં સીધા base64 છબીને એમ્બેડ કરવું -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 એન્કોડેડ છબી">
3
4<!-- CSS સાથે base64 પૃષ્ઠભૂમિ છબીનો ઉપયોગ -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

ઇતિહાસ

Base64 એનકોડિંગની મૂળભૂત બાબતો 1970ના દાયકામાં ઇલેક્ટ્રોનિક મેલ સિસ્ટમોના વિકાસમાં છે. આને બિનરી ડેટાને ASCII ટેક્સ્ટમાં મોકલવા માટેની સમસ્યાને ઉકેલવા માટે ડિઝાઇન કરવામાં આવ્યું હતું.

એનકોડિંગ યોજનાને 1987માં RFC 989 ના પ્રકાશન સાથે ફોર્મલાઇઝ કરવામાં આવ્યું, જે પ્રાઇવસી એન્હાન્સ્ડ મેલ (PEM) ધોરણને વ્યાખ્યાયિત કરે છે. આ પછી RFC 1421 અને અન્ય સંબંધિત ધોરણોમાં અપડેટ કરવામાં આવ્યું. "base64" શબ્દનો અર્થ એ છે કે એનકોડિંગ 64 અલગ ASCII અક્ષરોનો ઉપયોગ કરીને બિનરી ડેટાને પ્રતિનિધિત્વ કરે છે.

વેબ વિકાસના સંદર્ભમાં, base64 એનકોડેડ છબીઓ ડેટા URIના ઉદ્ભવ સાથે લોકપ્રિયતા મેળવી હતી, જે 1998 માં RFC 2397 માં પ્રથમ પ્રસ્તાવિત કરવામાં આવી હતી. આએ બિનરી ડેટાને સીધા HTML, CSS અને અન્ય વેબ દસ્તાવેજોમાં સમાવિષ્ટ કરવાની મંજૂરી આપી.

2000ના મધ્યમાં base64-એન્કોડેડ છબીઓનો ઉપયોગ વેબ વિકાસમાં વધુ વ્યાપક બનવા લાગ્યો જ્યારે વિકાસકર્તાઓએ HTTP વિનંતીઓને ઘટાડવા અને પેજ લોડ સમયને સુધારવા માટે માર્ગો શોધવા માટે પ્રયત્ન કર્યો. આ તકનીક ખાસ કરીને મોબાઇલ વેબ વિકાસના ઉદ્ભવ દરમિયાન અપનાવવામાં આવી, જ્યાં ધીમા મોબાઇલ કનેક્શનમાં કાર્યક્ષમતા માટે વિનંતીઓને ઘટાડવું મહત્વપૂર્ણ હતું.

આજે, base64 એનકોડિંગ વેબ વિકાસમાં એક મહત્વપૂર્ણ સાધન તરીકે રહે છે, જો કે તેનો ઉપયોગ વધુ ટાર્ગેટેડ બની ગયો છે કારણ કે શ્રેષ્ઠ પ્રથાઓ વિકસિત થઈ છે. આધુનિક રીતો સામાન્ય રીતે base64 એનકોડિંગને પસંદ કરે છે, જ્યારે મોટા સંસાધનો માટે વધુ કાર્યક્ષમ ડિલિવરી પદ્ધતિઓનો લાભ લેવાય છે.

સંદર્ભો

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN વેબ ડોક્સ: ડેટા URI
  4. CSS-Tricks: ડેટા URI
  5. Base64 છબી એન્કોડર
  6. Can I Use: ડેટા URI
  7. વેબ કાર્યક્ષમતા: જ્યારે base64 એનકોડ કરવું (અને જ્યારે ન કરવું)