Image Composition Rules Every Web Designer Should Know
You don't need to be a photographer to build beautiful websites. But you do need to understand composition, because every day you're making decisions about which images to use, how to crop them, where to place them, and how they interact with text, buttons, and other elements. These decisions are composition decisions, and making them well requires understanding the same principles that photographers use when framing a shot.
This article covers the composition rules that matter most for web design: not for taking photos, but for selecting, cropping, and integrating images into layouts.
The Rule of Thirds
The most widely known composition principle. Divide any image into a 3x3 grid (two horizontal lines, two vertical lines), and the four intersections of those lines are the strongest positions for the main subject.
Images composed with the subject at an intersection point feel more dynamic and visually interesting than images with the subject dead centre. Centre-composed images feel static and formal. Thirds-composed images feel balanced but active.
For web design, the Rule of Thirds has a specific practical application: when selecting hero images where text will overlay the photograph. If the image subject is positioned at the left third, you have clear space on the right two-thirds for text. If the subject is at the bottom third, you have clear space at the top for a heading. Choosing images where the subject is already positioned according to the Rule of Thirds gives you reliable space for overlaid content.
Conversely, an image with the subject dead centre works poorly as a text-overlay hero, because the subject is exactly where the heading needs to be. Either the text obscures the subject or the subject makes the text unreadable.
When cropping images for the web, use the Rule of Thirds as a guide: position the most important element of the image at one of the four intersection points. Even a slight crop adjustment can transform a centre-composed image into a thirds-composed one, making it both more visually compelling and more practical for layout purposes.
Leading Lines
Lines within an image guide the viewer's eye through the composition. Roads, fences, architectural edges, rivers, the direction of a person's gaze: all of these create visual pathways that the eye follows instinctively.
In web design, leading lines become particularly powerful when they direct attention toward content. An image of a road stretching toward the horizon can be positioned so the road appears to lead toward a heading or CTA. A photograph of a person looking to the right can be placed on the left side of a layout, so their gaze directs the viewer toward the text on the right.
The reverse is also true and is a common mistake. If an image of a person looking to the left is placed on the right side of a layout, their gaze directs the viewer off the page, away from the content. This feels wrong even to viewers who can't identify why. The subject's attention leads the viewer's attention, and that attention should always point toward the content, not away from it.
When selecting images for layouts, check the directional energy. Which way do the lines flow? Which direction is the subject looking or moving? Position the image so that this energy flows into the layout, toward the content that matters.
Negative Space in Images
Negative space is the empty or undetailed area in an image. Sky, blank walls, out-of-focus backgrounds, open water. In photography, negative space creates breathing room around the subject. In web design, negative space in images is where you put things.
A portrait photograph with the subject positioned to the left and a large area of blurred background to the right is a web designer's dream: the background becomes a natural area for text overlay without needing a colour tint or overlay.
When sourcing images for hero sections, about pages, or any section where text overlays an image, prioritise images with significant negative space. The negative space doesn't need to be white. Any uniform or low-detail area works: a clear sky, a smooth wall, an out-of-focus landscape. The key requirement is that the area has low visual complexity, so text placed over it remains readable.
Images with high detail across the entire frame (busy street scenes, dense foliage, crowded interiors) are beautiful photographs but terrible text backgrounds. If you must use them, a semi-transparent colour overlay is necessary to create sufficient contrast between the text and the image. But the better solution is to choose images with built-in negative space, which eliminates the need for overlays that obscure the photograph.
Focal Point and Visual Weight
Every effective image has a clear focal point: the single area that draws the eye first. In portraits, it's usually the eyes. In landscapes, it's the point of highest contrast or interest. In product photography, it's the product itself.
When selecting images for web layouts, consider how the image's focal point interacts with the layout's hierarchy. If the image is meant to support a heading (as in a hero section), the image's focal point should not compete with the heading for attention. A supporting image with a moderate focal point that complements the text is more effective than a stunning image with a dominant focal point that overshadows the text.
Visual weight within an image also affects layout balance. A photograph with a bright, high-contrast element in the bottom-right corner creates visual weight in that area. If this image is placed on the right side of a layout, the combined weight of the image and its internal composition can make the layout feel unbalanced, tilting the visual centre of gravity to the right.
Being aware of visual weight within images allows you to make more intentional placement decisions. A visually heavy image on one side of a layout can be balanced by a larger text block, a bold heading, or a high-contrast element on the other side.
Aspect Ratios and Cropping
Aspect ratio is the proportional relationship between an image's width and height. Common web ratios include:
16:9 (widescreen). The standard for hero sections, video embeds, and full-width images. Wide enough to feel cinematic without being so wide that vertical context is lost. This ratio works particularly well for landscape photography and architectural images.
4:3 (traditional). Slightly more square than 16:9. Common for blog featured images, product category images, and content thumbnails. This ratio retains more vertical context, making it better for portraits, food photography, and images where height matters.
1:1 (square). Used for profile photos, team member headshots, social media previews, and grid galleries. The square format demands centre-focused composition, as there's no horizontal or vertical dominance to work with.
3:2 (photographic standard). The native ratio of most DSLR and mirrorless cameras. A comfortable middle ground between 16:9 and 4:3. Common for portfolio images and editorial photography.
21:9 (ultra-wide). Extremely cinematic. Used for dramatic hero sections and full-bleed banner images. This ratio sacrifices significant vertical content, so the subject needs to be positioned horizontally to survive the crop.
When designing image-heavy sections, decide the aspect ratio before selecting or cropping images. All images in a row should share the same aspect ratio for visual consistency. A gallery row with mixed aspect ratios looks chaotic unless the variation is deliberate (a masonry layout, for instance).
Consistency Across a Site
Visual consistency in imagery is as important as consistency in typography or colour. A site where the hero image is warm-toned and candlelit, the team photos are cool-toned and corporate, and the blog images are brightly saturated creates a disjointed experience. The images look like they belong to three different brands.
Image consistency involves:
Colour temperature. All images should share a similar colour temperature (warm, cool, or neutral). This doesn't mean identical colours, but a shared tonal quality. Warm images feel inviting and personal. Cool images feel clean and professional. Mixing the two feels contradictory.
Lighting style. Natural light images should be paired with other natural light images. Studio-lit images should be paired with other studio-lit images. The quality of light is one of the most powerful consistency signals, and mismatched lighting is one of the most common signs of amateurish image curation.
Subject treatment. If team portraits are informal and natural, product images should lean the same direction. If product photography is precise and studio-perfect, team portraits should be polished to match. The level of production quality should be consistent across all image types.
Processing style. If images have a particular editing treatment (high contrast, desaturated, warm colour grade, black and white), that treatment should be consistent across the site. A single heavily filtered image among natural-looking photographs stands out in the wrong way.
When clients provide their own images, inconsistency is the most common problem. The professional approach is to bring all images into alignment through editing: adjusting colour temperature, exposure, and contrast so the images feel like they belong to the same visual world, even if they were shot at different times, in different locations, with different equipment.
Stock Photography: Doing It Well
Stock photography has a reputation problem, and it's largely deserved. The generic handshake, the diverse team laughing at a salad, the woman pointing at a laptop screen with inexplicable delight. These images are used because they're easy, but they communicate "we couldn't be bothered to find real imagery."
Good stock photography usage follows three rules:
Choose authentic images over posed ones. Stock libraries have improved dramatically in recent years. Platforms like Unsplash, Pexels, and the editorial collections on Shutterstock and Adobe Stock offer documentary-style, naturally lit images that feel genuine rather than staged. Seek these out.
Maintain stylistic consistency. Don't mix images from different photographers, different libraries, and different styles. Curate a set of images that share a visual language (colour palette, lighting, subject treatment), even if they come from different sources.
Avoid the cliches. If you've seen the image on ten other websites, it's a cliche. The coffee cup on the marble surface. The MacBook on the wooden desk. The aerial shot of a winding road. These images are fine individually but have been so overused that they communicate nothing.
Where possible, invest in original photography. A local photographer spending half a day with the client's business will produce images that are unique, authentic, and specifically composed for the website's layout needs. The cost is modest compared to the impact on the site's perceived quality, and the images will never appear on a competitor's site.
The Composition Checklist
Before placing any image on a website, run through these questions:
Does the image have a clear focal point, and is that focal point positioned where it works best for the layout? Is the directional energy (gaze direction, leading lines) pointing toward the content? Is there sufficient negative space for any overlaid text? Does the colour temperature and style match the other images on the site? Is the image resolution sufficient for the display size without being unnecessarily large? Does the aspect ratio match the design's requirements? And finally: does this image serve the content, or is it just filling space?
Images that fill space without serving the content are worse than no image at all, because they consume bandwidth, slow load times, and dilute the visual impact of the images that do matter. Every image on a website should earn its place.
