Show same image with different resolution at smaller screen widths

[SamuelmdLow]

With smaller screen size you benefit less from high resolution. You often also have slower machines (phone instead of laptop). We can improve site performance using css media queries by hiding large resolution images when the screen width is small and showing the same image with lower resolution

[SamuelmdLow]

Actually what I said was wrong. Use this https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images (thanks peter!)

[Nishim12]

We can combine this with image renditions so that we can get multiple sizes of images then we can use the srcset and sizes tags to improve performance maybe. Here is the documentation for creating multiple image renditions https://docs.wagtail.org/en/latest/advanced_topics/images/renditions.html