Member Avatar for developer707

Hello,
I am trying to make a .html document that has an image inside it.
I have seen this before, but I don't know how to do it.
The idea is here I don't want a index.html and image.png files, but I want just a index.html that
containd the content of image.png inside it.

Could someone help me?!

  • 4 Contributors
  • 5 Replies
  • 270 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

As discovered, you can deliver a single-file page that contains an image instead of separate files. pointed to the Data‑URI approach and suggested CSS backgrounds; both are valid. The short guidance below fills in tradeoffs, practical workflow steps, and safer alternatives that weren't covered in the replies.

Embed vs external files — tradeoffs:

  • Convenience: single-file pages (demos, one-off shares, some email templates) are easier to move around.
  • Cost: encoded images add overhead (base64 encoding increases size by roughly one third) and stop the browser from caching the image independently. For that reason, avoid embedding large photos or many images; keep inlined assets tiny (icons, small logos).
  • Accessibility: use a real image element for content images so you can provide alt text and correct semantics. Use CSS backgrounds only for purely decorative images.

How to produce the embedded data (workflow)

  • Convert the binary to a base64 string with a quick script or tool (examples below). After you have the base64 text, combine it with the appropriate MIME header for the image type and put that where an image URL would normally go in your HTML or stylesheet. Test the final file in the browsers and devices you target — very old browsers or some email clients may have length or support issues.

Examples (convert to base64)

# Node.js
node -e "console.log(require('fs').readFileSync('image.png').toString('base64'))"

# Python 3
python3 -c "import base64;print(base64.b64encode(open('image.png','rb').read()).decode('ascii'))"

Alternative: inline SVG
Embedding the SVG markup directly in HTML is often smaller and more flexible for vector artwork; it remains selectable, stylable with CSS, and accessible via ARIA. If you run into unexpected size or caching problems, consider bundling tools or serving separate files instead.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

So, aside from using <img /> elements within your HTML document, you could also "embed" an image via CSS using the background-image property assigned to an element on the page.

For example...

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style> 
body {
 background-image:url('images/grid.png')
}
</style>
</head>
<body>

</body>
</html>

[edit]
maybe i misunderstood now that I see paulkd's post. If you are interested in embedding pictures without having to reference a source picture, the link he provided covers that. If that is what you are looking for, there are quite a bit of sites online where you can upload a picture and the output will be a base64 string you can use in your HTML file within the <img /> element for the src attribute..

For example..

<img src="data:image/png;base64,iVBORw0K...." />
[/edit]

Edited by JorgeM
Member Avatar for paulkd

I've never done this before and probably never will.

Have a look at this article on Wikipedia

Member Avatar for johmny

<img src="filename"></img>
this is tag to embed the image in html

commented: you missed the Q entirely, is not a how does the img anchor work, is how does multipart-mime work -3
Member Avatar for developer707

Thank you for your help. The solution for my problem was:

<img width="320px" height="90px" src="data:image/gif;base64,iVBOsd........" />

Member Avatar for JorgeM

glad to hear that you were able to get your question answered and solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.