1

I used this to avoid loading some images below 800 pixel. It works but is it semantically correct?

<picture>
  <source media="(min-width: 800px)" srcset="//cdn.shopify.com/assets/desktop-01-03_600x.jpg?v=4672159065997956413">
  <img src="">
</picture>
Temani Afif
  • 180,975
  • 14
  • 166
  • 216
Tasawer Khan
  • 5,305
  • 6
  • 42
  • 66

2 Answers2

3

The markup is flat-out invalid. You can test this with any markup validation tool.

The semantics make no sense. If the image specified by the <source> element isn't loaded, then it should show the image specified by the <img> element instead.

In the days of HTML 4, the empty attribute value would resolve to the HTML document itself (because it is a relative URL) which wouldn't make any sense. In HTML 5, it is a flat out error.

If you don't want to load an image on a certain display size, then use a CSS media query to set it to display: none.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • 1
    but image will still be downloaded if display is set:none? – Tasawer Khan Oct 03 '20 at 12:45
  • @TasawerKhan `display: none` prevents the element being rendered. So if what you mean by downloaded, the user will not see it if it's not being rendered. – Jamie Reardon Oct 03 '20 at 12:46
  • 2
    it will still affect speed of the page even though user will not see it. I replaced empty src with 1 pixel image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" – Tasawer Khan Oct 03 '20 at 12:52
  • this is discussed here https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading – Tasawer Khan Oct 03 '20 at 12:57
0

Yes this markup is perfectly valid! Assuming you are going to fill in the empty required attributes (src and alt for the img element). You can use the picture element to specify multiple source files for a child image element.

Also consider using a figure element - Which is used for self-contained content such as illustration, diagrams, photos, code listings.

Along with that you can use the figcaption element - Which is the caption for a figure element.

Jamie Reardon
  • 87
  • 2
  • That’s a very bad assumption to make given the context. Since they said they don’t want to load an image below that size, the question appears to be asking if it is right to throw the browser into an error state by leaving the src attribute blank. – Quentin Oct 03 '20 at 12:29
  • I don't see the question as that @Quentin, I assumed the op made a template of what he is trying to use (picture element and source attribute). He doesn't need us to see the value of the src or alt attribute? I assume he is already aware of those being required. Plus I also mentioned that in my answer. – Jamie Reardon Oct 03 '20 at 12:30
  • I read the first sentence of the question instead of just looking at the code. If the image specified by the source element isn’t loaded because of the media query, and the img isn’t in an error state, then the img will be displayed: which is the opposite of what the question is asking. – Quentin Oct 03 '20 at 12:32
  • Quentin, can you suggest how can I make markup better?. what is this error? there are no errors in console – Tasawer Khan Oct 03 '20 at 12:36
  • @TasawerKhan — user4642212 already pointed out the obvious errors in a comment on the question. – Quentin Oct 03 '20 at 12:37
  • Thanks. But I am interested in as you suggested the empty src value. – Tasawer Khan Oct 03 '20 at 12:39