Where do you host temporary images PNG/SVG for use in a Codepen?

General Web Dev
6

Once you have that code, you can paste it into your HTML, and it will appear as is.

If you want to use it in your CSS, or inside an img element, for example, then you need a “data URI”, which is different. This also works for other image formats, too.

Again, there are many tools, but I like to use Chrome. So—

  • drag the image (be it an SVG file or PNG or whatever) into a new tab in Chrome, and it should display on screen.

  • right click on the image, and choose Inspect Element.

  • Right click on the image’s URL in the Inspector, and choose Open Link in Resources Panel:

  • in the Resources panel, right-click on the image and choose Copy Image as Data URL:

The copied code is a long string of gibberish, starting with something like this: data:image/png;base64,. You can then use that code in several ways:

  • in your HTML, as the src of an image: <img src=“data:image/png;base64,iVBO…ltkg”>

  • in your CSS, like so: background-image: url(data:image/png;base64,iVBO…ltkg);

Hope that helps!

2 Likes