Problems with the CSS background-image property

Re:Problems with the CSS background-image property by zzzcpan on Sunday July 28, 2019 @06:57AM (#20546875)

Overall the advice is pretty bad and the article doesn't even follow its own advice. Instead we get this crap that doesn't care about accessibility and loads images with javascript (3rd party javascript!):

   <picture>
      <source ...>
      <img class="..."
           src="data:... (placeholder, no image)"
           data-sizes="..."
           data-srcset="..."
           data-lowsrc="..."
           alt="..."
           height="auto"
           width="100%">
   </picture>

Just don't use javascript for images and static content. It's better for SEO, for accessibility, it respects people's privacy, it works much faster.

[ Parent | on HN ]

Re:Problems with the CSS background-image property by khalwat on Sunday July 28, 2019 @08:47AM (#20547239)

Author here. What advice is "bad" in your estimation?

As for not following my own advice, that's not quite right. I'm using picture and img tags rather than div's with CSS background-image, which is the main thrust of the article.

I'm also using srcset for performance, and webp as a progressive enhancement for browsers that support it.

The only thing I'm not doing is using the new loading="lazy" because the website was creating long before the article.

[ Parent | on HN ]

Re:Problems with the CSS background-image property by jakelazaroff on Sunday July 28, 2019 @01:01PM (#20548543)

Given that all the images in the article are purely decorative, why you using picture and img tags rather than CSS background-image? You're also supplying alt attributes, so someone with a screen reader will hear a random "Bad boy doggo" in the middle of an article about HTML and CSS.

[ Parent | on HN ]

Re:Problems with the CSS background-image property by khalwat on Sunday July 28, 2019 @01:16PM (#20548625)

Agreed; if the images are purely decorative (some are, some are not) then it should have an empty `alt=""` to have screen readers skip them.

But I would still want to use an actual picture element with srcset & source attributes/tags for the reasons mentioned in the article.

[ Parent | on HN ]

Re:Problems with the CSS background-image property by zamadatix on Sunday July 28, 2019 @11:20AM (#20547979)

Efficiency/SEO sure but what makes this bad for accessibility? It's a standard <img> with alt text, does it matter for accessibility where the final pixel data comes from?

[ Parent | on HN ]

Re:Problems with the CSS background-image property by zzo38computer on Sunday July 28, 2019 @01:12PM (#20548607)

In case you are using a browser without JavaScript or have disabled JavaScript, or are using some customizations which the script on the webpage is not compatible with, then using a script to load the images can be bad for accessibility. (There is a legitimate reason to do so, but it is unfortunately used for many cases when it is not a good reason. If the width and height are hard-coded, then when the images should be loaded is possible to implement in the browser, subject to user settings, without needing a script on the web page.)

[ Parent | on HN ]