Web ready photography

Image guide

Images on the web are designed to be responsive: they will change size, position, and sometimes be cropped to best fit a user's device.

Before considering technical details like image size, you should focus on the content, composition, and orientation of your photos.

There are many excellent guides for product photography, such as Shopify's guide to smartphone product photography.

To simplify matters, we've picked out four of the best tips for taking and editing web-ready photography:

Position your main subject towards the middle of the frame

When taking product photographs, it is important to leave room around the main subject to allow for cropping. Keeping photographs simple will also ensure the subject remains the main focus.

You can enhance your image by following the "Rule of Thirds," which involves using your phone's grid setting to place the subject along one of the horizontal or vertical lines. This technique prevents unwanted cropping and makes for more interesting photos.

For more information on the "Rule of Thirds," see Adobe's article on the rule of thirds.

Use Landscape orientation for full-width images and Square for mobile images.

Using landscape (horizontal) photos for full-width and hero images can prevent unwanted cropping or needing to scroll down to see the entire image.

For mobile devices, consider using square images to fill more of the screen and ensure they stack uniformly when repositioned.

Do not add text directly to images — use heading blocks instead

Text included in images may appear stretched and be cropped when resized. Using the theme's Heading blocks, however, will ensure all text is properly positioned and resized for any device.

Use theme image settings to set the focal point of your images.

Use the image focal point option and add mobile-specific images to avoid cropping the key area of your image.