A useful website image helps a visitor understand a product, service or instruction. Preparing it involves more than retouching: the crop must work on different screens, the file must be suitable for delivery, and essential information must remain available to people who cannot see it. Use this workflow when adding an image or replacing an existing one.
1. Keep the original and define the purpose
Keep an unchanged master file and make a separate web version. Decide where the image will appear, what it needs to communicate and whether it is content or decoration. Use material you are permitted to publish, and review screenshots for customer details, account information and other unintended content before uploading them.
For an existing page, note the current image, its alternative text, any caption and where else the file is used. Replacing a shared media file can affect several pages. Start with one representative page and keep a way to restore its previous version.
2. Crop for the layout and resize for the screen
Crop to keep the useful subject visible in its intended position. Check a wide desktop layout and a narrow phone layout, especially when a banner uses a different shape on each. Avoid placing essential wording inside a photo; ordinary page text can be resized and translated more readily.
Pixel dimensions describe how much visual detail the file contains; file size describes the amount of data transferred. Reducing an image’s display width in the editor does not necessarily reduce its download size. Generate suitable source sizes instead of serving the camera original everywhere. For responsive images, a site can provide several sizes through srcset and sizes; picture can support different crops or formats. The developer or CMS configuration should match these choices to the layout.
3. Choose a format and compare the export
Follow MDN’s image-format guidance and the formats supported by your publishing tools. WebP or AVIF can be useful options for photographs. JPEG remains a common photographic format; PNG is useful when lossless detail or transparency is needed. SVG suits vector artwork such as icons and diagrams. No single format or quality setting is best for every image.
Compare exports at their intended display size. Look for blurred lettering, blocky edges, halos and unwanted color changes. Keep the version that balances acceptable detail with a smaller file, and retain a compatible fallback where the site’s audience requires one. Changing a filename extension does not convert the file. Avoid repeatedly editing and saving an already compressed copy.
4. Write alternative text for the actual use
The W3C’s alternative-text decision tree recommends alternatives based on purpose. Describe the information an informative image contributes. For a linked image, communicate its destination or function. Use alt="" for pure decoration; do not omit the attribute as a substitute. Provide complex chart information in accessible text as well. A caption can add visible context, but it does not automatically replace an appropriate alternative.
Write the alternative in the page’s language and review both language versions. Use clear filenames for maintenance, without private information. Avoid stuffing keywords into filenames, captions or alternatives, and check that a new crop has not changed what the description needs to say.
5. Reserve space and choose when to load
Ask the developer or site editor to preserve the image’s proportions and reserve its space. Correct width and height attributes help the browser calculate the aspect ratio before the image arrives. Responsive styling should still allow the image to fit its container.
Lazy loading can defer images below the initial screen. Avoid applying it indiscriminately to the main image visitors need immediately, particularly the image responsible for Largest Contentful Paint. Check existing theme or plugin behavior before adding another optimization layer. More overlapping settings can make a missing or delayed image harder to diagnose.
6. Verify the published result
- Open the page on a phone and a desktop. Confirm the crop, sharpness, proportions and nearby text.
- Check the French and English pages, alternatives, captions and any image links.
- Reload with a slower connection and look for late content movement or an unnecessarily delayed main image.
- If the old image persists, check the published file and page references, then refresh only the relevant cache using the site’s normal procedure.
- If an image is missing, check its URL, filename case, actual format and publishing status. Share the page and observed error with the developer.
Compare the actual file delivered and the page behavior before and after the change. A smaller upload does not by itself prove a faster page. Use these observations to decide whether to keep the change or adjust the export.
For repeated crop problems, missing responsive sizes or theme integration work, explore Nuagerie’s web development services. Contact us with the affected page, device and expected result so we can define the next step.
