How can I embed large images in html documents?
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:
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.
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.
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:firstname.lastname@example.org"></table></div></body></html> --_=_Boundary_001_VXUXGWO1.FBLEINFI Content-Type: application/octet-stream; name="1.jpg" Content-Disposition: attachment; filename="1.jpg" Content-ID: <email@example.com> Content-Transfer-Encoding: base64 Content-Description: 1.jpg /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA...
Notice the src="cid:firstname.lastname@example.org" corresponds to the Content-ID tag just above where the actual image data starts.