Usage
Shapes
An image can use a different shape.
Sizes
An image can vary in size.
Object fit
An image can have different object fits
Retina
You can let the browser decide which image is best to serve according to the user device screen pixel density.
It is highly recommended to serve a 1x image as well as a 2x image, twice the intended size. This assures the user has the best looking image possible.
Avoid serving images that are unecessary big, images should be resized to the intended final image display size. This assures we don't waste bandwith for the user.
SvgImage
For some use cases, like dark mode support, an SVG image is a better fit than a standard PNG or JPG image.
Size
An SVG image size can be specified with the width and height props.
Color
An SVG image stroke and fill color can vary.