Images

Responsive Images

Set image widths with percentages to allow them to resize with their parent elements
Do NOT set heights on images because this will ruin their aspect ratio

img,
video {
  width: 100%;
  height: auto;
}

Picture Element

picture elements allow us to set different image sources based on device properties
picture elements use an img element as a fallback.
MDN picture element ref
The img element will be used as the container to render the picture.
Multiple source elements are used to load different versions of the picture.
Each source element gets a media attribute which defines the parameters for loading the image.

<picture>
  <source srcset="hugePic.jpg" media="(min-width: 1200px)" />
  <source
    srcset="normalPic.jpg"
    media="(min-width: 800px) and (max-width: 1200px)"
  />
  <source srcset="smallPic.jpg" media="(max-width: 800px)" />
  <img src="default.jpg" alt="image description" />
</picture>