Website Image Placement
Choose image roles, crops and placement that support content rather than decorate every section.
Every image should have a job
A hero image establishes context and mood. A product or vehicle image helps comparison. A process diagram explains relationships. A local photograph establishes place. These roles are different, and using the same generic stock image pattern everywhere weakens the page.
Do not add imagery simply to fill empty space. White space can be a design element when the content hierarchy is strong.
Match crop to the component
Cards need predictable aspect ratios so a grid stays aligned. Heroes often need a wide crop with a safe text area. Portrait imagery may work for editorial or people-focused sections but can become awkward inside wide service cards.
Responsive art direction matters because the focal point of a desktop image can disappear on a narrow mobile crop.
Real images are strongest when authenticity matters
Fleet, location, product and team content usually benefits from real photography. Explanatory concepts such as lens layers, page wireframes or process flows may work better as custom diagrams.
Performance is part of the image decision
Resize source files to the maximum display size, use efficient formats, and do not ship oversized decorative images simply because the source file was available.