Internet Explorer and Base64 image display

Question

In aim to manipulate more easily various images on client side with Javascript, I wrote a function on server side (in VB 2010) to convert a file into a base64 string that I send to the client.

When I tried it in Internet Explorer 8.0 with 3 different images, 1 portrait and 2 landscapes, I realized that only the portrait image was displayed entirely, meanwhile both landscape images were truncated (I can see just the upper part of the image).

I thought I had a bug in my conversion function, until I tried my local page with Firefox: every image is perfectly displayed by Firefox.

So there is my question: Is this a well-known bug of Internet Explorer ? If the answer is yes, Is there a well-known remedy for that well-known bug?

Answer 1

IE8 can only do Base64 URI images up to 32kb in size. It's a marginally annoying limitation, but you can still get by with icons/etc. Keep in mind that Base64 encoded images are on average 33% more data sent down the pipe anyway, so it's... eh, y'know, use your judgement.

For anyone interested, it's also possible to make these work in IE6/7 (without, I might add, that 32kb limit...): http://venodesigns.net/2010/06/17/you-got-your-base64-in-my-css/

Answer 2

IE8 is limited to 32KB. One way around this is to just serve the images in 'tiles' where each tile is less than 32KB.