I am often asked by our clients and their partners, “Can you provide guidance on the size or dimensions of the images we should use?” The answer is quite simple: Most modern themes are designed to support any image uploaded into the page builder. Using a technology called object-fit, an image can be sized to either cover the available space or be contained within it. Here’s a brief overview of how object-fit works and why specifying exact pixel dimensions is impractical.
Understanding object-fit
object-fit: cover
The cover value ensures that the image covers the available space, but it may lead to cropping. Depending on the image’s aspect ratio and the container’s aspect ratio, parts of the image may be removed from the top and bottom or from the sides. object-fit: cover is generally best for lifestyle photographs where cropping is acceptable.
object-fit: contain
The contain property ensures the entire image is visible within the space, which might result in letterboxing. The image will be scaled to fit within the container, potentially leaving empty space on either side or the top and bottom. object-fit: contain is generally best for illustrations like icons and logos, or product photography, where cropping is undesirable.
Importance of Aspect Ratios
The closer an image’s aspect ratio is to the container’s aspect ratio, the less cropping or letterboxing will occur. As a result, the aspect ratio of the image is often more important than the image’s exact pixel dimensions. Nevertheless, object-fit allows any image aspect ratio and dimensions to work wherever an image is used.
Responsive Layouts
At this point you might ask—”is there guidance you can provide on aspect ratio?”
Responsive layouts scale to fit the size of various devices’ viewports, a container’s aspect ratio may change at different viewport sizes. For example, when an image is sized to match the height of a text area, it will become taller and narrower as the text wraps at smaller viewport sizes.
Another example is when a full-width image reaches its maximum height, as the viewport grows the image will become wider without increasing its height, leading to a wider aspect ratio.
Given these dynamics, it’s not feasible to provide exact guidance on aspect ratios.
As can be seen in these examples, each component within a theme may exhibit different behavior. While the use of object-fit is a modern theme development best practice, not all themes are programmed to take advantage of this technology. As such, the behavior of each image will depend on the theme, the component, and the content (the image which is used).
Best Practices for Image Use
Given the variability, providing specific guidelines for dimensions and aspect ratios is not usually possible. However, general guidelines include:
- Larger Images are Better: Larger images can be resized later and are often resized automatically within the code, addressing any performance concerns. While images can be downsampled (removing data to make the file smaller), there is no way to invent data that doesn’t exist in order to upsample an image to a higher resolution—as such enlarging an image will generally lead to artifacts like pixelation.
- Avoid Text within Images: Text within images can become unreadable when resized and may not respond well to different aspect ratios. Recommendation
The best approach is to configure the theme directly with images, so you can see what options each component provides at various viewport sizes. By doing so, you can ensure that the content and images are displayed as intended across all devices and viewports. If an undesirable layout is encountered, this can be resolved by adjusting the content, image aspect ratio, and/or component options accordingly.
In summary, while object-fit allows for flexibility and responsiveness in modern themes, the variability of aspect ratios and container sizes means that providing specifications for exact pixel dimensions are impractical. Testing and adjusting within the theme environment is the most effective way to achieve the desired visual outcome.