...
Understanding how the browser crops background images
If we take a look at the image below we can examine how the background image gets cropped when displayed on desktop vs mobile. The browser will always center the image in the image container and will always maintain the image aspect ratio. In order to do that, it scales the image to fit either the height or the width of the container and then crops off the overflow. This means content around the edge (sides, top, and/or bottom) of the image is likely to get cropped out in some aspect ratios.
Selecting the right images
When working with resorts on image selections it is important to select images that centralize the focal point (the main focal element(s)) of the image. If the image has its focal point too close to the edges, it is likely to get cropped out on some device aspect ratios. When requesting images from resorts, be sure to communicate this to them so that they are not providing you with images that are going to have undesirable results.Preparing the images
Sizing and cropping images can be done right in both the Windows and Mac image preview tools. But a more powerful free option is GIMP (Gnu Image Manipulation Program) https://www.gimp.org/downloads/, which I will be using for this lesson. Before uploading an image you will want to scale and appropriately pre-crop the image to the required size for the image location.
Tips for scaling and cropping.
- If the resort provides an image with the focal point off center, consider how you can crop that image to size to centralize the focal point
- If the image is larger than the size requirement, use this to your advantage. You may not need to scale it at all and instead you can crop it to the correct size while centralizing the focal point of the image.
- Always try to crop first for a good focal point, then scale as needed
Consider this example (red overlay indicates the crop area). The image provided was larger than the requirement, and the focal point (the skiier) is a bit too much off center. To fix this, instead of scaling the image down to size we can crop out the size we need while centralizing the focal point. We solved two issues with a single crop. Now when the image gets cropped in the browser to maintain the aspect ratio, the focal point will remain visible.
Finally, optimize the image by running it through the TinyPNG optimizer at https://tinypng.com/.