The Solution With Media Queries (Does not really work)

The idea is that we have images of different sizes. Then we use media queries to "display: block" and "display: none" different images.

There are are few issues with this.

  • The browser does not load only the one image it needs. It loads all.
  • This approach does not factor in "Retina" displays. The image will look blurry on them. (Can be fixed, way more work)
  • Code is a mess.