0

I want to attach some kind of a keyword/tag to a line of code and reference that keyword throughout my HTML file instead of having to re-write the entire line of code each time.

For example, attach the tag TestPic1234 to the code of <img src="img_chania.jpg" alt="Flowers in Chania"> so that throughout my HTML file, TestPic1234 automatically means <img src="img_chania.jpg" alt="Flowers in Chania">.

This is all mostly so I can avoid unnecessary clutter and to reduce total filesize (especially when working with Base64 images).

I've looked online and the only thing that came close to what I'm looking for was the id / class tags but that still wasn't what I'm looking for (or maybe I misused them but I doubt it)

alaska_penguin_9898
  • 1
  • This question was answered here https://stackoverflow.com/questions/7176149/use-a-base64-embedded-image-multiple-times You can achieve it with CSS. – vovchisko Nov 19 '20 at 15:25
  • @vovchisko Thank you for your response. I checked the thread you linked and the OP is simply advised to use CSS and `class`. I have been unable to achieve that as I mentioned. Can you show me what is the right code in my example? – alaska_penguin_9898 Nov 19 '20 at 15:39

1 Answers1

0

Move your base64 image to CSS:

<style>
.image-a { 
  width: 130px;
  height: 130px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/gif;base64...[your data-url image here]');
}
</style>

Then your HTML would be:

<div class="image-a" > </div>
<div class="image-a" > </div>
<div class="image-a" > </div>

Codepen to play: https://codepen.io/vovchisko/pen/dyXEZdv

vovchisko
  • 2,049
  • 1
  • 22
  • 26
  • Why when I replace `data:image/gif;base64...[your data-url image here]` with a URL like `https://upload.wikimedia.org/wikipedia/commons/image.png`, the image won't show? Is it strictly for Base64? – alaska_penguin_9898 Nov 19 '20 at 17:22
  • @alaska_penguin_9898, I can't open this image too. Make sure that this image actually exists. – vovchisko Nov 20 '20 at 12:46
  • No, this link was just a template. I tried with another one from wikimedia and it wasn't working. Just to be clear, it *is* supposed to work with images from web links as well -- not just Base64, right? – alaska_penguin_9898 Nov 20 '20 at 20:08
  • It's not strictly for base 64. CSS property `background-image: url()` can contain any image URL or base64 URL. Can you show some codepen with a non-working background? – vovchisko Nov 20 '20 at 22:05
  • You are absolutely right. Maybe I did a typo when referencing the first one I tried with, but now I tested several other ones I found on Wikimedia/Google and they do indeed work. (Sorry about that) –––– I've another question, if you don't mind, what is the bare minimum code required to just reference the image and nothing else (decorations and whatnot), i.e., the exact CSS's equivalent to HTML's ``? Is it `background-image: url()`? (I tried removing some code here and there myself, but it broke the image) – alaska_penguin_9898 Nov 21 '20 at 09:22