File Size

As a general rule, individual web images should ideally be under 500 KB, with most standard photos aiming for under 200 KB to ensure the page loads instantly.

1. Hero Banners/Full-Screen Backgrounds: Aim for 600 KB – 1 MB (since they cover so much real estate).
2. Standard Photos: Aim for 100 KB – 300 KB.
3. Icons and Simple Graphics: Should be tiny—under 20 KB.

21:9 Aspect Ratio: Full-Page Width

Use: Banners/Heros (collections, etc)

Size: Full page: Min 1100 x 471 px / Max 2100 x 900 px

Think of this as the "Cinematic Header." It’s designed for high-impact visual storytelling but presents challenges due to its extreme width and short height.

• The "Safe Zone" Rule: Keep the most important visual elements (and any text overlays) in the center 50% of the image. On smaller screens, the sides of a 21:9 image are often the first to be cropped.

• Composition Style: Use landscape or panoramic photography. Avoid close-up portraits, as the top of the head or the chin will likely be cut off.

• Negative Space: Ensure there is "dead air" (low-detail areas like sky or a plain wall) on either the left or right side if you plan to overlay a headline.

• Text Constraint: Limit text to a maximum of 10–12 words. Because the image is so wide, long lines of text become difficult for the eye to track from start to finish.

4:3 Aspect Ratio: Partial Width

Use: Images included in text

Size: Max 330 x 245 px

This is the "Workhorse." It’s more vertical than the 21:9 and is perfect for supporting body text or appearing in a sidebar/grid.

• Focus on Subjects: This ratio is ideal for portraits, product shots, or specific details. It feels more intimate and "contained" than a wide banner.

• Vertical Centering: Since this image will likely sit next to text, ensure the subject is vertically centered so it aligns well with the surrounding paragraph heights.

• Higher Information Density: You can get away with more detail here. While a 21:9 image is about "vibes," a 4:3 image should be about information.

16:9 Aspect Ratio: The Multi-Purpose Standard

Use: Larger taller banners

Size: Min 1100 x 619 px / Max 2100 x 1181 px

This is the standard for high-definition video and most modern laptop screens. It is typically used for featured images, blog headers, or mid-page "breakout" sections.

• The "Rule of Thirds" Sweet Spot: Unlike the 21:9 (which requires centering), 16:9 is the perfect canvas for the Rule of Thirds. Place your subject on the left or right vertical third to create a professional, balanced look.

• Video-Ready: Since this is the native ratio for YouTube and Vimeo, use 16:9 for any image that might serve as a video thumbnail or a placeholder for an embedded player.

• Flexible Framing: This ratio is tall enough to show a person from the waist up (medium shot) while still being wide enough to show their environment. It’s the best choice for "lifestyle" photography.

• Overlay Balance: You have enough vertical room for a headline and a sub-headline or a "Call to Action" (CTA) button without suffocating the background image.

Comparison Table

Further Reading on Images:

Image Tutorial- W3C Web Accessibility Initiative