Responsive images should adapt to the available space without stretching, overflowing or breaking the page layout. They should also be appropriately sized so visitors do not download unnecessarily large files.
1. Make the image fit its container
If you are adding images with HTML and CSS, the image should be allowed to scale within its containing element.
A common approach is:
img {
max-width: 100%;
height: auto;
}
This allows an image to shrink when the available space is smaller while preserving its proportions.
2. Avoid fixed image dimensions that cause overflow
A fixed width can cause problems on smaller screens.
For example, an image set to a width larger than the mobile screen may extend beyond the page and create horizontal scrolling.
Use flexible sizing where appropriate and check how the image behaves at different screen widths.
3. Use appropriately sized image files
Making an image responsive does not automatically make the file efficient.
Do not upload a very large image when a much smaller version is sufficient for the space in which it will be displayed.
Resize and compress images appropriately before uploading them, while maintaining sufficient visual quality.
4. Use responsive image formats where appropriate
Modern websites can provide different image files for different screen sizes.
HTML features such as srcset and sizes allow the browser to select an appropriate image resource based on the device and display size.
This can reduce unnecessary downloads.
5. Check how images are cropped
Some layouts intentionally crop images using techniques such as object-fit: cover.
Check the mobile version to make sure important parts of the image are not accidentally cut off.
For images where the entire image needs to remain visible, a different sizing approach may be more appropriate.
6. Add appropriate alternative text
Responsive design does not replace accessibility.
Meaningful images should have appropriate alternative text, while purely decorative images can generally use an empty alt attribute.
Salesforce
