Is it valid to include images with <object> instead of <img>?

Question

Inspired by this question, where the poster casually states as fact that <object> should be used instead of <img> to embed images in HTML documents.

I'm developing a web app at the moment, and, being a perfectionist, I try to make it all shiny and compliant with all the standards. As far as I know, the <img> tag is to be deprecated in the upcoming standards for xHTML, and as nowadays even IE is able to handle <object> properly, I wanted to use the <object> tag for all the images on my site

It became clear that the "upcoming standards" the poster was talking about was the abandoned XHTML2 spec, which didn't even formally deprecate <img> anyway. (Although there were apparently rumors to that effect.)

To the best of my knowledge, I've not seen anyone in the web development community advocating for the usage of the general-purpose <object> tag over the arguably more semantic and definitely more compatible <img> tag.

Is there a good reason to use <object> instead of <img>? Should <object> even be used at all in place of <img> – what might this break?

Answer 1

To answer the question in the heading: yes, it is valid, of course. The validity of an object element does not even depend on the type of data being embedded. If you meant to ask whether it is correct, then the answer is yes, there is nothing in the specifications that would forbid it or recommend against it.

Among the possible reasons for using object to embed an image, the most practical is that it allows the fallback content to contain HTML markup, such as headings, lists, tables, and phrase markup. The img element lets you specify only plain text as fallback content—even paragraph breaks cannot be specified.

For accessibility reasons, any image should have fallback content to be rendered e.g. when the document is used in nonvisual browsing (screen reader, Braille, etc.) or the image is not displayed for one reason or other. For any content-rich image (say, an organization chart, or a drawing describing a complex process), the fallback content needs to be long and needs to have some structure.

However, it is rare to use object for embedding an image. The importance of fallback content is not widely understood, and practical economical and technical considerations often cause fallback issues to be ignored. Moreover, object has a long history of slow, buggy, and qualitatively poor implementation in browsers. Only recently has it become viable to use object fairly safely for image inclusion.

The question which element is more semantic is mostly futile, and answers typically reflect just various ways to misunderstand the concept “semantic.” Both img and object mean inclusion (embedding) of external content. The img element is in principle for the inclusion of images, whatever that means, though it has also been used to include videos. For the object element, the type attribute can be used to specify the type of embedded content, down to specific image type, e.g. type=image/gif, or it may be left open.

This implies that the object element is more flexible: you can leave the type unspecified, letting it to be specified in HTTP headers. This way, the type of the embedded data could be changed without changing the object element or the embedding document in general; e.g., you could start with a simple version where the embedded content is an image, later replaced it by an HTML document (containing an image and text for example).