Images can explain a service clearly or make a page slow and difficult to read. The development brief should cover how images are prepared and delivered, not only which photographs look attractive in a desktop design.
Related service: Website and ecommerce development- 01Identify its purpose
- 02Choose the crop
- 03Generate suitable sizes
- 04Set loading behavior
- 05Verify the rendered result
SECTION 01
Separate source assets from delivery assets
Keep a suitable original for editing, but do not send that full-resolution file to every visitor. Ask the agency how the site generates or selects dimensions for the actual layout. Google's responsive-image guidance describes browser-selected sources and deliberate art direction. The buyer decision is whether an image needs the same composition everywhere or a different crop on a narrow screen.
Identify which image is important immediately and which appears farther down the page. Loading every image eagerly wastes resources; delaying the main visual can also harm the first view. Agree how dimensions are reserved so content does not jump when an image arrives. The implementation should make these choices consistently rather than rely on each editor knowing browser behavior.
SECTION 02
Illustrative example: a process photograph on mobile
Imagine a workshop website uses a wide photograph to show a technician inspecting equipment. On desktop the equipment is visible, but an automatic center crop on mobile removes the relevant part and leaves only the person's shoulder. Compressing the file does not fix the explanation. The content owner needs a better crop or a different image.
The agency can provide a focal-point control or an approved mobile alternative. Test the photo with its caption and heading rather than in isolation. W3C's image guidance distinguishes informative and decorative images; the alternative text should reflect what this image contributes in this context. It should not become a list of search terms or describe a fictional project as real work.
SECTION 03
Agree acceptance and future publishing rules
Use actual intended images in performance checks and compare the same page under repeatable conditions. Ask for evidence of requested image dimensions, loading behavior, visible quality, and layout stability. A single score does not tell you whether a diagram remains readable or whether mobile users download unnecessarily large assets.
Hand over maximum upload guidance, supported formats, crop instructions, and responsibility for licensing. Check a missing asset, an unusually tall image, and a newly uploaded photograph through the editing workflow. The tradeoff is not quality versus speed in the abstract: choose enough detail for the image's job without transferring detail the layout cannot display. A maintainable image pipeline prevents later uploads from quietly undoing the original performance work.
SECTION 04
Frequently asked questions
Should every image be lazy-loaded?
No. Images needed in the initial view may need different priority from lower-page content. Test the actual page.
Does compression solve a bad crop?
No. Compression changes delivery size or quality; composition still needs an editorial decision.
Who should write alternative text?
Someone who understands the image's purpose in context, with guidance from the implementation team on how the field is used.
PRIMARY REFERENCES
Sources and further reading
These references cover the standards, platforms, or published prices discussed in the guide. Worked examples and checklists are our editorial guidance.
- Responsive imagesGoogle web.dev
- Images TutorialW3C WAI
EDITORIAL METHOD
About this guide
We use AI to assist with drafting and editing. Catapult AI Work is responsible for the published content. Examples illustrate possible approaches; they are not client case studies unless identified as such.
Budget examples are not Catapult package prices. Check linked provider pages for current fees and plan limits before making a purchase.
Read the editorial policy