Standard solution: a responsive image section
The robust recipe for images that work on all screens
§Scaling
- 01Let the image fill at most its container's width so it doesn't overflow the edge
- 02Keep the image's aspect ratio so it is not stretched out of shape
- 03Use media queries if the layout is to change at certain breakpoints
§Performance
- 01Compress images so files are not heavier than necessary
- 02Does not deliver a large image to a small screen if it can be avoided
- 03Consider loading images below the screen edge, only when needed
§Accessibility
- 01Provide meaningful alternative text that conveys the image content
- 02Mark purely decorative images so the screen reader skips them
- 03Ensure contrast and legibility if text is placed over an image