WEBVTT

00:00:00.000 --> 00:00:06.000
Why has your website cropped part of a photo?

00:00:06.000 --> 00:00:13.000
The image and its display box may have different proportions.

00:00:13.000 --> 00:00:18.000
Fit the photo without losing the subject.
6 image-layout checks.

00:00:18.000 --> 00:00:30.000
A ratio compares width and height
It describes the shape of the image or display box.
Square image · Wide landscape · Tall portrait

00:00:30.000 --> 00:00:42.000
The box can have another shape
A wide banner and a phone card may frame the same photo differently.
Banner space · Card space · Mobile layout

00:00:42.000 --> 00:00:54.000
Cover can crop the edges
Filling the box can hide image areas outside its proportions.
Filled display box · Preserved proportions · Cropped edges

00:00:54.000 --> 00:01:06.000
Contain can leave spare space
Showing the full image may leave unused space around it.
Complete image · Preserved proportions · Visible spare space

00:01:06.000 --> 00:01:18.000
Keep the subject in view
Adjust the crop or choose a better version for the layout.
Subject position · Useful crop · Alternative version

00:01:18.000 --> 00:01:30.000
Review the real page
Check faces, products and important details at different widths.
Small screen · Wide screen · Important detail visible

00:01:30.000 --> 00:01:39.000
Your checklist
A ratio compares width and height · The box can have another shape · Cover can crop the edges · Contain can leave spare space · Keep the subject in view · Review the real page

00:01:39.000 --> 00:01:47.000
Review the actual crop on a small screen.
jerseyweb.je