Image sizing
Image Handling
The theme automatically handles image resizing and compression based on the user’s screen size, ensuring optimal loading times and display quality. This means that you should always upload the highest quality and largest version of an image available to you.
Recommended Image Sizes
- Upload High-Resolution Images: Always upload images at the highest resolution possible. This ensures that your images remain sharp and clear on all devices.
- Match image shape with section shape: Align the shape of your images with the section they will be displayed in. For example, if your slideshow section is designed for landscape images, uploading a portrait image might not display as intended.
- Consider the final display size: Although the theme adjusts image sizing, uploading images that are close to the dimensions they will be displayed can reduce unnecessary cropping or distortion.
Specific Section Considerations
Some sections, like slideshows or image banners, might have specific size or aspect ratio recommendations. It is recommended to check the section settings on your theme and to make adjustments as necessary, to avoid unwanted image cropping.
Understanding Image Cropping
Background image cropping can occur in sections of your store where you have the option to define the section’s height. When set, the image adjusts (expands or contracts) to completely fill the section’s background. This flexibility ensures that the background is fully covered, regardless of device screen size.
Consider the Slideshow section as a typical scenario. It is designed to showcase multiple images in a uniform space. While you may configure it so the initial image fits perfectly, varying dimensions of subsequent images could result in them being partially cropped to maintain the uniform appearance of the slideshow.
Text Within Images
Avoid embedding text directly within images.
Background images are designed to enhance the layout by filling the entire background space of their container. As a result, resizing to fit the container can lead to parts of the image, including any text, being cut off.
This practice can lead to several issues, including poor legibility due to image compression and screen readers and search engines being unable to read the content within images.
Conclusion
By following these guidelines, you can ensure that your store’s images are optimized for performance and aesthetics, providing a better user experience across all devices and screen sizes.
For more detailed guidance on setting specific image dimensions for various sections of your theme, refer to the theme documentation or Shopify’s help center on image optimization.
