Skip to content
Homepage Hero Specs (by brand)
All images should not exceed 5000px or 20mb
Current Brand Specs
Brand
Type
Specs for desktop
Specs for mobile
ONE Napkin
Full hero image
3:2 ratio (min width 750px)
1:1 ratio
ONE Napkin
Skinnier hero image
1920 x 3000 px
1:1 ratio
Ventanas
All hero images
16:9 ratio
9:16 ratio
There are no rows in this table
Shopify Recommended Specs
Name
Use Case
Desktop
Mobile
Example
Background image
Background images are generally the largest images on a website. The image serves as a backdrop to a homepage or other .
2560 x 1400 px
360 x 640 pixels
Hero image
Hero images are similar to background images but tend to be smaller in height—about half the size. A hero image is a great option if you need to feature more text on the screen without making users scroll to see it.
1280 x 720 px
360 x 200 pixels
There are no rows in this table
NOTES & CONSIDERATIONS FOR ALL HOMEPAGES
Visual variations are unavoidable based on screen sizes, if the subject needs to be seen at all times you need to have somewhere around 150-200px left/right and 200-300px up/down to ensure cropping doesn't 'eat' the subject. Most platforms, including Shopify and other responsive website builders, automatically crop and scale images with the center as the focal point. This approach keeps the middle of the image prominent, but it may cut off parts near the edges, depending on the screen size.
Position the Key Subject in the Center: When designing images, ensure that the main subject or critical content is placed in the center to keep it visible on all screen sizes.
Avoid Placing Important Elements Near the Edges: Leave the edges of your image clear of vital details, such as text or key parts of the subject, as these areas are more likely to be cropped out.
Example - Zara
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.