Question

This is my HTML table on a test page (to be converted to a DIV table layout, but for now, it's just a test):

  body {
    font-family: Verdana, sans-serif;
    font-size: 12.5px;
    line-height: 14px;
  }
  
  table {
    width: 340px;
    background-color: #ffffff;
    border-collapse: collapse;
    border-width: 2px;
    border-color: #000000;
    border-style: solid;
    color: #000000;
  }
  
  td img {
    height: 80px;
  }
  
  td object {
    height: 130px;
  }

<table>
  <tr>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Flag_of_Manitoba.svg/188px-Flag_of_Manitoba.svg.png"></td>
    <td>
      <h3>Manitoba</h3>
    </td>
    <td>Manitoba is a province of Canada</td>
  </tr>
  <tr>
    <td><object data="https://www.urbansplash.co.uk/images/placeholder-16-9.jpg" type="image/jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/188px-Flag_of_Saskatchewan.svg.png" />
</object>
    </td>
    <td>
      <h3>Saskatchewan</h3>
    </td>
    <td>Saskatchewan borders manitoba</td>
    <td>
      <h3>New tourist destinations</h3>
    </td>
  </tr>
  <tr>
    <td>
      <picture>
        <source media="(min-width: 650px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/650px-Flag_of_Saskatchewan.svg.png">
        <source media="(min-width: 465px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/465px-Flag_of_Saskatchewan.svg.png">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/Flag_of_Saskatchewan.svg.png">
      </picture>
    </td>
    <td>
      <h3>Saskatchewan</h3>
    </td>
    <td>Saskatchewan borders manitoba</td>
    <td>
      <h3>New tourist destinations</h3>
    </td>
  </tr>
</table>

The placeholder image showed instead of the Saskatchewan flag for <object></object> even though I'd defined an image; why is this?

What are the advantages and disadvantages of object or picture tags over just using plain <img>?

Well, you have placed placeholder picture into the object and you see the placeholder. Seems like everything is okay tho You can read the difference between `img`, `picture` and `object` on MDN, it's clearly described there — Limbo, Nov 16 '20 at 12:39
Ultimately, a combination duplicate of [picture (source) element VS img srcset attribute](https://stackoverflow.com/q/24132972/215552) and [Do I use , — Heretic Monkey, Nov 16 '20 at 12:44

Kaiido · Answer 1 · 2020-11-17T05:16:26.830

Your object does point to a valid resource, so its inner content won't get rendered.

object { height: 80px }

<p>
  Valid source:<br>
    <object data="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
      <span>I'm inner content</span>
    </object>
</p>
<p>
  Invalid source:<br>
    <object data="foobar">
      <span>I'm inner content</span>
    </object>
</p>

The <picture> element offers a mean to select between various sources, based on media queries, and also offers an <img> fallback which works both for browsers that don't know about <picture> and for when no <source> are active.

If you need to set the source based on media-queries (e.g different screen size) then prefer the <picture> element.
<object> elements can load more than images and are often blocked by ad-blockers because they can even load HTML documents like an iframe. Similarly if you load svg images, they will allow access to the inner document (if from same-origin) and will be interactive (scripts can run, user-events are passed etc.), these can be advantages or disadvantages, given the cases. There are also some quirks where UAs are expected to remove the content of the <object> whenever it's not renderable (when removed from the DOM or when CSS display is none). Which leads to more computation.
Also, for reasons I never understood, browsers won't use the HTTP cache for resources loaded through an <object>.

1 Answers1