Genii Weblog
Explaining the 'shifty images'
Wed 10 Jun 2009, 02:52 PM
Tweetby Ben Langhinrichs
A couple of people have written to ask if I know why the images got shifted in my post, You might want to change your Outlook: Shifty images, and why other images coming from Outlook do not get shifted. The reason appears to have do with the browser wars. Normally, an image to be displayed would looks something like this in HTML:
<img src="/images/GeniiLogo_RGB.jpg" width="245" height="94" alt="Genii Software">
In a MIME message, this would be more like:
<img src=cid:_1_000000000382852575090066C475 width="245" height="94" alt="Genii Software" border="0">
where the cid:_1_000000000382852575090066C475 is a separate MIME part for the image. In the case where text should be to the right of the image, and thus the image should be aligned left, we would simply make the HTML:
<img src=cid:_1_000000000382852575090066C475 width="245" height="94" alt="Genii Software" border="0" align="left">
But this standard way of representing images is not good enough for Microsoft. No, they instead have the following code (and I kid you not, as this is straight from the source sent out by the message I showed):
<v:shapetype id="_x0000_t75" coordsize="21600,21600"
o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
stroked="f">
<v:stroke joinstyle="miter" />
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0" />
<v:f eqn="sum @0 1 0" />
<v:f eqn="sum 0 0 @1" />
<v:f eqn="prod @2 1 2" />
<v:f eqn="prod @3 21600 pixelWidth" />
<v:f eqn="prod @3 21600 pixelHeight" />
<v:f eqn="sum @0 0 1" />
<v:f eqn="prod @6 1 2" />
<v:f eqn="prod @7 21600 pixelWidth" />
<v:f eqn="sum @8 21600 0" />
<v:f eqn="prod @7 21600 pixelHeight" />
<v:f eqn="sum @10 21600 0" />
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" />
<o:lock v:ext="edit" aspectratio="t" />
</v:shapetype>
<v:shape id="_x0000_s1027" type="#_x0000_t75" style='position:absolute;
margin-left:0;margin-top:0;width:183.75pt;height:70.5pt;z-index:1;
mso-position-horizontal:left;mso-position-horizontal-relative:text;
mso-position-vertical:top;mso-position-vertical-relative:line'
o:allowoverlap="f">
<v:imagedata src="cid:image001.jpg@01C9E9B5.20EC9DE0" o:title="geniiLogo_RGB" />
<w:wrap type="square"/>
</v:shape>
Complicated, but is that all that is wrong with it? No, the fundamental problem is that it is not using an img tag, but instead these various tags that are only recognized by Internet Explorer, such as v:shapetype and v:imagedata. Since those are not standard HTML, they are not displayed by Firefox or Chrome or Safari, just by Internet Explorer. Even Internet Explorer only recognizes them in certain contexts, so these all fail the same way in Internet Explorer when read from the iNotes, Gmail and Mail.com. When the tags are not recognized, the image MIME parts are just considered unused images, and are displayed at the end of the message. If this complexity were really necessary, that would be one thing, but remember, this could have been handled by the following line. Clearly, this is just an effort to make the Internet only really compatible to Outlook itself.
<img src=cid:_1_000000000382852575090066C475 width="245" height="94" alt="Genii Software" border="0" align="left">
So, remind me again about how Outlook is standards-based and renders properly. The real question is not why Microsoft pulls these stunts, but why we let them get away with it and don't make the truth clear to our customers/clients.
Copyright © 2009 Genii Software Ltd.
What has been said:
821.1. Ben Langhinrichs (06/10/2009 08:55 PM)
Nathan - Absolutely correct. I didn't think it would mean much to people, but that is the origin of this code. Unfortunately, it means that unless and until this is adopted into the other browsers, you never know whether your carefully formatted Outlook email message is going to look like a smoking pile of dung when it gets to your potential client.
But no matter, I am sure they will look at it and blame Microsoft, right?