Instead of creating a new image size or uploading a completely different image just for mobile you might want to play around with object-fit and object-position CSS.
object-fit and object-position work basically the same as background-size and background-position but instead of being applied to background-image’s only they work on objects like the <img> tag.
Use these with media queries and you can specify how you want the image to look on mobile.
Check out this Fiddle. Notice how they use the same image but it looks more or less zoomed in at different widths, this is essentially what you want to do.
You can set these different values on object-fit…
- fill: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.
- contain: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
- cover: the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
- none: image will ignore the height and width of the parent and retain its original size.
- scale-down: the image will compare the difference between none and contain in order to find the smallest concrete object size.
Note: By default the image is centered within the content box. You can change this by using object-position.
Example:
img {
object-fit: none;
object-position: 50% 50%; /* default value: image is centered*/
object-position: 0 0; /* positioned top left of the content box */
}