If you look at the original post on Voxeo's blog, you can see that the images look fine there:
And in the RSS feed, viewed in a browser, the images look fine, too:
What's the issue? I'm sure some of you have figured it out by now... the image we are using for Tobias Goebel is in fact a larger image than we are showing in the blog post. The image is 302x420 pixels. We are then using the width and height attributes of the <img> tag to reduce the display of the image to the smaller size. In the IMG tag, we have these attributes:
And sure, we can get into a philosophical discussion around whether this is the right thing to do or not. I personally do not do this in general because from a speed point-of-view you are sending a larger image file than you need for a display. I resize my images to the size I want before uploading. In this case, I grabbed a link to the image from another post without realizing it was doing this type of image resizing via attributes. My mistake.
Be that as it may, the point is that the post is out there... it is published... and...
FACEBOOK IS IGNORING THE HTML ATTRIBUTES!
Facebook is simply ignoring the width and height attributes.
Given that we as authors do often use those attributes to specify the size of our images, why wouldn't Facebook render them correctly?
This of course makes me wonder... what other attributes is Facebook ignoring? Do I have to be checking every single post that gets imported into Facebook to make sure it looks right?
Thinking that I could just simply go into the text of the "Note" and change this, I naively went into Facebook, used the "Use Facebook As Page" feature to switch to "Voxeo" so that I could edit the www.facebook.com/voxeo page... and promptly found a completely blank Wall:
Nice, Facebook... really nice. :-(
I tried it in both Google Chrome and Firefox. No joy.
This is for the entire Wall of the Page. I see... nothing. I'm not even looking at the specific post yet.
I can switch back to "Use Facebook as Dan", of course... but then the only option I seem to have is to delete the post. There is a "Edit" button, but that just lets me add tags to the post.
So for the moment it appears that Tobias is going to be stuck with a huge image until I can go through the process of:
- Deleting this "Note" out of Facebook.
- Changing the original post to have a smaller image of Tobias.
- Re-importing the post to Facebook either as a Note or as a link.
Multiple steps that could be completely avoided... if only Facebook respected the HTML attributes of the original post.
Ah, the fun, fun, fun of living in the Facebook world...
If you found this post interesting or useful, please consider either: