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:

<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.

Answers


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: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.


Need Your Help

End a .each and a setTimeout()

javascript jquery html css

I'm trying to figure out stop/start buttons using javascript and jQuery. I have a jsfiddle set up to try to understand it but I can't get it to work: http://jsfiddle.net/kkx7m88c/

Cannot get gradient to extend to the bottom of the browser

html css asp.net-mvc html5 css3

I'm trying to add a gradient to my web site's background. Unfortunately, I can't get the gradient to extend to the bottom of the page. The final result looks like this: