Why web designers need photo composition
Stock photo selection, hero image crops, gallery layouts — web design is also photo selection. Knowing the classic composition rules leads to better decisions, from the hero photo to the product carousel. The rules come from centuries of painting and photography and are just as valid today.
1. Rule of thirds
The rule of thirds (see glossary entry) mentally divides the image into a 3×3 grid. Important subjects sit on the lines or their intersections — the four power points. Feels more dynamic than central composition, which looks static.
In web practice:
- Hero images: main subject on a third line, headline text in the calm third beside it. Best legibility without overlay tricks.
- Portrait crops: eyes ideally in the upper third.
- Landscape hero: horizon either on the upper or lower third line — never in the middle (except with a perfect reflection).
Our cropper shows the grid in the selection frame automatically.
2. Golden ratio and Fibonacci spiral
The golden ratio (1:1.618) is the mathematical refinement of the rule of thirds. Instead of 1/3 to 2/3 (= 0.5), it distributes 0.382 to 0.618. Visually the difference is minimal, but it feels more balanced. Renaissance painting classics used it; modern photo pros use it as a finer variant.
The Fibonacci spiral is the geometric extension — a logarithmic spiral that leads the eye to the focal point. Lightroom has had a composition overlay with a Fibonacci spiral since version 4.
3. Leading lines
Lines in the image that lead the eye to the main subject: a road, a river, a staircase, a row of columns, a line of trees. Leading lines give images depth and movement.
Web application: a hero image with a diagonal line running from the bottom-left corner to the headline text at the top right directs attention straight to the CTA. More effect than symmetric composition.
4. Symmetry and reflection
The antithesis of the rule of thirds: perfect symmetry. Works for:
- Architecture (central facades).
- Reflections in water or glass.
- Product shots on a white background.
- Brand-identity logos.
Important: symmetry only works when it's carried through strictly. A near-symmetry looks sloppy. If the subject itself isn't symmetric, better use the rule of thirds.
5. Negative space
The deliberately empty area around the main subject. Negative space gives the subject breathing room, focuses attention, and creates space for a text overlay.
Web practice: hero photos with a large sky or unpatterned background suit headlines. Stock photo search trick: search for "with copy space" or "negative space" — most large platforms index it.
6. Triangulation
Three important image elements form a mental triangle. The most stable composition scheme — the eye moves within the triangle between the elements without falling out of the image.
Example: a product photo with the main product, packaging, and brand lettering in a triangular arrangement looks more ordered than three elements in a line.
7. Framing
The main subject is framed by an element in the foreground — a doorframe, tree branches, hands cupping something. Framing creates depth and focuses attention.
Web application: framed hero photos look more cinematic than flat shots. When cropping to mobile portrait (9:16), framing is especially valuable, because the narrow format otherwise looks empty.
Aspect ratios and their effect
The aspect ratio itself carries meaning:
- 1:1 (square): stable, balanced, Instagram-typical. Feels modern and design-oriented.
- 4:5 (Instagram portrait): emotional, more intimate than square. Best reach on the Instagram feed.
- 3:2 (classic photo ratio): natural, documentary. A reportage look.
- 16:9 (widescreen): cinema-like, wide, cinematic. The hero standard on the web.
- 9:16 (Stories/Reels): intimate, mobile, immersive. Vertical video format.
- 21:9 (ultrawide): dramatic, epic. For banners and vista shots.
Composition for UI tile layouts
In product carousels or gallery tiles, images are cropped uniformly. Additional rules apply:
- Consistency: all tiles with the same crop style (all thirds, all symmetry, all negative space). Mixing looks chaotic.
- Safe area in the center: auto-crop to different ratios often crops centrally. Place the main subject centered if the tile has to render multiple aspect ratios.
- Consistent exposure: tiles with strongly differing exposure tear apart the gallery image. A uniform LUT (color grade) harmonizes even very different shots.
Hero image composition for the web
Special requirements for hero images:
- Negative space for the headline. Leave one side of the image (or top/bottom) unpatterned.
- Main subject not too small. On mobile the image is often cropped — a small subject in the corner disappears.
- Contrast to the text overlay. A dark image for light text, a light image for dark text — not the other way around.
- Test the mobile crop. The image is cropped to 9:16 in story embedding and some mobile layouts. Keep important elements within the middle 60%.
Photo composition and conversion
A 2023 Eyequant study showed: hero images with rule-of-thirds composition increase average dwell time by 18% over centrally composed images. Photos of people with their gaze directed toward the CTA button raise the click rate by 11% over direct eye contact with the camera.
When the composition doesn't fit: crop or a new photo?
Stock photos are rarely perfectly composed for every web layout. Three strategies:
- Crop to the rule of thirds. With our cropper in a few seconds.
- Rotate the image. Small corrections (1–3°) can bring the horizon line into the third position.
- Choose another image. If nothing works: don't compromise. Poorly composed hero images cost measurable conversion.
Tools for composition evaluation
- Eyequant / Attention Insight: AI-based heatmap prediction of where the eye looks in the image.
- Eye-tracking studies: Hotjar recordings show mouse movement, which isn't exactly eye movement but usable as a proxy.
- Manual A/B test: serve two crops in parallel, measure the click rate.
Sources
Wikipedia — Rule of Thirds · Wikipedia — Golden Ratio · Britannica — Composition in Visual Arts · Ken Rockwell — Composition · Eyequant · Attention Insight · Nielsen Norman Group — Photos as Web Content.