Image to Base64: Complete Guide to Data URIs in HTML, CSS, and JavaScript

Base64 image encoding eliminates separate HTTP requests but adds ~33% file size. Here's when and how to use it. What Is a Base64 Data URI? <!-- Traditional external image --> <img src= "/images/logo.png" alt= "Logo" > <!-- Base64 data URI - no HTTP request needed --> <img src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt= "Logo" > Format: data:[MIME type];base64,[base64-encoded-data] Convert in JavaScript (Browser) FileReader API (for user-uploaded files) function fileToBase64 ( file ) { return new Promise (( resolve , reject ) => { const reader = new FileReader (); reader . onload = () => resolve ( reader . result ); // "data:image/png;base64,..." reader . onerror = reject ; reader . readAsDataURL ( file ); }); } // Usage with file input document . getElementById ( ' file-input ' ). addEventListener ( ' change ' , async ( e ) => { const file = e . target . files [ 0 ]; const dataUri = await fileToBase64 ( file ); document . getElementById ( ' preview ' ). src = dataUri ; })