Contact Us
Book A Free Strategey Call

5 Website Photography Rules Small Businesses Can Hand to a Photographer

By /

Good website photography follows five rules: pick images with a clear purpose, compose them for small screens, export them at the right size and format, add alt text and captions, and secure proper usage rights before anything goes live. If you only do one thing today, audit your current homepage images against this list, or send the list straight to your photographer as a brief.

TL;DR:

  • Upload images at the appropriate sizes for their placement, such as 1920 pixels for hero images and 400 pixels for thumbnails, to optimize load times.
  • Use WebP or AVIF formats supported by most platforms for better compression, with JPEG as a fallback, and keep compression quality between 70 and 80 percent.
  • Generate multiple image widths and implement responsive techniques like srcset and sizes to serve the correct file size for each device.
  • Add descriptive alt text under 100 characters for informative images and use captions only when they add clear context or details.
  • Secure usage rights through explicit licenses or ownership transfer, and obtain model releases and consent for images featuring identifiable people.
Mybusinessmarketingcoach
Build A Website That Works Harder
Mybusinessmarketingcoach helps Melbourne business owners with website design, SEO and marketing support for a stronger online presence.

Visit Mybusinessmarketingcoach

Table of Contents

Key considerations before you shoot or choose images

Before you book a shoot or scroll through a stock library, decide what each image is actually for. A hero image, a product shot, a team photo and a background texture all do different jobs, and an image that does not serve one of those jobs should not be on the page.

Set a few brand rules before you start. Pick your preferred crop ratios, decide whether your site leans landscape or portrait, and lock in a consistent colour grade so every new photo matches the last one. This saves you from a patchwork site where every page looks like it came from a different business.

Accessibility and page speed should shape how many images you use, not just how they look. Every extra image is extra weight for the browser to load and extra content a screen reader has to process, so each one needs to earn its spot.

Work through these priorities before the camera comes out:

  • Confirm the image’s job: hero, product, team or background, and drop anything that does not fit.
  • Fix your crop ratios and orientation rules so every page feels consistent.
  • Set a simple colour grading approach and stick to it across the site.
  • Count how many images a page genuinely needs before adding more.

Get this right early and every later decision, from cropping to file naming, gets easier.

Composition and photographic choices that work for websites

Composition rules that work in print do not always survive a mobile screen, so build your shots around how people will actually see them.

The rule of thirds still holds: place your subject off-centre and leave negative space for text overlays, navigation bars or cropping on smaller screens. That negative space is what lets a designer reuse one photo across a hero banner, a square social tile and a portrait mobile view without reshooting.

Orientation matters more online than most people expect. Landscape suits hero banners and background imagery, while square or portrait formats work better for profile photos and product listings that sit in grids. Shooting both orientations on the day saves a second shoot later.

Focal length choices change depending on the subject. Portraits benefit from a longer focal length that flatters faces without distortion, while product shots need enough depth of field that the whole item stays sharp, not just the front edge. Shallow focus looks striking on a large monitor but can make small details disappear entirely on a phone screen.

Busy backgrounds are the most common mistake in small-business photography. A cluttered shelf or a patterned wall competes with the subject and makes any text overlay unreadable, so look for contrast between subject and background before you shoot.

  • Shoot with negative space on at least one side for text overlays.
  • Capture both landscape and portrait versions of key shots.
  • Use a longer focal length for portraits, a smaller aperture for product detail.
  • Check the background for clutter and contrast before every shot.

Pro Tip: Take a test shot and view it on your phone before the shoot wraps up: composition that looks sharp on a laptop screen can lose all its impact at thumbnail size.

Image dimensions, file formats and export settings for the web

Different placements on your site need different export sizes, and getting this wrong is the fastest way to end up with a slow, blurry homepage.

As a working guide: export hero images at around 1920 pixels wide, full-width content images around 1200 pixels, gallery images around 800 pixels, product thumbnails around 400 pixels, and social preview images at 1200 by 630 pixels to suit most platforms. These are starting points, not fixed rules, so adjust them to your theme’s actual display width.

Recommended website image export dimensions

Format choice affects both quality and load time. JPEG remains the safe default for photographs. PNG suits graphics with transparency or flat colour. WebP and AVIF compress photographic content more efficiently than JPEG at a similar quality level and are worth using as your primary format where your website platform supports them, with JPEG as the fallback.

Compression is a trade-off, not a technical afterthought. Government guidance recommends optimising and compressing image files and designing with a mobile-first mindset, since heavier images slow down the exact audience most likely to leave a slow page. A quality setting around 70 to 80% on a JPEG or WebP export 80% usually holds visible sharpness while cutting file size substantially compared to an uncompressed original.

Two settings get skipped more often than they should. Export in the sRGB colour profile so colours display consistently across browsers and devices, and strip unnecessary metadata (camera settings, GPS location, personal details) before upload, which trims file size and avoids publishing information you did not mean to share.

  • Match export width to placement: hero, full-width, gallery, thumbnail, social preview.
  • Choose WebP or AVIF where supported, JPEG as the fallback, PNG for transparency.
  • Set quality around 70 to 80% as a starting compression target.
  • Export in sRGB and strip metadata before upload.

One figure worth building your export habits around: page-weight advice from government web guidance is consistent that images should be optimised and compressed, and used only where they add a clear benefit, because unnecessary imagery is one of the most common causes of a bloated, slow-loading page.

Responsive images and technical techniques

A single image file cannot serve a phone and a widescreen monitor equally well, which is why responsive image markup exists.

  1. Generate two or three width variants of each image, commonly something like 400, 800 and 1600 pixels wide, and reference them with the srcset attribute so the browser picks the right one.
  2. Pair srcset with a sizes attribute that tells the browser how much screen space the image will occupy at different breakpoints, so it does not download a file larger than it needs.
  3. Apply lazy loading to any image below the fold using the native loading="lazy" attribute, so the browser delays fetching it until the reader scrolls close.
  4. For large hero images, consider a low-quality placeholder that loads instantly and sharpens once the full image arrives, which keeps the page feeling responsive even on a slower connection.
  5. Provide a JPEG fallback alongside any WebP or AVIF file using the picture element, so older browsers still receive a usable image.
  6. Test the finished page on an actual phone and a desktop browser, checking that the right file size loads on each and that nothing shifts or flickers as images load in.

These are small technical additions, but they make the difference between a page that feels instant and one that feels like it is still catching up. For a deeper look at how load speed affects conversions, our website speed playbook covers the numbers behind this in more depth.

Accessibility: alt text, captions and contrast basics

Every informative image on your site needs alt text, and every purely decorative one needs a null alt attribute so screen readers skip past it. The Style Manual’s guidance on alt text recommends keeping alt text under about 100 characters and focused on what the image communicates, not a literal description of its contents. “Team members collaborating at a whiteboard” works; “image of five people standing near a whiteboard with papers” does not.

Skip phrases like “image of” or “photo of” in your alt text. Screen readers already announce that the content is an image, so those words just waste the reader’s time without adding information.

Captions earn their place when they add context a screen reader or a skimming visitor would otherwise miss: a photographer credit, a location, or a detail that is not obvious from the image alone. A caption that just repeats the alt text is redundant.

Avoid images of text altogether where possible. Guidance from the Centre for Accessibility Australia on achieving WCAG notes that images of text fail to resize correctly and are inaccessible to screen readers, so a heading or a quote should be real text, not a graphic. The same guidance frames meeting WCAG Level AA for images as a design decision as much as a technical checklist: non-text content needs an equivalent, contrast between subject and background needs to be strong enough to read, and images of text need to be avoided in favour of real text wherever the design allows it.

  • Add descriptive alt text to every informative image, null alt to decorative ones.
  • Keep alt text under roughly 100 characters and skip “image of” or “photo of”.
  • Use captions only when they add genuine context, such as a credit or location.
  • Avoid images of text and keep contrast strong enough to read at a glance.

Pro Tip: Write your alt text as if you were describing the image to someone on the phone who needs to know why it is there, not what it literally shows.

Under the Copyright Act 1968, a photographer automatically owns copyright in the images they create, even when you have paid for the shoot. If you want to reuse, edit or sub-license those images beyond the original purpose, your contract needs to say so explicitly, either as a licence that sets out your usage rights or a full assignment that transfers ownership to you.

Before you sign anything, confirm:

  • Whether you are getting a licence (usage rights) or an assignment (full ownership transfer).
  • Which platforms and formats the rights cover: website, social media, print, paid ads.
  • Whether the licence is exclusive or the photographer can resell the same images elsewhere.
  • How long the rights last, since some licences are time-limited.

A model release matters whenever a recognisable person appears in a commercial image, separate from the photographer’s copyright. Editorial use (news, commentary) has more flexibility than commercial use (marketing, advertising), so a photo of a customer or staff member used to sell your services generally needs their written consent.

That consent requirement overlaps with privacy law. The OAIC’s guidance on posting photos and videos confirms that under the Privacy Act 1988, an image that identifies a person counts as personal information, so you should tell people how their image will be used and where it will appear before you publish it.

Keep a simple record for every image you use: the photographer or source, the licence terms, the date secured and any attribution required. This record-keeping habit protects you if a licence is ever questioned, and it is far easier to maintain from day one than to reconstruct later.

SEO best practices for images: file names, structured data and captions

Image SEO starts before the file even reaches your website. Rename files from generic camera output like “IMG_4213.jpg” to something descriptive and hyphenated, such as “melbourne-cafe-interior-seating.jpg”, so both search engines and your own file system can tell what the image shows.

Captions and the surrounding page content do more for image relevance than keywords crammed into alt text ever will. A photo of your workshop on a page about your services, with a short caption naming the location or the work shown, gives search engines genuine context to work with.

Structured data helps for specific cases: adding ImageObject markup is worth the effort on product pages or articles where you want an image eligible for rich results, but it is not necessary for every photo on your site.

Resist the urge to stuff keywords into alt text. Alt text exists to describe the image for someone who cannot see it, and an alt tag packed with search terms fails that job while adding nothing to your rankings.

  • Use descriptive, hyphenated file names instead of default camera filenames.
  • Let captions and page context carry relevance, not forced keyword repetition.
  • Add ImageObject structured data for product and article images where it fits.
  • Keep alt text focused on purpose and meaning, never on keyword count.

How to brief or choose a photographer and plan a small-business shoot

A clear brief is the difference between a shoot that delivers exactly what your site needs and one that leaves you reshooting six months later.

  1. List every shot you need, with the crop ratio for each: landscape for hero banners, square for social tiles, portrait for team profiles.
  2. Specify deliverables: file formats, minimum resolution, and how many finished images you expect per shot setup.
  3. Confirm usage rights in writing before the shoot, covering website, social media, print and paid advertising.
  4. Set a realistic deadline for delivery, including a round of revisions if needed.
  5. Agree on the budget upfront, including any day rate, licensing fee and travel costs.

Ask for more variants than you think you need. A single setup can usually produce several crop-ready versions (hero, square, thumbnail) without extra shooting time, and having them ready saves a scramble later when a new landing page needs an image fast.

Your rights checklist should cover the same points raised in the legal section: licence versus assignment, which platforms are covered, whether the rights are exclusive, and how long they last. Put this in writing before the shoot, not after.

For a small business, a half-day shoot with a clear shot list is usually enough to cover a homepage, an about page and a handful of service pages without blowing the budget.

Pro Tip: Bring your crop ratios and file-naming convention to the shoot briefing, not just a mood board: it saves the photographer time and saves you a second editing pass.

A practical, step-by-step checklist for publishing images to a website

Once an image is chosen and the rights are sorted, the publishing steps are mechanical but easy to skip under deadline pressure.

  1. Crop and export the image at the correct width for its placement, in sRGB, with metadata stripped.
  2. Choose the right format (WebP or AVIF with a JPEG fallback, or PNG for transparency) and compress to your target quality.
  3. Rename the file descriptively using hyphens, matching what the image actually shows.
  4. Write alt text under 100 characters, or set it to null if the image is purely decorative.
  5. Add a caption only if it provides genuine context, such as a credit or location.
  6. Generate the srcset variants and set the sizes attribute for the placement.
  7. Apply lazy loading if the image sits below the fold.
  8. Test the page on both mobile and desktop to confirm the right file loads and nothing shifts on load.
  9. Check page speed after publishing and adjust compression if the image is still too heavy.
Step What to check Why it matters
Export Width, format, sRGB, metadata Controls file size and consistency
Naming Hyphenated, descriptive filename Supports SEO and file management
Accessibility Alt text, caption, contrast Meets WCAG expectations
Integration Srcset, lazy loading, mobile test Confirms real-world performance

Practical examples and Mybusinessmarketingcoach expertise

A half-day brand photography session can realistically produce between 60 and 120 finished images covering hero shots, team portraits, product detail and background texture, enough to refresh an entire small-business website without a second shoot.

Typical deliverables from a brand photography session include high-resolution originals, web-optimised exports at the required sizes, and a written licence confirming the rights secured, to avoid renegotiations when reusing photos.

Where photography and website design happen together, implementation moves faster and fewer mistakes slip through. A website design process built around the actual images, rather than placeholder stock photos swapped in later, avoids the awkward cropping and inconsistent sizing that shows up when the two are handled separately.

Author perspective: priorities for a small business this week and next

If you only fix one thing this week, fix your hero images: oversized files and missing alt text are the two most common faults on small-business sites, and both are quick to repair.

In the short term, brief a small shoot that specifies crop ratios, deliverables and usage rights upfront, rather than discovering gaps after the invoice is paid.

For the longer term, write down your image style once (crops, colour grading, alt-text approach) and build it into your regular content workflow, so every new page follows the same rules without you having to relearn them each time.

— MYBMC

How Mybusinessmarketingcoach can help with photography and website integration

Sorting out website photography on your own takes time most small-business owners do not have between running the business and everything else on the list. Photography sessions and website design work can be coordinated to put images to use properly, with SEO integration built in rather than bolted on afterwards in a practical guide for small business web design.

Mybusinessmarketingcoach

Engagements that combine a shoot with site implementation result in images arriving already sized, named and optimised for their pages, rather than waiting unused in a folder.

  • Brand and team photography sessions sized for website use.
  • Full website design with photography integrated from the start.
  • SEO support so image file names, alt text and page context work together.

If your site needs new photography and a proper home for it, start with our website design service and we will scope the shoot and the build together.

Sources

FAQ

What size should website images be?

It depends on placement: hero images generally work well around 1920 pixels wide, full-width content images around 1200 pixels, and thumbnails around 400 pixels. Always match the export width to where the image actually appears on the page rather than using one size everywhere.

Do I need alt text on every image?

Every informative image needs descriptive alt text under about 100 characters, following Style Manual guidance, while purely decorative images should use a null alt attribute instead. This lets screen readers skip decorative content and focus on images that carry real meaning.

Under the Copyright Act 1968, the photographer owns copyright by default, even when you have paid for the shoot. You need a written licence or assignment to secure the usage rights or ownership you actually need.

Do I need permission to put photos of people on my website?

Yes, when a person is identifiable in a commercial image you generally need their consent, and the Privacy Act 1988 treats an identifiable image as personal information that requires you to explain how and where it will be used. A model release is good practice alongside this, separate from any copyright agreement with the photographer.

What image format is best for website speed?

WebP or AVIF generally compress photographic images more efficiently than JPEG at similar quality, so they are worth using as your primary format with a JPEG fallback for older browsers. Pair the right format with sensible compression and correctly sized exports for the biggest speed gains.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top