Image Aspect Ratios and Cropping: Keep the Important Subject Visible

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: A ratio compares width and height

   0:18

   It describes the shape of the image or display box.

   On-screen labels: Square image; Wide landscape; Tall portrait.

2. 2

   Step 2: The box can have another shape

   0:30

   A wide banner and a phone card may frame the same photo differently.

   On-screen labels: Banner space; Card space; Mobile layout.

3. 3

   Step 3: Cover can crop the edges

   0:42

   Filling the box can hide image areas outside its proportions.

   On-screen labels: Filled display box; Preserved proportions; Cropped edges.

4. 4

   Step 4: Contain can leave spare space

   0:54

   Showing the full image may leave unused space around it.

   On-screen labels: Complete image; Preserved proportions; Visible spare space.

5. 5

   Step 5: Keep the subject in view

   1:06

   Adjust the crop or choose a better version for the layout.

   On-screen labels: Subject position; Useful crop; Alternative version.

6. 6

   Step 6: Review the real page

   1:18

   Check faces, products and important details at different widths.

   On-screen labels: Small screen; Wide screen; Important detail visible.

Common questions

Go further