Art-direction and responsive images

Let's get back to the issue with the responsive image in our article page example. The problem is that on wider viewports, the image becomes stretched and pixelated as it is scaled. This is because the intrinsic size of our original image is smaller than the viewport on larger screens.

To get around this, you might decide to use a larger image, so that no matter how big the screen is, the image will never be scaled up. The problem with this approach is that it's not good for performance. In most cases, the user will end up downloading a larger image than is needed. Since images are one of the biggest contributors to the page size, if you have a few images like these, they can add up to poor page-load times.

Luckily, there is an HTML5 feature that AMP supports that offers a way to fix this: the srcset attribute.