CODEWITHSUNDEEP
javascripthtmlbase64
ata
ata

Reputation: 3640

One Base64 coded image for different images in HTML

I've created a light weighted html page. I want to use a same image for <link rel="shortcut icon">, <meta property="og:image"> and one <img> in <body>. The image is Base64 coded, so no external request is required. Pasting the image code for three times makes page a little heavy. I know I can use JavaScript to assign image to a variable then pass it to different images but what if the device doesn't support JavaScript? So my question is this:

Is there another alternative rather than JavaScript for using one Base64 image as different images source?

Upvotes: 0

Views: 111

Answers (1)

akg
akg

Reputation: 341

You can use CSS. E.g.:

.selector{
    background: url(data:image/gif;base64,R0lGO...);
}

Though it doesn't work for favicon. So you have to put it there 3 times, or use javascript.

Upvotes: 3

Related Questions