3

I need to create an HTML file that will be stored on disk; later a user will attach this file to an email and send it to a user who will click on the file to have it display in their browser. My customer requires that the image file be embedded directly in the saved html file, not as a link to a URL that gets loaded when the doc is opened in the browser.

I've seen (and tried) the base64 code that looks like this:

<IMG SRC="data:image/gif;base64,

but my images are 150K or larger and at least in IE8, they are too big to display properly.

Is there another way to get large images embedded (not linked) into an HTML document? Remember, I won't have a program running that is interacting with the browser.

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
John DMC
  • 95
  • 7
  • http://stackoverflow.com/questions/2329364/how-to-embed-images-in-a-single-html-php-file – Christopher Schroeder Jun 13 '12 at 21:08
  • 1
    @ChristopherSchroeder - The OP is using that and explains that it doesn't work. – Oded Jun 13 '12 at 21:10
  • Googling "embed image directly in html" has plenty of example, including: http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html – Stewart Jun 13 '12 at 21:11
  • I don't believe there is a way to do so. The data URI scheme is limited to small images and as far as I know is the only way to "embed" image data in the markup. – Oded Jun 13 '12 at 21:11
  • 1
    @Stewart - Yes. And that link is exactly what the OP is having problems with. Read the question and the link before posting. – Oded Jun 13 '12 at 21:12
  • Will your client accept you converting the HTML into a PDF and sending that as the attachment instead? – Brad Jun 13 '12 at 21:27
  • 1
    If size is the problem, then maybe split your image into two halves, base64 encode each half separately, and then use two image tags wrapped in a
    – Stewart Jun 13 '12 at 21:33

2 Answers2

2

IE 8 has a data uri limit of 32k (http://en.wikipedia.org/wiki/Data_URI_scheme), which is why things are failing for you there. Also, Versions of I.E. below 8 won't support this.

That I know of, there is no way around this. You could, however, break up the image and encode separate parts of it. Since it sounds like this content isn't dynamic in any way, that might not be too hard. Otherwise, you might just want to use a CSS hack to server a different style to IE8 and below or attempt to load the image from a server for those browsers.

MikeCruz13
  • 1,254
  • 1
  • 10
  • 19
  • mhtml ie data uri fix http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ – albert Jun 13 '12 at 22:00
2

Thanks to all, but Albert's post gave me the answer, a bit indirectly, though. I originally created my html document as an email and imbedded the image directly in the email, mixing htm & mime. All I needed to do was change the extension on my document from .htm to .mht.

The pertinent part of my document code is:

<img border=3 width="360" height="360" src="cid:001@mime.mail"></table></div></body></html>
--_=_Boundary_001_VXUXGWO1.FBLEINFI
Content-Type: application/octet-stream; name="1.jpg"
Content-Disposition: attachment; filename="1.jpg"
Content-ID: <001@mime.mail>
Content-Transfer-Encoding: base64
Content-Description: 1.jpg

/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA...

Notice the src="cid:001@mime.mail" corresponds to the Content-ID tag just above where the actual image data starts.

John DMC
  • 95
  • 7