The expectation is usually this: there is one truly successful shot, and it will cover everything — the cover of the home page, the preview in a card, the first frame of a slider and the background under a request form. The frame is good, so it will fit everywhere.
In practice each place on the site has its own requirements. A cover needs a horizontal frame and free space for the heading, a card — the object in the center and the same proportions as its neighbors, the mobile version — a frame that does not lose its meaning after the sides are cropped. The same shot looks different in these places, and sometimes does not fit at all. Below — which photographs each block needs and how the choice of the source file affects the volume of processing.
Why one frame does not fit every block
The blocks of a site differ in three things: the proportions, what lies on top of the shot, and how the frame behaves on different screens.
The proportions of a cover, a product card and a slider are different. A vertical shot taken on a phone can be fitted into a wide cover only with heavy cropping, and what often remains of the frame is a strip without the main object. A horizontal shot in a square card loses its edges.
Over some photographs there is text and a button, over others — nothing. The first kind needs a calm area where the text will be readable. For the second kind this does not matter, but the details do.
And, finally, the screens. On a computer the cover is wide; on a phone the central part of it remains. If the main object stands at the edge of the frame, on a phone it simply will not be visible.
The cover and the first screen
A cover needs a horizontal frame with spare room at the edges. The main object is better placed closer to the center or to one of the sides, so that a calm field for the heading remains beside it: sky, a wall, a plain background, a blurred background.
A shot that is too detailed gets in the way of the text. A fine pattern, bright spots and contrasting lines behind the heading make it hard to read, and then the photo has to be darkened a lot. A translucent dark layer does not always save it: the shot becomes gloomy and loses its expressiveness. Sometimes a local light correction is needed, another frame, or an agreed reworking by a neural network, for example to extend the background and free space for the text.
If the cover is needed for an advertising page, it is worth treating it with particular care. On a landing page the first screen is responsible for whether a person understands where they have landed, and processing the photo for the cover of the first screen is counted separately in the estimate.
Background photographs
A background differs from a cover in that people do not look at it on purpose. It sets the mood of the block, while the text, the figures and the form take the attention. So frames with low detail suit a background: textures, blurred interiors, nature without sharp contrasts.
A bad background — a shot that has something to look at: people, signs, small objects. The visitor will start looking at them, and not at the text. If such a frame is needed for the meaning, it is better placed as a separate image next to the text, not under it.
Product cards and previews
In a catalog the cards stand next to each other, and any difference between them catches the eye. So for cards uniformity matters more than the artistry of a single frame: the same background, a similar angle, the same proportions, an object of roughly one size in the frame and with margins at the edges.
If the products were shot at different times against different backgrounds, they can be brought to one look: cut out, placed on the same background, the light evened out. This is real work, and in an online store with a large range it often takes a noticeable part of the whole project. It is simpler when the products are shot to one scheme from the start.
Previews in articles, cases and selections work in a similar way. A small image has to be readable at a glance: one clear object, without fine details that will merge in the preview.
Galleries and sliders
A gallery shows an object or a piece of work from different sides. It needs different shots: a general view, a medium shot, details. Ten almost identical shots from one point give the visitor nothing new, even if each one on its own is good.
In a slider the frames are usually shown in the same proportions, so vertical and horizontal shots in one strip have to be cropped to a shared format. If a series has many vertical photos, it is better to say so in advance: another type of gallery may be more convenient for them.
For both formats a shared color range matters. Shots taken in different light look like a random set side by side, and evening out the color — separate work too.
The mobile version
On a phone a wide cover becomes narrow, and the central part of the shot remains. Sometimes it is better to prepare a separate frame or a separate crop for the mobile version, in which the main object is larger.
You can check this before handing the photos over: in your mind, cover the edges of the shot, leaving roughly the central third. If the main thing is still visible, the frame will most likely survive the mobile version. If not, the phone will need another option.
How a good source file shortens the processing
Each mismatch between a frame and its place is fixed by processing: cropping, retouching in Photoshop, building out the background, light correction, and sometimes neural-network reworking. The closer the source file is to what the block requires, the fewer such operations, and the faster the design is agreed.
The right choice does not cancel processing altogether. Almost any shot needs at least correction and optimization for the site. But the difference between “adjust it a little” and “assemble the frame again” is large, and it shows in the timeline and in the estimate.
Neural-network processing has a separate caveat. It helps to widen the background or remove a small obstruction, but I agree such changes in advance. An image changed by a neural network must not be presented as a documentarily accurate photograph of the object, especially if it is an interior, a product or a result of work that the client will later see in person.
If you are planning a shoot for the site
When the photos are still to be taken, many problems can be solved in advance, and that is cheaper than any processing. It is useful for the photographer to know which blocks the shots are for, and to get a simple list.
For the cover it is worth asking for several horizontal frames with spare room at the edges and free space on one side. Vertical duplicates of the same subjects will be useful for the mobile version. Products are better shot against one background and in one light, from the same distance. Galleries need different shots of one object, not many attempts at the same frame.
If the structure of the site is already agreed, the list can be drawn up straight from it: which block, which subject, which orientation. It is worth giving it to the photographer together with examples of frames you like.
Suitable and unsuitable compositions
A summary by blocks. These are guides for selection, not the technical requirements of a particular platform.
| Block | Suitable | Rather will not fit |
|---|---|---|
| Cover | Horizontal, object in the center or to the side, a calm field for the text | Vertical frame, object at the edge, a busy background behind the heading |
| Background | Texture, a blurred shot, soft light | People, signs, many small details |
| Product card | One object, the same background and angle as the neighbors, margins at the edges | A product on a random background, a cropped edge, a different scale |
| Gallery | A general view, a medium shot, details, one palette | A series of almost identical frames from one point |
| Slider | Frames of one orientation and similar light | A mix of verticals and horizontals with no spare room for cropping |
| Preview | One clear object, large | A general view with many small details |
If you are not sure which shot will fit where, that is normal: choosing the composition for a block — the developer’s task. It is enough to hand over the best frames and say what matters in them. And to discuss how much work with photographs there will be in your project, start with the quiz on the site: I will look at the task and suggest how to prepare the shots at the lowest cost.