Export images for the size at which they appear, keep a consistent crop and describe meaningful content with alternative text. Retain original files and license records. For an architecture project, export a restrained preview and provide a larger image only where the project story needs it. A small file is not a success if the product detail or text becomes unreadable.
Prepare a usable source collection before exporting
Begin with the highest-quality originals you are entitled to use. Keep those files separate from the smaller versions prepared for the website. A screenshot downloaded from social media is often a poor source because it may already contain compression, cropping or text that cannot be removed cleanly. Name the original by subject and project so another person can identify it without opening every file.
Make a simple rights register containing the creator, where the image came from, the permitted use and any required credit. Buying access to a stock library does not automatically explain every permitted use of every asset. If a photographer delivered images for a previous campaign, confirm whether the website use is covered rather than assuming possession of the file is permission. Avoid putting contract documents or private personal data inside public image folders.
Then assign each image a role. A wide hero image, a small catalogue thumbnail and a detailed project photograph have different needs. One giant export should not be used everywhere merely because it saves organising the collection. The intended position determines how much detail the visitor can actually see.
Crop for the composition, not just the file size
Consider a café photograph showing a counter on the left and a person on the right. A narrow mobile crop may remove the counter or cut through the person's face. Review the crop at the real display ratio before approving it. If the site places text over the image, check both the crop and the text contrast. A composition that works in a design tool can fail when the heading wraps onto another line.
Export a few sensible sizes based on the layout. The developer can select an appropriate source for the available screen space. Modern compressed formats may reduce transfer size, but choose them after visually inspecting the result: fine line drawings, soft gradients and text within images react differently to compression. A universal quality setting is not a substitute for looking at important images.
Keep width and height information with the published asset so the browser can reserve the correct space. This also helps the team recognise a mistaken replacement: a portrait should not silently replace a landscape file with the same name. Loading priority should follow the image's role; content far down a page generally does not need the same treatment as the main visible image.
Describe meaning and check the actual page
Alternative text should explain what an informative image contributes. For a product, mention the identifying feature needed in that context; for an architecture project, describe the space or detail being discussed. Do not repeat a nearby heading mechanically or fill the text with search phrases. Pure decoration can have empty alternative text so it does not add noise for someone using a screen reader.
Before publication, inspect the page on a phone and a larger display. Check sharpness at normal size, unintended crops, visible compression and whether captions still match. Try an image-heavy page on a slower connection. The question is whether useful content remains available, not whether every source photograph retains print resolution online.
Finally, hand over the original collection, web exports and rights register as distinct items. Agree who prepares future images. A well-optimised launch can become unnecessarily heavy after the first unreviewed upload; a short repeatable checklist prevents that without requiring the business owner to become an imaging specialist.
A practical image handoff. Give the designer a short row for each important image: subject, intended page, source file, publication permission and whether a particular crop must be preserved. Add a note if a person, sign or product detail must remain visible. This is more useful than sending an unlabelled folder and expecting the developer to recognise every image's purpose.
After export, compare at normal page size rather than magnifying every file until compression becomes visible. The aim is a clear image in its intended setting with an appropriate transfer cost. Keep a special eye on diagrams and labels: their information can become unreadable before a photograph looks obviously degraded.
When replacing an image later, check the associated caption and alternative text too. A technically successful file replacement can leave a description of the previous subject. Treat these items as one content unit and give the owner a repeatable review step. Good image preparation includes the meaning around the pixels, not only the file extension.
Practical checklist
- Choose a useful aspect ratio
- Set image dimensions
- Review compression visually
A concrete example: For an architecture project, export a restrained preview and provide a larger image only where the project story needs it.
A boundary to keep clear: A small file is not a success if the product detail or text becomes unreadable.
Your next step
Tell Orvunweb about your project
