data image jpg base64

Convert your images
to base64

BASE64 Image Sponsors

Check out their products!

File Formats

You can upload up to 20 images (max. 1.00 MB each) as JPG, PNG, GIF, WebP, SVG or BMP.

Please note that Internet Explorer 8 has a limit of 32 KB for data URI. Versions below have no support.

Image optimization

We can optimize your JPEG & PNG images, using jpegoptim and optipng. This will reduce the file without any visible impact (in most cases).

Browser Support

The encoded results are compatible with all of the following browsers and versions. Please send me a note if there are issues.

  • Chrome 4+
  • Safari 3.1+
  • Firefox 2+
  • Opera 9+
  • Edge
  • IE 8+

A virtual teacher who reveals to you the great secrets of Base64

How to convert JPG to Base64 online

  1. Choose the source of image from the “Datatype” field.
  2. Paste the URL or select a JPG image from your computer.
  3. If necessary, select the desired output format.
  4. Press the “Encode JPG to Base64” button.
  5. Download or copy the result from the “Base64” field.

About JPG

  • Name: JPEG
  • Developer: Joint Photographic Experts Group
  • MIME types: image/jpeg
  • File Extensions: .jpg, .jpeg, .jpe, .jif, .jfif, .jfi
  • Uniform Type Identifier: public.jpeg
  • Type of Format: Lossy image

Output formats

If you do not know what output format you need, check the following examples to see how will look the result of the same Base64-encoded JPG image formatted in each of the available formats (as an example image I use a one-pixel red dot JPG file):

Plain text:Data URI:CSS Background Image:HTML Favicon:HTML Hyperlink:HTML Image:HTML Iframe:JavaScript Image:JavaScript Popup:JSON:XML:

If I missed an important output format for Base64-encoded JPG images, please let me know — I would love to implement it.

Comments (3)

I hope you enjoy this discussion. In any case, I ask you to join it.

I’m having trouble displaying a Base64 image inline.

Can someone point me in the right direction?

11 Answers 11

My suspect is of course actual base64 data, otherwise it looks good to me. See this fiddle where similar scheme is working. You may try specifying char set.

You can try this base64 decoder to see if your base64 data is correct or not.

You need to specify correct Content-type, Content-encoding and charset like

according to the syntax of the data URI scheme:

If you have PHP on the back-end, you can use this code:

First convert your image to Base64 (encode to Base64). You can do it online or with a PHP script.

After converting you will get the result as

Now it’s simple to use.

You have to just put it in the src of the image and define there as it is in base64 encoded form.

This will show image of base 64 data:

you can put your data directly in a url statment like

and to get the image data u can use the php function

so you can copy paste the value of imageData and paste it directly to your url and assign it to the src attribute of your image

The + character occurring in a data URI should be encoded as %2B. This is like encoding any other string in a URI. For example, argument separators (? and &) must be encoded when a URI with an argument is sent as part of another URI.

Seems there is some error in your data URL.

You can use this online base64 encode / base64 decode tool to encode your images for embedding: http://base64online.org/encode/

Check «Format as Data URL» option to format base64 data as URL.

Try this one too:

Not recommended for production as it is only compatible with modern browsers.

Storing Base64-image as a variable and display it using plain HTML and JavaScript:

PYTHON example:

protected by Community ♦ Sep 16 ’15 at 16:21

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Оцените статью