A landscape cover can lose its subject inside a narrow card. An enormous image may look sharp on a phone while still transferring data the presentation does not need. Solving these problems means reviewing composition and the resource selected by the browser.
Responsive images help match display contexts with available resources. Start by understanding each image’s purpose: presenting a project, illustrating an explanation or showing a product. Implementation should follow that purpose rather than applying the same crop everywhere.
Map where the image appears
List the actual placements: article cover, listing card, home-page feature, case gallery and sharing preview. One artwork may serve several of them, but this needs checking. Some compositions tolerate cropping; others depend on a particular relationship between elements.
For a Web Design case, a very wide screenshot can make content unreadable in a thumbnail. A closer view of a relevant area may communicate better. The whole project does not need to appear at every stage: the card invites exploration, while the case page presents detail.
Distinguish resolution from art direction
The MDN guide explains tools such as srcset and sizes for offering image candidates according to display conditions. It also presents picture for situations requiring different compositions. This helps separate a change in resolution from an editorial change in framing.
Exporting the same image at different sizes preserves its content. Preparing a portrait version that moves closer to the subject changes the composition. Decide which problem you are solving before producing many files. A large collection without clear usage rules can increase maintenance without improving the experience.
Work with the actual layout
Check the width occupied by the image in each composition, including margins and columns. A full-width cover has different needs from a card occupying only part of a row. Avoid choosing dimensions solely from the monitor used during development.
Consider surrounding content too. A crop must not hide information the heading assumes is visible. If an article promises to discuss interface hierarchy, the image should show that hierarchy or clearly serve an illustrative purpose. Text and visual should support the same idea.
Prepare a small, verifiable set of exports
Name variations consistently and maintain a relationship between the master and delivered versions. Record why each file exists. This helps replace a cover later without leaving old references in one language, a category page or a sharing card.
Compare versions at normal viewing size. An export that looks perfect when enlarged may contain detail nobody can perceive in use. Text inside a project screenshot may require different treatment. Consider the information that must remain recognisable.
- Identify the master and its main point of interest.
- Check a narrow version and a wide presentation.
- Open final files inside their intended components.
- Update references in the Portuguese and English versions.
Review loading and broken paths
After assembling the component, confirm in the browser which resource was requested in relevant situations. An organised folder does not prove the implementation chose the intended file. Also review the space reserved before the image appears, so text and controls do not move unexpectedly.
Test paths from the home page and from an article opened directly. A relative address that works in one folder may fail in another. Include the scenario where the image is unavailable: the rest of the page should remain meaningful, and alternative text should reflect the resource’s function.
Make the review an editorial routine
A file-based blog benefits from a short routine: prepare the cover, review crops, check references and publish the approved set. AI can help propose compositions, but the final choice should follow the content and business identity.
MissaciWeb presents projects and services through pages with distinct goals. Planning images at the beginning of a business website or e-commerce project avoids treating mobile as an improvised reduction of desktop. The aim is to preserve what matters in each space.
For a concrete example of images working with a brand, explore the Gráfica Jobi website case. If you are planning a company presentation, compare the content and image requirements in the business website plan.
A checklist to take away
- List every placement where the image will appear.
- Separate resolution changes from framing changes.
- Consider the component’s actual width.
- Check the resource selected by the browser.
- Include versions and paths in the editorial routine.
Sources and further reading
Updated .
