Responsive and adaptive images
Why should a 320px wide smartphone load the same 1920px wide image a huge desktop monitor would need?
Specifying what you want
Adaptive (or responsive) images here means different images for different devices. The is still in progress but while we wait there is scottjehl/picturefill which mimics the proposed spec.
Getting what you want
When your front end is asking for different (sizes of) images you also need to have them. Generating everything manually would become very tedious so you need some automation.
This is a server side solution that will return a responsive image based on the variables passed through as a part of the query string.
srcset - Images to use in different situations (e.g. high-resolution displays, small monitors, etc) sizes - Image sizes between breakpoints
- Define a list of image resources
- Specify their physical dimensions i.e. width in pixels
Fixed width image with support for DPR
<img src="cat-500px.jpg" width="500px" alt="" srcset="cat-750px.jpg 1.5x, cat-1000px.jpg 2x">
Here, the same image will be displayed in a 1920px wide screen and a 320px screen. Only DPR will change the image.