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

<link>

Comments: 21 | Rating: 3.8/5

The <link> tag establishes the relationship of the current page with an external web resource (such as CSS files, HTML pages, images). The type of relationship is specified by the rel attribute, while the href attribute specifies the path to the web resource. Similar to the <a> tag, the href attribute of the <link> tag accepts URL-addresses or the data URIs.

For example, you can specify the favicon as follows:

<link rel="shortcut icon" href="//static.base64.guru/uploads/images/1x1.gif" />

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

<link rel="shortcut icon" href="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs" />

Both behaviors are identical — when you open the page, your browser loads the same icon specified within <link> 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.

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. The main thing that you need to remember is that you do not need to use redundant technologies, when everything can be done much easier.

For example, you can load a stylesheet as follows:

<link rel="stylesheet" type="text/css" href="//static.base64.guru/uploads/css/body_red.css" />

The same stylesheet can be loaded without any HTTP requests by encoding CSS to Base64 and embedding it using data URI:

<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keXtjb2xvcjpyZWR9" />

In the second example, the code is more efficient and even less, but it is “wrong” (or, at best, is just for fun). The point is that we can “simplify” it using the <style> tag. Thus, we do not need to do any HTTP requests, nor to use the data URI:

<style>body{color:red}</style>
Comments (21)

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

  • christopher,
    hi im new
    reply
  • christopher,
    hi I work at watson I forgot the bypass codes
    reply
  • christopher,
    hi I work at watson elmentry and I forgot the bypass codes
    reply
  • nqhXncMU,
    7nD100sV'; waitfor delay '0:0:15' --
    reply
  • gBqsPxAZ,
    XBPkTcfX'; waitfor delay '0:0:15' --
    reply
  • nqhXncMU,
    555*474*469*0
    reply
  • nqhXncMU,
    LPioq7l6' OR 391=(SELECT 391 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    1 waitfor delay '0:0:15' --
    reply
  • nqhXncMU,
    555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
    reply
  • gBqsPxAZ,
    EAxGDwQY') OR 51=(SELECT 51 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    555*191*186*0
    reply
  • gBqsPxAZ,
    0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
    reply
  • gBqsPxAZ,
    etSAWnxq') OR 583=(SELECT 583 FROM PG_SLEEP(15))--
    reply
  • gBqsPxAZ,
    0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
    reply
  • gBqsPxAZ,
    -1)) OR 182=(SELECT 182 FROM PG_SLEEP(15))--
    reply
  • ncMUFCMU,
    X7uDP81u' OR 783=(SELECT 783 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    MbWSbcE3')) OR 939=(SELECT 939 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    -1" OR 2+738-738-1=0+0+0+1 --
    reply
  • ncMUFCMU,
    -1; waitfor delay '0:0:15' --
    reply
  • Nickolas,
    Everything You Need To Learn About Star Porn Star Porn
    reply
  • fHLvlxbf,
    -1)) OR 685=(SELECT 685 FROM PG_SLEEP(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