Give each image a clear job
Start by listing the images on the page and the question each one answers. A service photo might show the type of work offered. A product image helps someone compare a finish or feature. A decorative background may only support the layout. Keep images that add useful information, and remove repeated or generic files that do not help a visitor decide or understand.
Choose one main image for the opening area rather than loading a large gallery before the service explanation. On a contact or quote page, written details and the next action usually deserve priority. Record where each image appears, who owns the source file and whether the business has permission to publish it.
Export the right file for the content
Match the format to the image. Photographs usually need a format designed for photographic compression. Logos, icons and simple illustrations may work well as SVG when the source is genuinely vector and safe to publish. Transparent graphics can require a different choice from full-width photographs. Test the result at the size people will actually see rather than judging only the original file.
Avoid uploading the camera original when the website displays a much smaller image. Create a repeatable export step with a sensible maximum width, compression level and filename. Modern formats such as WebP or AVIF can reduce file size, but the site or image service should still handle browser support and the required fallback.
Serve the size the layout needs
A phone should not have to download the same oversized file prepared for a wide desktop banner. Responsive image markup lets the browser choose from suitable source sizes based on the layout and screen. Ask the developer or platform whether it generates several widths and supplies the browser with srcset and sizes information.
Check the rendered page at narrow, medium and wide widths. The image should remain sharp enough for its purpose without downloading dimensions far beyond the space it occupies. Cropping also needs review: an automated crop can hide the subject on mobile even when the file size is efficient.
Load images in the right order
The main image visible when the page opens may need early loading. Images farther down the page can often use native lazy loading so the browser waits until they are closer to view. Do not apply the same loading rule to every file. Delaying the main visual can make the page feel slower, while eagerly loading a long gallery spends bandwidth before a visitor reaches it.
Set width and height information for content images so the browser can reserve their space before the files arrive. This reduces the movement that occurs when text and buttons are pushed down during loading. For background images with overlaid text, use a background colour that keeps the content readable while the image is still arriving.
Test the published page and keep a source record
After publishing, open the real page on a phone and desktop connection. Confirm that the important image appears, text does not jump while files load, crops remain useful and every image still supports the page. Check the service, contact or product route around it as well; a fast image cannot repair an unclear next step.
Keep the original source separately from the website export, and note the page, purpose, rights owner and replacement date. When staff update content, use the same export and review process. A small, repeatable image checklist is more useful than a one-time compression exercise because new uploads can gradually recreate the same problem.
Website improvements and support · Business websites by Finstark