Is it necessary to specify the MIME type in the src property when rendering an image in Base64?

Asked

Viewed 80 times

1

I’m doing some image rendering tests on Base64 and I had some doubts.

I realized that even passing the extension of the wrong image on mime type, it is still possible to render the image, in the example below, an image that had extension .PNG, in specifying the extent as data:image/jpeg, it is still rendered. In the second example the extension specification was removed and the image is also rendered:

document.getElementById('imageBase64Png').src = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAIAAAC0tAIdAAABj2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kbtLw1AUxr+mlRapiOggUiFCdRALoiAOLlaxCBVCrWDVwTz6EJI0JCkujoJrwUF08TXoHyC6OrgKgqAIIg7+Bb4WKfHcJNAirRcu55cv53zc+12AO1dlzQqNAppum5lUkl/OrfDhN4TQjy7wGBBly5gWhDRaru8HBFi9TzCv1n1NV4eSt2QgwBPPyYZpE5eIJzZtg/ERcY9cEhXiC+IRkw5I/Mp0yeNPxkWXuQhjM5uZIY4R88UGlhpYLpka8RRxXNF08ufWPVYYbzPW1Irsn5PdMJrXlxapDtOOIQUVG9BgwEKekpJQoW8VNhJUdVIsZKgrSdk29+lzfQSak1wvmWZmUSZP0XUAe4u/GVuF8THPKUrObS+O8zEIhHeBWtVxfo4dp3YCBJ+Ba70+X6YcJ79Ir9a1+CHQSfe8vKlr0h5wtQP0PhmiKbpSkDZXKADvZ/RcOaD7Dmhf9fLz/+P0EchuAelbYP8AGCqS91qLe0f8/OaxAOHfHj/BXyORdMhJPO7+AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AQdESElzI3SVQAAABx0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR2xpbXBzZe5OGAcAAAAZSURBVCjPY9zg4MBANGBiIAWMqh5VTX3VAFy9AU4AdAftAAAAAElFTkSuQmCC';

document.getElementById('imageBase64WithoutType').src = ' data:image;base64, iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAIAAAC0tAIdAAABj2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kbtLw1AUxr+mlRapiOggUiFCdRALoiAOLlaxCBVCrWDVwTz6EJI0JCkujoJrwUF08TXoHyC6OrgKgqAIIg7+Bb4WKfHcJNAirRcu55cv53zc+12AO1dlzQqNAppum5lUkl/OrfDhN4TQjy7wGBBly5gWhDRaru8HBFi9TzCv1n1NV4eSt2QgwBPPyYZpE5eIJzZtg/ERcY9cEhXiC+IRkw5I/Mp0yeNPxkWXuQhjM5uZIY4R88UGlhpYLpka8RRxXNF08ufWPVYYbzPW1Irsn5PdMJrXlxapDtOOIQUVG9BgwEKekpJQoW8VNhJUdVIsZKgrSdk29+lzfQSak1wvmWZmUSZP0XUAe4u/GVuF8THPKUrObS+O8zEIhHeBWtVxfo4dp3YCBJ+Ba70+X6YcJ79Ir9a1+CHQSfe8vKlr0h5wtQP0PhmiKbpSkDZXKADvZ/RcOaD7Dmhf9fLz/+P0EchuAelbYP8AGCqS91qLe0f8/OaxAOHfHj/BXyORdMhJPO7+AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AQdESElzI3SVQAAABx0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR2xpbXBzZe5OGAcAAAAZSURBVCjPY9zg4MBANGBiIAWMqh5VTX3VAFy9AU4AdAftAAAAAElFTkSuQmCC'
Imagem em base 64 com formato png utilizando mimetype image/jpeg:
<img id="imageBase64Png" />
<br>
Imagem em base64 com formato png sem especificar tipo:
<img id="imageBase64WithoutType" />

There is some advantage or disadvantage of specifying or not the image extension in MIME type since even passing an extension that is not the correct one, the browser can interpret and render?

javascript html base64
  • 3

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Basico_sobre_HTTP/MIME_types and pay attention to the part about MIME sniffing

  • 1

    @hugocsl Thank you very much, this link took away much of my doubts :)

1 answer

-1

Browser other questions tagged javascript html base64

You are not signed in. Login or sign up in order to post.