0

I am embedding base64 images in my web page projects and I want to keep it all organized but the base64 takes up large sections of the markup making it hard to read and debug.

Is there a way to separate base64 strings to another location on the page? 

<html>
  <head>
  </head>
  <body>
    <!-- markup here -->
    <!-- markup here -->
    <!-- markup here -->
  </body>
</html>

Is there a way to organize the base64 string all together at the beginning of the body tag or at the end?

Update
There are examples of moving the image data to CSS as a background image and then assigning the class. That might work for some cases but not for cases where an image behavior is expected.

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • You might store them in an external JSON and import them using the ` – ostrebler Mar 05 '19 at 20:50
  • 1
    Could your base64 images be moved into CSS: [Is there a way to set background-image as a base64 encoded image?](https://stackoverflow.com/q/17090571/1115360) – Andrew Morton Mar 05 '19 at 21:34
  • @AndrewMorton That would work for setting a background image of an HTML element but I have several images (img tags). The behavior of an image tag would be different than a div with a background image. – 1.21 gigawatts Mar 08 '19 at 05:39

1 Answers1

1

If you are using CSS and want to keep the code organised you can place the data image url in css and call it using div in the body. check the example code

<!DOCTYPE html>
<html>
<head>
<style>
#someclass {
 /* single gray pixel - repeated */
 background-image:
  url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
 background-repeat: repeat;
 background-position: left top;
 position: absolute;
 left: 30px;
 top: 68px;
}
</style>
</head>

<body>
 <div id="someclass">sssssss....</div>
</body>
</html>
1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
Juke
  • 1,306
  • 2
  • 11
  • 27