Images size

Appropriate image sizes.

The section layout is optimized for a screen width of 1920px. To determine the recommended image dimensions, divide 1920 by the number of columns used in the section. Then, multiply the result by 2 to ensure high-quality display on Retina screens.

For best results, use images of consistent dimensions within the same section. This helps maintain uniform heights and prevents uneven alignment of design elements.

---

Aspect ratio is the proportional relationship between an image's or screen's width and height, expressed as two numbers separated by a colon (e.g., 16:9). It defines the shape of an image and is a fundamental concept in photography, video, and web design, influencing composition, print sizes, and screen display.

How it works

Formula: Aspect ratio is written in the format of width:height, where the two numbers share the same unit of measurement. Example: A 16:9 aspect ratio means the width is 16 units for every 9 units of height, regardless of the actual pixel dimensions. An image that is 1920 pixels wide and 1080 pixels high has a 16:9 aspect ratio (1920:1080=16:9). Shape: It determines the shape, from a square (1:1) to a widescreen rectangle (16:9) or a vertical portrait (9:16).

---

Common examples in media

16:9: The standard for modern high-definition television and video. 4:3: A more traditional ratio, used in older TVs and some monitors. 3:2: Common in printed photography. 1:1: A perfect square, often used for social media profile pictures and posts. 9:16: The vertical ratio used for mobile content, like Instagram Stories and Reels.

---

Why it is important

Composition: The aspect ratio is not the main factor; it is only needed to calculate the height based on the width. Cropping: It is crucial for printing, as an image may need to be cropped to fit a frame with a different aspect ratio. Display: For web design, it helps maintain consistent spacing and prevents layout shifts, ensuring that elements appear correctly on different screens.