Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Often these techniques are used in unison because the first ensures image are visually the correct size whereas the second ensures that we are not wasting bandwidth by serving really large images to really small devices.

Here is a really good overview/primer explaining some of the high level concepts: https://www.lullabot.com/articles/fundamentals-of-responsive-images?utm_source=frontendfocus&utm_medium=email

CSS

The first technique is fairly straight forward and can be achieved with the following css: 

...