How to Convert an Image to Base64 (Data URL Guide)

What Base64 is and why developers use it

Base64 is a text encoding that represents binary data—such as an image file—as a safe ASCII string. APIs, HTML emails, CSS, JSON payloads, and mobile apps often expect images inline rather than as separate file attachments. A data URL looks like data:image/png;base64,iVBORw0KGgo… and can be pasted directly into code, configuration, or a test request without hosting the file on a CDN.

Raw Base64 is the payload only—the characters after the comma in a data URL. Some backends want the full data URL; others want raw Base64 with the MIME type supplied separately. Knowing which format your system expects prevents silent decode failures in production.

FileShrinkr Base64 Tools supports both directions: Image → Base64 encodes uploads in your browser, and Base64 → Image decodes strings back to editable images. Raster encoding and decoding stay local; only HEIC conversion uses the server, as described below.

Data URL versus raw Base64

A data URL bundles the MIME type and payload in one string: data:image/jpeg;base64,/9j/4AAQ…. That self-describing format is convenient in HTML img src attributes, inline SVG fallbacks, and quick prototypes. Copy the entire string when your documentation shows a data:image/ prefix.

Raw Base64 omits the prefix. Backend services that already know the content type—image/png in a JSON field, for example—often prefer raw strings because they are shorter and easier to validate. FileShrinkr lets you switch output type before you generate or copy the result.

Some email and API systems require line wrapping at seventy-six characters per line (RFC 2045). Long unbroken Base64 strings can break older parsers. Enable line wrap on the Image → Base64 tab when your destination spec mentions MIME encoding rules.

PNG versus JPG for Base64 output

PNG is lossless and preserves transparency. Use PNG when you need pixel-perfect icons, screenshots with text, or UI assets that overlay other content. The trade-off is a longer Base64 string because PNG compresses photos less efficiently than JPG.

JPG is the better choice when file size matters and you do not need transparency. Photographs, product shots, and camera uploads produce smaller Base64 strings at quality seventy-five to eighty-five. WEBP and AVIF can shrink strings further on supporting stacks, but JPG and PNG remain the most universally accepted in APIs and email clients.

On FileShrinkr, pick the download format in the editor controls before you click Generate Base64. PNG is the default on Base64 Tools for development workflows; switch to JPG when you want a shorter string for the same photo.

Step-by-step: image to Base64 with FileShrinkr

Open Base64 Tools at fileshrinkr.com/base64-to-image and select the Image → Base64 tab. Upload your image by drag-and-drop or file picker. Supported raster formats include JPG, PNG, WEBP, and GIF.

Use the built-in editor to crop, resize, rotate, or flip before encoding. Smaller dimensions mean shorter Base64 output—resize a four-thousand-pixel screenshot to the display size you actually need before generating the string.

Choose PNG or JPG (or WEBP/AVIF if your target environment supports them), set quality for lossy formats, then pick Data URL or raw Base64. Click Generate Base64, review the character count, and Copy to clipboard or Download .txt for your repo or ticket.

iPhone HEIC photos

Browsers cannot decode HEIC directly on the canvas. When you upload HEIC on the Image → Base64 tab, FileShrinkr converts it to JPG or PNG on the server—matching your selected export format—then loads the result into the editor. Base64 generation still runs locally after conversion.

Only the HEIC conversion step touches the server. The temporary file is processed and discarded; it is not retained for browsing or training. If HEIC support is unavailable on a given deployment, export JPG from Photos first or use the main compressor in Server mode, then upload the JPG to Base64 Tools.

For the reverse workflow—decoding an existing Base64 string—use the Base64 → Image tab. Paste a data URL or raw string, decode, edit, and download as JPG, WEBP, AVIF, or PNG without re-uploading the original string to a compression endpoint.

Edit before you encode

Encoding a full-resolution photo when you only need a thumbnail wastes bytes in your API payload and slows JSON parsing. Crop to the subject, resize to target width and height, then generate Base64. The same editor powers both tabs, so you can decode a string on Base64 → Image, refine the crop, switch to Image → Base64, and export an updated string from one session.

Undo and redo help when experimenting with crop boxes. Use Maintain aspect ratio when resizing logos or profile photos so faces do not stretch. When you need a compressed file instead of a string, click Compress This Image to hand off the canvas to the main FileShrinkr compressor.

Download Image on the editor exports a normal JPG or PNG file if you want to archive the edited result before sharing Base64 with your team.

Privacy and size limits

Base64 expands binary size by roughly thirty-three percent compared with the original file. A five-hundred-kilobyte JPG becomes a much longer string—plan for JSON body limits, database column sizes, and log truncation in your application.

FileShrinkr caps decoded and uploaded images at fifteen megabytes on Base64 Tools. SVG Base64 is not supported in the decoder because rasterization rules vary; convert SVG to PNG elsewhere first if you need a string.

Decoding and encoding raster images in Browser mode does not send your Base64 string or canvas pixels to FileShrinkr servers. Treat generated strings like any credential-adjacent data: avoid pasting secrets into public tickets, and rotate test data URLs that accidentally contain production screenshots.

Common mistakes to avoid

Pasting a truncated string is the most frequent decode error—Base64 from chat apps or email clients sometimes clips long lines. Copy the full output from FileShrinkr or use Download .txt to avoid manual selection gaps.

Mixing up raw Base64 and data URL formats causes silent failures. If decode fails, confirm whether your source included the data:image/…;base64, prefix. FileShrinkr accepts both on the decode tab.

Using PNG for large photos when JPG would suffice inflates API payloads. For inline avatars and icons, PNG is ideal; for camera photos in mobile API fixtures, JPG at quality seventy-five is usually the better balance. See our guide on best image formats for websites for broader format strategy.

Quick checklist

Confirm whether your system needs a data URL or raw Base64. Upload or decode on the correct tab. Crop and resize to the pixels you will actually display. Choose PNG for lossless or transparent assets; JPG for smaller strings on photos.

Generate, copy or download, and verify character count against your API limits. For HEIC iPhone photos, let FileShrinkr convert on upload, then encode locally. Bookmark Base64 Tools alongside the main compressor for day-to-day image workflows.