Serving the right file.
WHAT THE PROBLEM IS
An image sized for a large screen is wasteful on a phone, in bandwidth and in the visitor's data.
WHAT THE SOLUTION PROVIDES
Several files, with the browser choosing based on the display.
WHAT TO SPECIFY
The available widths How the image will be displayed, so the browser can choose correctly
WHY THAT SECOND PART
Without it, the browser assumes the image occupies the full width and chooses too large a file.
WHAT ELSE TO CONSIDER
Different crops for different shapes, where the composition matters.
WHY
An image composed for a wide screen loses its subject when cropped narrow.
WHAT FORMATS TO OFFER
Modern efficient formats, with a fallback for older browsers.
WHAT TO ALWAYS SET
Dimensions, so space is reserved and the layout does not shift.
WHAT TO DEFER
Images below the visible area, loaded only as needed.
WHY
It reduces initial load substantially.
WHAT NOT TO DEFER
Anything visible immediately.
WHAT TO TEST
Actual transferred size on a phone.
