Images and Photography for the Web
The right images make a website feel credible and alive; the wrong ones — generic stock, or huge unoptimised files — make it feel hollow and slow. Getting images right is a blend of good taste and good housekeeping, and both are learnable.
Choose real over generic
Authentic photographs of your actual work, place, products, or people almost always beat polished stock imagery of strangers pretending to be delighted. Visitors are fluent in stock photography and discount it instantly; a genuine, slightly imperfect picture of the real thing builds far more trust. If you cannot photograph everything yourself, use stock selectively and choose images that feel plausible for your business rather than aspirational clichés.
When you do use stock or any image you did not create, respect the licence. Free-to-use libraries and clearly licensed Creative Commons images keep you on the right side of copyright; lifting pictures from a search engine does not.
Size images for the screen, not the camera
A photo straight from a modern phone or camera can be several thousand pixels wide and many megabytes — far larger than any web page needs. Serving that untouched forces every visitor to download a giant file to display a small picture, punishing mobile users most. Resize images to the dimensions they will actually appear at (a little larger for sharp high-resolution screens), and you will cut file sizes dramatically before you compress anything.
Match the format to the job, too: photographs suit JPEG or the newer, smaller WebP; logos and simple graphics with flat colour or transparency suit PNG or SVG. Google's web.dev has a clear guide to choosing formats if you want the detail.
Compress without visible loss
After resizing, compression squeezes out further weight with little or no visible change in quality. Free tools and most modern site builders can do this automatically. The goal is the smallest file that still looks good at the size it is shown — often a fraction of the original. Faster pages keep visitors and, as noted in the usability chapter, help you in search rankings.
Always write alt text
Every meaningful image needs alternative text describing its purpose, both so screen-reader users understand it and so the picture still communicates if it fails to load. As covered in the accessibility chapter, good alt text is concise and purposeful, and it doubles as a signal that helps search engines understand your images. Decorative images that add nothing to meaning should have empty alt text so they are skipped.
Give images room to breathe
How you place images matters as much as which you choose. Let key images sit with enough space around them, keep a consistent style and treatment across the site so the gallery feels of a piece, and avoid burying text inside images where it cannot be read by search engines, resized, or translated. A few strong, well-placed pictures beat a crowded wall of thumbnails.
Mind loading and layout
Images below the initial screen can be set to load lazily, so the page appears quickly and pictures arrive as the visitor scrolls. Always reserve the correct space for an image so the page does not jump around as it loads — a jarring effect that Google's Core Web Vitals specifically penalise. Small technical details like these separate a site that merely has photos from one that feels fast and professional.
Quality that carries its weight
Treat every image as a deliberate choice that must earn its place and its file size. Real, well-sized, well-labelled pictures lift a site; careless ones drag it down. With your images sorted, a simple email newsletter is the next way to keep the audience you attract.