WebP to Base64

Convert WebP to Base64 online and use it as a generator, which provides ready-made examples for data URI, img src, CSS background-url, and others. The WebP to Base64 converter is identical to Image to Base64, with the only difference that it forces the mime type to be “image/webp” (even if the uploaded file has a different content type or it cannot be detected). Please note that the WebP to Base64 encoder accepts any images types with a size of up to 50 MB. If you are looking for the reverse process, check Base64 to WebP.

About WebP

• Name: Weppy
• Developer: Google
• MIME types: image/webp
• File Extensions: .webp
• Uniform Type Identifier: com.google.webp
• Type of Format: Lossless/lossy compression

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 WebP image formatted in each of the available formats (as an example image I use a one-pixel red dot WebP file):

UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA

data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA

.base64 {
  background-image: url("data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA")
}

<link rel="shortcut icon" href="data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA" />

<a href="data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA"></a>

<img alt="" src="data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA" />

<iframe src="data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA">
  The “iframe” tag is not supported by your browser.
</iframe>

var img = new Image();
img.src = "data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA";
document.body.appendChild(img);

window.onclick = function () {
  this.open("data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA");
};

{
  "image": {
    "mime": "image/webp",
    "data": "UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA"
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <image mime="image/webp">UklGRkAAAABXRUJQVlA4IDQAAADwAQCdASoBAAEAAQAcJaACdLoB+AAETAAA/vW4f/6aR40jxpHxcP/ugT90CfugT/3NoAAA</image>
</root>

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