What is Base64?
Base64 is a binary-to-text encoding scheme that translates binary data into a radix-64 representation (ASCII string). It is commonly used to transmit data without data loss or modification during transport, especially when the transport medium only supports text (like Email or JSON).
The characters used are A-Z, a-z, 0-9, +, and /.
The equals sign = is used for padding.
When to use Base64 for images?
Converting images to Base64 allows you to embed them directly into HTML or CSS files. This technique is known as Data URI.
- Pros: Reduces HTTP requests (great for small icons), prevents "fouc" (flash of unstyled content), and simplifies single-file distribution.
- Cons: Increases file size by approximately 33%, and images cannot be cached separately by the browser.
Best Practice: Use Base64 for small images like logos, icons, or background patterns (under 10KB). For larger photos, stick to standard .jpg or .webp files.