A practical website image workflow for small businesses

Write down what each image must help a visitor decide or do. A Mallorca guesthouse may need to show the view from a specific room, while a German workshop needs evidence of workmanship and a Swedish consultant may need a calm, credible portrait beside an offert form. “Make the page attractive” is too vague to guide the choice.

Create a short shot list with page, subject, purpose, orientation, owner, and permission status. Keep the untouched original in a separate folder and publish only prepared copies. This prevents repeated quality loss and makes it easier to produce a new crop when the website design changes.

Select the strongest image for its actual position. A wide home-page banner, a square team portrait, and a detailed product photograph need different framing. Remove empty areas that add no meaning, but do not crop away the entrance, product detail, face, or other evidence a customer needs.

Check the crop on a narrow phone as well as a laptop. A wide restaurant photograph can become an unhelpful strip on mobile, so the site may need a second crop with the subject closer to the centre. This is called art direction: the scene remains honest, but the composition changes for the available space.

Keep the source file, then export a copy close to the largest size it will actually appear. Do not upload a full camera image merely to display it as a small card. For photographs, JPEG, WebP, or AVIF can all be appropriate; PNG is useful when transparency or exact graphic edges matter, and SVG suits logos and simple vector artwork. There is no single best format for every image.

Judge compression by looking at faces, text, fine product edges, gradients, and dark areas. Reduce the file until it is meaningfully smaller without visible damage at its displayed size. Google Search supports common formats including JPEG, PNG, WebP, SVG, and AVIF, and recommends matching the filename extension to the real file type.

One large image scaled down with styling can still make a phone download the large file. A responsive website can provide several widths through srcset and sizes, allowing the browser to choose a suitable version for the screen and layout. The picture element can offer a different crop or a modern format with a fallback.

This technical step is normally handled by the website platform or developer. Ask whether uploaded images are resized automatically, which widths are generated, and whether the original is served by mistake. Keep a fallback src value because Google notes that some crawlers and browsers rely on it.

Give the file a short descriptive name before upload, such as sea-view-double-room-mallorca.webp rather than IMG_4821.webp. Google says filenames provide only light clues, while nearby page text, captions, and alternative text provide context. A descriptive name helps the team manage the library; it is not a reason to repeat search phrases.

Alternative text, often called alt text, should communicate the image’s purpose to someone who cannot see it. W3C recommends a brief description of essential information for informative images, the action for an image used as a link or button, and an empty alt value for decoration. The same photograph can need different wording in a gallery and on an accessibility page because its purpose changes.

Add the image’s width and height so the browser can reserve the correct space before the file arrives. MDN explains that this prevents nearby text from jumping as the image loads. The image can remain flexible in the design while those dimensions preserve its aspect ratio.

Images below the first screen can usually use lazy loading, which delays their download until the visitor approaches them. Do not automatically lazy-load the main hero image: web.dev warns that delaying an image near the top can make it appear later. Prioritise only the genuinely important first image rather than marking every file as urgent.

For every maintained language, review the filename, alt text, caption, surrounding copy, and any link destination. Google explicitly recommends translating filenames when images are localised. A Spanish page might use habitacion-doble-vistas-mar.webp, while the English version uses sea-view-double-room.webp. Keep URLs short and avoid accents or spaces when the publishing system handles them poorly.

Avoid placing important prices, opening hours, instructions, or calls to action inside a photograph. Text in an image is harder to translate, enlarge, search, and update. If a visual must contain words, create a controlled version for each language and repeat the essential information as real page text.

Before publishing, preview the real page rather than the media library. Test phone and desktop, zoom the page, temporarily block images, and use a slow connection if your browser offers that option. Confirm that the important subject remains visible, the page still makes sense without the image, and no layout jumps while files load.

For example, a small activity company prepares one kayaking photograph for six language pages. It keeps one original, creates wide and narrow crops, exports appropriate sizes, writes purpose-based alt text in each language, and checks the booking page on a phone. The process is recorded once and reused for the next tour.