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

<img>

Comments: 12 | Rating: 4.5/5

The <img> tag is designed to display images on web pages. Each <img> element must have the src attribute and should contains the URL-address or the data URI of the image.

For example, you can display one-pixel red dot GIF as follows:

<img src="//static.base64.guru/uploads/images/1x1.gif" />

The same can be achieved by encoding image to Base64 and embedding it using data URI:

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs" />

Both behaviors are identical — when you open the page, your browser displays the same image specified within <img> tag. The difference is that in the first case the browser sends one HTTP request to fetch the external image, when in the second case the image is already loaded in the browser’s memory and it does not need to send any HTTP requests.

It is important to note, that src attribute will be ignored if it is a child of <picture> tag and at least one of its <source> tags match a requirement for the device screen or page layout.

Please note that Base64 Data URIs have some limitations. In addition, like almost any unconventional solutions, it has both advantages and disadvantages. Therefore, if you plan to use it, first of all, read about Base64 Data URI.

Comments (12)

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

  • devinneed,
    how would one achieve this when the data URI is not of type base64 but svg+xml instead?
    reply
    • yarns, ↑
      how you would insert a regular svg image.....

      html
      <body>
      ...
      <svg class="icon-1em-spec" viewBox="0 0 58 58">
        <g id="icon_facebook"><title>[facebook]</title>
          <path d="M54.8,0H3.2A3.2,3.2,0,0,0,0,3.2V54.8A3.2,3.2,0,0,0,3.2,58H31V35.6H23.5V26.8H31V20.3c0-7.5,4.6-11.5,11.3-11.5,2.2,0,4.5.1,6.7.3v7.8H44.4c-3.6,0-4.3,1.7-4.3,4.3v5.6h8.7l-1.2,8.8H40V58H54.8A3.2,3.2,0,0,0,58,54.8h0V3.2A3.2,3.2,0,0,0,54.8,0Z"></path></g>
      </svg>


      or define it and use it multiple times...

      html
      <body>
      <svg style="display:none;" class="icon-1em-spec" viewBox="0 0 58 58">
        <defs>
          <g id="icon_facebook"><title>[facebook]</title>
          <path d="M54.8,0H3.2A3.2,3.2,0,0,0,0,3.2V54.8A3.2,3.2,0,0,0,3.2,58H31V35.6H23.5V26.8H31V20.3c0-7.5,4.6-11.5,11.3-11.5,2.2,0,4.5.1,6.7.3v7.8H44.4c-3.6,0-4.3,1.7-4.3,4.3v5.6h8.7l-1.2,8.8H40V58H54.8A3.2,3.2,0,0,0,58,54.8h0V3.2A3.2,3.2,0,0,0,54.8,0Z"></path></g>
        </defs>
      </svg>
      ...
      <svg class="icon-1em-spec" viewBox="0 0 58 58">
        <use xlink:href="#icon_facebook"></use>
      </svg>
      reply
  • nqhXncMU,
    57G19ceV')) OR 554=(SELECT 554 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
    reply
  • nqhXncMU,
    -1' OR 2+824-824-1=0+0+0+1 --
    reply
  • gBqsPxAZ,
    555*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)
    reply
  • gBqsPxAZ,
    0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
    reply
  • nqhXncMU,
    if(now()=sysdate(),sleep(15),0)
    reply
  • nqhXncMU,
    (select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/
    reply
  • nqhXncMU,
    555*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)
    reply
  • ncMUFCMU,
    555*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)
    reply
  • ncMUFCMU,
    555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
    reply
Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.

Recent blog posts