How to Use Images on Your Website
Images make a website feel human and help explain things faster than text. Used badly, they slow pages down and add clutter. Here is how to get the benefits without the drawbacks.
Choose images that mean something
Photos of your own work, your team, and your premises build trust in ways that generic stock photography cannot. If you must use stock, pick images that look natural and relevant, and avoid the obviously staged. Each image should earn its place by supporting the message.
Match the image to the purpose
- Hero images set the tone at the top of a page.
- Product and service images show what people are getting.
- People photos make a business approachable.
- Diagrams and illustrations explain processes.
Get the sizes right
Do not upload a huge camera original and let the browser shrink it. Resize images to roughly the dimensions they will display, then compress them. Our guide to compressing images shows the steps.
Choose the right format
JPEG suits photographs, PNG suits graphics needing transparency, SVG suits logos and simple icons, and modern formats like WebP and AVIF often deliver smaller files at similar quality. Browser support is broad for WebP, so it is a sensible choice for many sites.
Load them efficiently
Images below the fold can be loaded later, so the top of the page appears quickly. Learn more in lazy loading explained. Specify width and height so the page does not jump while loading, which helps your Core Web Vitals.
Write alt text
Alt text describes an image for people using screen readers and gives search engines context. Describe what matters in a short sentence. See alt text best practices and image SEO.
Name files sensibly
A name like blue-ceramic-vase.jpg is more useful than IMG_4821.jpg.
Maintain a consistent style
Similar lighting, color treatment, and framing make a site feel cohesive. Consider your brand consistency.
Check rights
Only use images you own or have licensed. Using photos without permission can lead to takedown demands and legal costs.
Be careful with text in images
Words embedded in pictures cannot be read by screen readers and may be too small on mobile. Keep important text as real text.
The bottom line
Use authentic, purposeful images, size and compress them, describe them, and place them thoughtfully. Your pages will look better and load faster.