3 ms·

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 im

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.

khalwat 7y ago
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.
- jakelazaroff 7y ago
  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.
  - khalwat 7y ago
    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.
zamadatix 7y ago
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?
- zzo38computer 7y ago
  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.)

khalwat 7y ago

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.

jakelazaroff 7y ago
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.
- khalwat 7y ago
  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.

zamadatix 7y ago

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?

zzo38computer 7y ago
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.)