§

છબી અહીં મૂકો અથવા પસંદ કરવા ક્લિક કરો

PNG, JPEG, GIF, WebP, SVG, BMP — 30 MB સુધી. એક સમયે એક છબી.

છબી સંપૂર્ણપણે તમારા ઉપકરણ પર જ વંચાય છે અને એન્કોડ થાય છે — તે ક્યારેય તમારા બ્રાઉઝરની બહાર જતી નથી.

ગુજરાતમાં અમદાવાદ અને ગાંધીનગરની વેબ ટીમો નાનાં લોગો અને આઇકન data URI તરીકે ઇનલાઇન કરે છે જેથી પૃષ્ઠ પોતાનું પહેલું ફ્રેમ થોડું વહેલું દોરી શકે. સુરત અને રાજકોટના ઇ-કોમર્સ વેપારી ઇ-મેઇલ ન્યૂઝલેટરમાં બ્રાન્ડ લોગો ઇનલાઇન રાખે છે, કારણ કે ઘણા મેઇલ ક્લાયન્ટ બાહ્ય છબીઓને મૂળભૂત રીતે અવરોધે છે, પણ Base64 ઇનલાઇન છબી સંદેશ ખૂલતાંની સાથે જ દેખાય છે. UPI અને ફિનટૅક ઍપ બનાવતા ડેવલપર નાનાં ચિહ્નો CSS માં ઇનલાઇન કરી HTTP રાઉન્ડ-ટ્રિપ ઘટાડે છે. MeitY અને CERT-In ની સાયબર સુરક્ષા માર્ગદર્શિકા હેઠળ કામ કરતી સંસ્થાઓ આવાં ટૂલ પસંદ કરે છે જે ડેટા બહાર મોકલતાં નથી, કેમ કે એન્કોડિંગ સંપૂર્ણપણે JavaScript માં ચાલે છે અને મૂળ છબી ક્યારેય સર્વર સુધી પહોંચતી નથી — સ્ક્રીનશૉટ, ID સ્કૅન, અથવા ગોપનીય આંતરિક ડાયાગ્રામ માટે આ મહત્ત્વનું બને છે.

ઇમેજ-થી-Base64 રૂપાંતર કેવી રીતે કાર્ય કરે છે

આખું રૂપાંતર File API અને બિલ્ટ-ઇન btoa ફંક્શન વાપરી તમારા બ્રાઉઝરમાં જ ચાલે છે — કોઈ કોડેક લાઇબ્રેરી ડાઉનલોડ થતી નથી અને કોઈ સર્વર છબીને જોતું નથી. શરૂથી અંત સુધીની પાઇપલાઇન અહીં છે:

  1. તમે એક છબી મૂકો અથવા પસંદ કરો. બ્રાઉઝર તેને તમારી સ્થાનિક ડિસ્કમાંથી Blob તરીકે વાંચે છે, બાઇટ્સને ક્યારેય સર્વર પર કૉપિ કર્યા વગર.
  2. ફાઇલ 1 MB ના ટુકડામાં વંચાય છે અને દરેક ટુકડાના બાઇટ્સ એક બાઇનરી સ્ટ્રિંગ સાથે જોડાય છે. ટુકડામાં વાંચવાથી મોટી છબીઓ JavaScript કૉલ સ્ટૅકને ઓવરફ્લો કરતી નથી.
  3. બાઇનરી સ્ટ્રિંગ btoa ને પાસ થાય છે, જે A–Z, a–z, 0–9, વત્તા / ઍલ્ફાબેટમાંથી લીધેલા ચાર Base64 અક્ષરો પર દર ત્રણ બાઇટને મેપ કરે છે.
  4. ફાઇલનો MIME પ્રકાર (image/png, image/jpeg, વગેરે) File ઑબ્જેક્ટમાંથી વંચાય છે અને data: પ્રીફિક્સ તરીકે આગળ ઉમેરાય છે, જે સંપૂર્ણ data:image/…;base64,… URI બનાવે છે.
  5. પૃષ્ઠ એ URI માંથી ચાર આઉટપુટ ભેગાં કરે છે — સંપૂર્ણ data URI, પ્રીફિક્સ વગરનું રૉ Base64, એક તૈયાર-પેસ્ટ ટૅગ, અને એક CSS background-image સ્નિપેટ — દરેક પોતાના કૉપિ બટન સાથે.

છબીને data URI તરીકે શા માટે એન્કોડ કરવી?

  • નાનું લોગો કે આઇકન data URI તરીકે ઇનલાઇન કરવાથી અલગ નેટવર્ક રાઉન્ડ-ટ્રિપ દૂર થાય છે, એટલે પૃષ્ઠ કે ઇ-મેઇલ પોતાનું પહેલું ફ્રેમ થોડું વહેલું દોરે છે.
  • જે પૃષ્ઠ કે સ્ટાઇલશીટની છબીઓ ઇનલાઇન હોય તે સ્વયંપૂર્ણ બને છે. તે ઑફલાઇન કામ કરે છે, અને તમે તેને એસેટ-ફોલ્ડર સાથે ખેંચ્યા વગર આસપાસ કૉપિ કરી શકો છો.
  • ઘણા મેઇલ ક્લાયન્ટ લિંક કરેલી બાહ્ય છબીઓને મૂળભૂત રીતે અવરોધે છે. લોગોને Base64 તરીકે ઇનલાઇન કરો અને સંદેશ ખૂલતાંની સાથે જ તે દેખાય છે, કોઈ બાહ્ય ફેચ વગર.
  • એન્કોડિંગ સંપૂર્ણપણે તમારા બ્રાઉઝરમાં થાય છે, એટલે સંવેદનશીલ છબીઓ ક્યારેય ત્રીજા-પક્ષના સર્વર પર જતી નથી. એમાં સ્ક્રીનશૉટ, ID સ્કૅન, અને આંતરિક ડાયાગ્રામ આવી જાય છે.

Base64 છબીઓના સામાન્ય ઉપયોગ

Data URI ત્યાં દેખાય છે જ્યાં છબી એટલી નાની હોય કે Base64 ઉમેરતા ~33% કદ-ફુલાવા કરતાં અલગ વિનંતી વધારે ખર્ચાળ પડે. ત્રણ પૅટર્ન સતત આવે છે:

  • ઇનલાઇન CSS આઇકન: 1–2 KB નો સ્પ્રાઇટ કે આઇકન સ્ટાઇલશીટમાં background-image: url(data:…) તરીકે મૂકવો જેથી નિયમ સંપૂર્ણપણે સ્વયંપૂર્ણ રહે.
  • ઇ-મેઇલ સહી અને ન્યૂઝલેટર: data URI src વાળા તરીકે એમ્બેડ કરેલું લોગો ક્લાયન્ટ બાહ્ય છબીઓ અવરોધે ત્યારે પણ દેખાય છે.
  • બિલ્ડ-ટૂલ ઇનલાઇનિંગ: Webpack અને Vite જેવા બંડલર બાઇટ થ્રેશોલ્ડ નીચેની એસેટ આપમેળે ઇનલાઇન કરે છે, અને આ ટૂલ તમને બરાબર એ આઉટપુટ કેવું દેખાય તે પૂર્વાવલોકન કરવા દે છે.

Base64 છબી કેવી દેખાય છે?

એક નાનકડી 1×1 પારદર્શક PNG લો. તેના રૉ બાઇટ્સ માત્ર 67 બાઇટ્સ છે, પણ એન્કોડ થતાં તે સ્ટ્રિંગ iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= બને છે, અને સંપૂર્ણ data URI છે data:image/png;base64,iVBORw0KGgo…. નોંધો કે એન્કોડ થયેલું સ્વરૂપ મૂળ કરતાં લગભગ એક-તૃતીયાંશ મોટું છે. ટેક્સ્ટમાં બાઇનરી ડેટા સીધો એમ્બેડ કરવાનું સલામત બનાવવા માટેનો એ ભોગ છે.

શું મારી છબી ક્યાંય અપલોડ થાય છે?

ના. રૂપાંતર છબીને સંપૂર્ણપણે તમારા ઉપકરણ પર એન્કોડ કરવા બ્રાઉઝરની File API અને નેટિવ btoa ફંક્શન વાપરે છે. તમે જાતે ખાતરી કરી શકો છો: તમારા બ્રાઉઝરના ડેવલપર ટૂલ્સ ખોલો, Network પૅનલ પર સ્વિચ કરો, અને એક છબી કન્વર્ટ કરો — તમને દેખાશે એ એકમાત્ર વિનંતીઓ પૃષ્ઠ લોડ અને કોઈ પણ જાહેરાત હશે. છબી-આકારની કોઈ વસ્તુ સર્વર પર મોકલાતી નથી, જે સ્ક્રીનશૉટ, ID દસ્તાવેજ, અને આંતરિક ડાયાગ્રામ માટે આને સલામત બનાવે છે.

Base64 આઉટપુટ મારી મૂળ છબી કરતાં મોટું શા માટે છે?

Base64 બાઇનરી ડેટાના દર ત્રણ બાઇટને ચાર ASCII અક્ષરથી રજૂ કરે છે, એટલે એન્કોડ થયેલું ટેક્સ્ટ મૂળ ફાઇલ કરતાં લગભગ 33% મોટું હોય છે. આ પૃષ્ઠ પરનું data URI કદ રીડઆઉટ ચોક્કસ ફુલાવેલી લંબાઈ બતાવે છે. એ ઓવરહેડ જ કારણ છે કે data URI ફક્ત નાની છબીઓ માટે અર્થપૂર્ણ બને — 2 MB ફોટો ઇનલાઇન કરવાથી તમારું HTML કે CSS અલગ વિનંતી કરતાં ઘણું વધારે ફૂલે. અંગૂઠાના નિયમ તરીકે, લગભગ 4 KB નીચેની છબીઓ ઇનલાઇન કરો અને એથી મોટી કોઈ પણ વસ્તુને લિંક કરો.

હું કયા છબી ફોર્મેટ કન્વર્ટ કરી શકું?

તમારું બ્રાઉઝર જેને છબી તરીકે ઓળખે તે કોઈ પણ ફોર્મેટ કામ કરે છે, કારણ કે ટૂલ ચિત્રને ડિકોડ કરવાને બદલે રૉ બાઇટ્સ વાંચે છે. એમાં PNG, JPEG, GIF, WebP, SVG, અને BMP આવી જાય છે. MIME પ્રકાર સીધો ફાઇલમાંથી વંચાય છે, એટલે data: પ્રીફિક્સ હંમેશા સાચા ફોર્મેટ સાથે મેળ ખાય છે — JPEG data:image/jpeg બનાવે છે અને SVG data:image/svg+xml બનાવે છે. SVG ખાસ નોંધને લાયક છે: તે પહેલેથી જ ટેક્સ્ટ છે, એટલે SVG માટે URL-એન્કોડ થયેલું data URI ઘણીવાર Base64 સંસ્કરણ કરતાં નાનું હોય છે, જોકે આ ટૂલ સુસંગતતા માટે Base64 સ્વરૂપ આપે છે.

એક છબી મૂકો, તમને જોઈતી data URI કે સ્નિપેટ કૉપિ કરો, અને તેને તમારા HTML, CSS, અથવા ઇ-મેઇલ ટેમ્પલેટમાં પેસ્ટ કરો. દરેક બાઇટ તમારા ઉપકરણ પર જ રહે છે. કોઈ અપલોડ નહીં, કોઈ ખાતું નહીં, કોઈ સર્વર રાઉન્ડ-ટ્રિપ નહીં.