Today I Learned

Don't hide images with display: none

Images or wrapper elements that have display: none set, will still get loaded. So if you want to eg. load a different image for desktop and mobile, you can either:

  • use display: none, but with the loading="lazy" parameter set on img. Currently works on Firefox and Chromium
  • or use picture element with source. Over 95% support with a fallback to IE11 (just the img will be loaded.

See the example implementation of the 2 methods on Codepen.