{{ summaryTitle }} · {{ summaryValue }} — {{ summaryLine }} {{ outputMimeLabel }} · {{ outputDimensionsLabel }} · {{ focusStatusLabel }}
Drop, paste, browse, or restore the generated SVG sample. Extra files are ignored.
{{ sourceDropTitle }} {{ sourceDropLine }}

{{ sourceStatus }}

Choose the intended destination or let the tool identify the strongest current fit.
Used in the generated HTML snippet; it does not change the encoded bytes.
Keep off for byte-exact output; enable only when a rendered payload is acceptable.
{{ optimize ? 'On' : 'Off' }}
Used only while optimization is on.
{{ quality }}%
Lower values usually shorten photographic payloads at the cost of detail.
Use 0 for original dimensions or a value from 16 to 12,000 pixels.
px
Used only for optimized JPEG output.
Choose no wrapping, 64 columns, or MIME-style 76 columns.
Leave blank unless a downstream consumer explicitly requires another image media label.
{{ visiblePayloadText }}
TargetCharactersPreviewCopy
{{ row.label }}{{ formatNumber(row.characters) }}{{ row.preview }}
ContextFitBandsGuidanceCopy
{{ row.label }}{{ statusLabel(row.status) }}{{ formatNumber(row.soft) }} / {{ formatNumber(row.caution) }} chars{{ row.guidance }}
Base64 Encoder and Decoder Encode or decode Base64 text and files locally, choose standard or URL-safe output, repair missing padding, and inspect the recovered bytes.
Image Format Converter Convert one image locally with format, resize, crop, quality, and transparency controls while checking the actual output and byte size.
Image Compressor Compress one image locally in your browser, compare size and visual quality, then download a resized or reformatted copy with metadata controls.
Image Resizer Resize one image locally, compare fit or crop geometry, and tune format quality against a file-size target before downloading.

An image normally travels as a separate file. Base64 offers another arrangement by spelling the image bytes as text, which can then sit inside HTML, CSS, JSON, email markup, or a test fixture. A Data URI adds the media type and a short prefix so the text can be used directly as an image address.

Inlining removes a separate file reference, but it does not remove the image data. Base64 expands binary content to roughly four characters for every three bytes, then the Data URI prefix adds a little more. Large inline images make documents, stylesheets, request bodies, logs, and source files heavier.

Situation Likely fit Main tradeoff
Tiny, one-off icon or self-contained example Inline data can be convenient. The markup carries the image bytes directly.
Repeated site image or frequently updated asset An external file is usually easier to cache and replace. Inlining repeats the payload wherever the string appears.
Email or third-party embed Test the exact destination. Client support and size limits vary.
Private or regulated image Treat the string as the original image. Base64 provides no encryption or access control.

Byte-exact encoding and image optimization answer different needs. Encoding the original file preserves its bytes, format, and any animation or embedded metadata. Rendering a new PNG, JPEG, or WebP can reduce dimensions or size, but it creates different bytes and may flatten transparency, lose animation, remove metadata, or introduce lossy artifacts.

A media-type label tells the receiver how to interpret the payload; it does not convert the image. Mislabeling JPEG bytes as PNG, for example, can still cause the destination to reject or misread the result.

How to Use This Tool:

Decide first whether the output must preserve the selected file or may be rendered into a new image.

  1. Drop, paste, or browse for one browser-readable image up to 5 MiB and no more than 12,000 pixels on either side.
  2. Leave Optimize before encoding off for byte-exact output. When resizing or conversion is acceptable, turn it on and choose the rendered format, quality, maximum long edge, and JPEG transparency background where applicable.
  3. Choose the intended Recommendation lens. Use the resulting delivery status as a heuristic for that context, not as a browser or email standard.
  4. Review the image preview and payload size before copying the Base64 string, Data URI, or embed snippet. Keep the media label matched to the actual rendered bytes unless the destination explicitly requires an override.

Interpreting Results:

Encoded payload contains either raw Base64 or the complete Data URI. The displayed preview can be shortened for readability, while copy and download actions retain the full string.

Delivery fit compares Data URI character count with locally defined thresholds. Fits well means the string is below the lower heuristic boundary, Review size lies between the two boundaries, and External file preferred exceeds the upper boundary.

A smaller optimized payload is not automatically better. Confirm dimensions, transparency, animation, sharp edges, and photographic detail in the preview, then test the actual browser, email client, or API that will consume it.

Technical Details:

Image Base64 uses the same 24-bit grouping as any other Base64 payload. The selected or rendered image supplies the bytes; the codec maps every three bytes to four printable characters and pads the final partial group when necessary.

Formula Core

For B image bytes, Base64 character count C rounds up to a complete four-character group.

C=4× ⌈B3⌉ D=C+M+13

D is the complete Data URI length and M is the media-type length. A 9,000-byte PNG produces 12,000 Base64 characters and a 12,022-character Data URI because image/png has nine characters.

Raw Base64 may remain unwrapped or use 64- or 76-character lines. Wrapping inserts line feeds into the displayed raw payload without changing the decoded bytes; complete Data URIs and generated embed snippets remain unwrapped.

Transformation Core

Path Bytes encoded Material consequence
Original bytes The file exactly as selected. Preserves the source format and byte content.
Optimized PNG A newly rendered lossless raster image. Can resize the image; animation and source metadata are not preserved.
Optimized JPEG A newly rendered lossy image. Flattens transparency onto the selected background.
Optimized WebP A newly rendered WebP image. Quality and dimensions may change; destination support still needs testing.

Delivery Heuristic

The boundaries below are locally defined selection aids, not protocol limits. A value exactly on either boundary remains in the less severe band because comparisons use “at or below.”

Context Fits well at or below Review at or below Above review boundary
CSS background12,000 chars32,000 charsExternal file preferred
HTML image24,000 chars90,000 charsExternal file preferred
Email HTML32,000 chars80,000 charsExternal file preferred
JSON or API120,000 chars400,000 charsExternal file preferred

Privacy and Accuracy Notes:

Image reading, rendering, previewing, and encoding happen in the current browser tab rather than through an upload service.

  • Base64 and Data URI strings contain the image data and deserve the same handling as the source file.
  • Optimization changes the image bytes and may remove metadata, animation, vector structure, or transparency.
  • A MIME override changes only the label. It cannot make the bytes conform to a different image format.
  • Delivery-fit bands do not replace testing in the actual destination.

References: