Images affect trust, professionalism, and how visitors feel on your site. This guide covers what to gather, how to prepare files, and how to organise them for a WordPress or Shopify build.

Define the style first

Before gathering images, define the style. Ask:

  • Bright and modern, or warm and minimal?
  • Professional and corporate, or casual and approachable?

Match your brand colours, typography, and audience expectations. Use a moodboard (Pinterest, Notion, shared folder) to stay consistent.

Essential image types

Hero images

Top of homepage and key pages. Sets the tone. One strong image per section is enough.

Team photos

Even one good portrait helps. Use for About page and key service pages.

Process or behind-the-scenes

Useful for service businesses. Shows how you work.

Product images (ecommerce)

Essential. Multiple angles, close-ups, lifestyle shots. See How to prepare content for ecommerce.

Branding elements

Logos (SVG preferred), icons, patterns.

Portfolio or case studies

Screenshots, before/after, results. Supports service pages and credibility.

Photography options

Professional photography: Best for authenticity and consistency. Higher cost, requires planning. Suits businesses that rely on personal connection.

DIY photography: Use natural light, clean lens, simple backgrounds. Modern smartphones produce usable results when used well.

Stock images: Use Unsplash, Pexels, Shutterstock, Adobe Stock. Look for consistent lighting and colour. Avoid staged or generic images.

File preparation

File types

  • JPEG for photos
  • PNG for graphics or transparency
  • SVG for logos and icons
  • WebP when possible (smaller file sizes)

File sizes

Target 150–250 KB per image. Hero images: up to 300–400 KB if optimised.

Dimensions

  • Hero images: 1800–2400px wide
  • Content images: 1200px wide
  • Thumbnails: 600–800px wide

Filenames

Use descriptive names: web-design-project-example.jpg, product-name-blue-shirt.jpg. Avoid IMG_3737.jpg.

Organisation

Create folders:

  • Hero images
  • Homepage
  • About page
  • Services pages
  • Portfolio
  • Products (if ecommerce)
  • Branding

Use simple naming. Clear structure reduces delays during build.

Common mistakes

  • Low-quality or blurry images
  • Unrelated or generic stock photos
  • Inconsistent lighting or colour
  • Too many images (visual overload)
  • Uncompressed files (slow sites affect SEO)

Images should support content, not overwhelm it.

Checklist

  • Hero images
  • Team photos
  • Product photos (if ecommerce)
  • Branding elements (logos, icons)
  • Correct file types
  • Compressed file sizes
  • Descriptive filenames
  • Organised folder structure

Start with a website audit →

Need help with content structure or strategy? Get in touch →