Our clients and partners often ask us about image specifications in eCommerce, like size or dimensions. The truth is that most modern themes support any image uploaded into the page builder. A technology like object-fit helps you resize an image to either cover the available space or fit 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 aspect ratios of the image and the container, parts of the image may be cut off. The image may lose parts 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 scale to fit within the container, potentially leaving empty space on the sides or 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 makes sure that any image, regardless of its aspect ratio or dimensions, fits perfectly wherever you place it.
Responsive Layouts
At this point you might ask—”is there guidance you can provide on aspect ratio?”
Responsive layouts scale to fit various devices’ viewports. A container’s aspect ratio may change at different viewport sizes. For example, when you size an image to match the height of a text area, it becomes 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 these examples show, each component within a theme may exhibit different behavior. While using object-fit is a modern best practice in theme development, not all themes 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: The code often resizes larger images automatically, 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 for Image Specifications in eCommerce
The best approach is to configure the theme directly with images, so you can see what options each component provides at various viewport sizes. This ensures that the content and images display as intended across all devices and viewports. If you encounter an undesirable layout, you can resolve it by adjusting the content, image aspect ratio, and 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 is impractical. Testing and adjusting within the theme environment is the most effective way to achieve the desired visual outcome.
If you want to optimize your eCommerce site with modern image specifications and need a partner who can ensure flawless visual presentation across all devices, reach out to Trellis. Let’s start a project today.
Leave a Comment