1. Header (Hero) Images
The header, or "hero," image is the large banner that typically sits at the very top of your web page.
Standard Size: Size your header photo to 1920 pixels wide by 1080 pixels tall.
Width Rules: The width cannot change. It must be exactly 1920 pixels to span the screen correctly.
Height Rules: The height of your header image can vary depending on your specific design. However, if you are using an image rotation (where multiple images slide or fade into one another), the height must be exactly the same for every single image in that rotation. If the heights do not match, your web page will jump up and down as the images change.
2. Standard Images
For standard images placed across the rest of your website, there are strict minimum sizes you need to follow based on their orientation:
Landscape (Horizontal) Images: The absolute minimum size is 1000 pixels wide by 667 pixels tall (which provides a standard 3:2 ratio).
Large Slideshow Images (Horizontal): 1920 x 1080 pixels. Use this larger size for slideshows, especially when the slides take up more than 55% of the page width, to ensure your images display clearly without stretching or blurring.
Portrait (Vertical) Images: The minimum size is 1000 pixels wide by 1500 pixels tall (which provides a 2:3 ratio).
Square Images: The minimum size for a perfectly square image is 900 pixels wide by 900 pixels tall.
Important Best Practices
Do not use images that are too small: If you load an image into a component that is smaller than the required minimum dimensions, the system will automatically stretch it to fit. This results in a blurry, pixelated image. Always try to meet the minimum size requirements.
Do not use images that are too large: While you can upload larger images (like a 3200 x 1800 pixel image for a 16:9 ratio header), you need to be careful. If you upload anything larger than 5,000 pixels, the system will significantly slow down when rendering your web page.
Size before uploading: Always try to size your images to the required dimensions before you upload them.