Your website is responsive. That means it adapts so it can be viewed on different screen sizes. As such, your website might be viewed on anything from a widescreen monitor to a small portrait phone. These devices vary enormously in terms of both their size and their ratio. This makes choosing images and video for your website difficult as there is not one specific size that can be used.
As your website adapts, it will crop the image accordingly to ensure the image or video still takes up the entire screen whilst ensuring the image is not distorted. However, a portrait phone or a landscape desktop screen have completely different ratios. It means the height of your image or video will always fit the height of the screen, but the sides of the image or video will be cut off in order to preserve the image’s ratio.
Explaining image/video ratios
To use an example, if you have a landscape family photo and you attempted to put it in a portrait frame, it would either fit the width of the frame but have gaps above and below the image:
Or it would fit the height of the frame but the sides would not fit in:
It’s why you’d use a portrait frame for a portrait image, or a landscape frame for a landscape image. However, in the digital world you don’t have this luxury. The image needs to be displayed on a whole host of screen sizes which are effectively a series of different frames.
The digital world is no different to the physical world; we cannot make a photo maintain it’s ratio AND fit on any screen size. They are not compatible and it is simply impossible.
It is why you see black bars above or to the side of certain films or television programmes on your TV. It’s because they are filmed in slightly different ratios and different TV manufacturers have different screen size ratios as well. The black bar ensures the programmes ratio is maintained without distorting, whilst getting it to best fit on the television.
What do you recommend?
For images or videos that will be a background image on your website, we recommend you use abstract images/videos, or ones whereby it will not matter if the screen is cropped. This usually means:
Avoid:
Videos/images with wording in. Use plan images without wording, and simply add the wording as text to the website itself
Images/video where the image itself cannot be cropped (ie: portraits where the head is near to the edge of the image)
Try to use:
Images with plenty of space either side or above the main subject
Wide drone footage or expansive backgrounds
Abstract shapes/patterns or soft focus imagery
If in doubt, please contact us for advise before purchasing any stock photography/videos or commissioning photo or video shoots. We can then help advise for your website.
The following image displays how the website will crop an image or video:
