Pngfix.htc seems to be squishing my png images. It's quite obvious when reloading sometimes because the png will show in its correct size, then shrink (I assume) as the behavior code is loaded and invoked.

What's pngfix.htc?

It's a script that is called from a CSS file that allows support for PNG alpha transparency in IE5.5 and IE6. I don't invoke any transparency on this site (currently) but the script is a standard feature of every (will be a standard feature of every) Vine Type website.

Two images, one PNG and one JPEG. The PNG image on the left used to be squished. See below.

Jpegs don't appear to suffer this problem (see below) and the behavior code has several checks for width=auto -- which would be the case for pngs in articles.

I'll be contacting the HTC developer soon to discuss this pressing issue.

Update:

I was able to adjust the behavior code to set both the height and width of the png image, so the png above should not appear squished anymore. Here's a screenshot of what it looked like before my behavior code modifications:

This is a single JPEG image showing what the two images above looked like before my script modifications.

The behavior script, when finding an IMG element that had no width= or height= attributes (this should not normally be the case but is the case for Vine Type websites -- see below) sets a width but doesn't set a height.

The behavior script was setting the width from the widthOffset property and relying on the scale parameter of the MS filter to adjust the height. According to my copy of O'Reilly Media's Dynamic HTML 2nd Edition by Danny Goodman, widthOffset adds border and padding to the width property.

Instead, I set the height and width values in the IMG element's STYLE attribute directly from the image's height and width properties and it now shows correctly.

Why doesn't Vine Type place height and width values around images?

Glad you asked. Adding height and widths to IMG elements is a good deisgn practice. It is a help to the browser's rendering engine to know how much space on the client's browser window need to be reserved (before actually pulling down the image.)

Vine Type uses Markdown for text input and Markdown omits the height and width values -- deferring to the browser proper display of the image. This is, no doubt, because of one of the overriding tenents of Markdown: simplicity.

The creators of Markdown probably see adding image dimensions as unnecessary burden for the person inputing information, and frankly, I tend to agree. So in this case, I am not following best practices in order to provide an easy text entry mechanism.