Website Images: Getting Them Right

Why images matter more than owners expect

On a typical small business website, images account for the majority of the page weight. Not the design, not the fonts, not the analytics scripts, the images. Which means that when a site is slow, images are usually the reason, and when a site is fixed, images are usually what was fixed.

That matters in three separate ways at once, and it is the overlap that makes image handling unusually high value work.

“Nobody has ever left a website because the photographs loaded too quickly.”

Choosing a format

Format choice is mostly mechanical once you know what each one is for. Getting it wrong typically costs you either file size or quality, and occasionally both.

Getting dimensions right

This is the single biggest and easiest win. A photo from a modern phone can be several thousand pixels wide and several megabytes in size. Displayed in a 600 pixel column, all of that extra data is downloaded and then thrown away by the browser. The visitor pays for it in load time and receives nothing.

1. Work out the largest size the image will ever display at. A full-width hero on a large screen might need around 1920 pixels wide. A blog body image is often 800 to 1200. A thumbnail might be 400.
2. Allow for high-density screens by supplying an image roughly twice the display width where sharpness matters, then let the browser choose. Beyond that, the extra pixels are not visible.
3. Resize before uploading, or use a platform that generates correctly sized versions automatically. Never rely on the browser scaling a huge image down.
4. Let responsive images do the work. Modern sites serve a set of sizes and let each device download the one it needs, so a phone is not fetching a desktop hero.
5. Crop deliberately. Decide the aspect ratio for each context and crop to it, rather than letting different ratios make your layout look untidy.
6. Keep the original. Store full-resolution masters somewhere off the website so you can re-export later at a different size or format.

Compression without ruining quality

Compression trades file size against visual quality, and the useful range is wider than most people expect. For photographs on the web, a quality setting somewhere in the region of 75 to 85 percent is usually indistinguishable from the original at normal viewing size while being dramatically smaller.

The important distinction is between lossy and lossless. Lossy compression, used by JPEG, WebP and AVIF, discards information permanently in exchange for much smaller files, and is correct for photographs. Lossless compression, used by PNG and available in WebP, preserves every pixel and is correct for graphics with sharp edges and flat colour where artefacts would be visible.

1. Compress once, from the original. Repeatedly re-saving a lossy image degrades it each time, and the damage cannot be undone.
2. Check the result at actual display size, not zoomed to 400 percent. Artefacts that are obvious under magnification are usually invisible in context.
3. Be gentler on images with fine detail, such as text in screenshots, fabric texture or hair, which show compression damage earlier than flat scenes.
4. Strip unnecessary metadata. Camera data, GPS coordinates and colour profiles add weight, and location data in particular can be a privacy problem you did not intend to publish.
5. Automate it. Configure your platform or optimisation plugin to compress on upload, so the standard does not depend on whoever adds the next image remembering.

Layout shift, lazy loading and priority

Three technical behaviours decide whether images feel fast rather than merely being small, and all three are easy to get wrong in ways that are invisible to the person who built the page.

Set explicit width and height on every image. Without them the browser does not know how much space to reserve, so the page renders, then jumps as each image arrives. Visitors lose their place and occasionally tap the wrong thing. It is measured directly as a page experience signal, and it is fixed by a single attribute pair.

Lazy load images below the fold. Deferring off-screen images until the visitor scrolls towards them means the initial page load only fetches what is actually visible. On a long page with many images this is transformative.

Do not lazy load the hero. This is the mistake that follows from learning about lazy loading. The first large image on the page should load immediately and, ideally, be marked as high priority, because it is usually the element that determines the perceived loading speed of the whole page.

File names and alt text

Two small pieces of text attached to every image, both frequently left empty, both cheap to fix.

File names. A name like IMG_4471.jpg tells nobody anything. A name like calgary-bathroom-renovation-tiling.jpg describes the content, helps image search, and makes your own media library navigable two years later when you are looking for that one photo. Use lower case, separate words with hyphens, and avoid spaces and special characters.

Alt text. Alt text is read aloud by screen readers, displayed when an image fails to load, and used by search engines to understand the image. Write it as a description of what the image shows and what it conveys in context, in a natural sentence. If the image is purely decorative and adds no information, an empty alt attribute is correct and better than a description, because it tells assistive technology to skip it rather than reading out something meaningless.

Accessibility

Beyond alt text, a few image decisions determine whether your site works for everyone, and in many jurisdictions accessibility is moving from good practice towards legal expectation for businesses of all sizes.

1. Do not put important text inside an image. It cannot be read by screen readers, cannot be translated, cannot be selected, and becomes blurry when scaled. Use real text over an image instead.
2. Maintain contrast where text sits over a photograph. A dark overlay or a gradient scrim is usually enough, and it improves legibility for everyone, not just people with low vision.
3. Describe charts and infographics properly. A short alt description plus the same information available as text nearby, because a complex chart cannot be summarised in one sentence.
4. Avoid conveying meaning by colour alone in diagrams and status images. Add a label or a shape as well.
5. Be careful with animation. Anything that flashes rapidly can trigger seizures, and autoplaying motion should respect a visitor’s reduced-motion preference.
6. Caption when it helps. A visible caption benefits every reader, and it does not replace alt text, which serves a different purpose.

Images and search

Images contribute to search performance in two distinct ways, and it is worth separating them because the effort involved is different.

Indirectly, through page experience. Fast loading and stable layout are part of how pages are assessed. Since images are usually the heaviest element, image optimisation is one of the most direct ways to improve those signals. This benefit applies to every page whether or not anyone ever searches for an image.

Directly, through image search. Descriptive file names, accurate alt text, nearby caption and body text that provides context, and inclusion in your sitemap all help images surface in image results. For visual businesses such as trades, hospitality, retail, events and anything portfolio-based, this can be a genuine traffic source rather than a rounding error.

1. Use descriptive, hyphenated file names that match what the image actually shows.
2. Write natural alt text rather than keyword lists, which are ignored at best.
3. Give images relevant surrounding text. Context on the page helps search engines interpret the image.
4. Make sure images are crawlable and included in your XML sitemap, which most SEO plugins handle automatically.
5. Use structured data where relevant, particularly on product and recipe pages, so images can appear in richer results.
6. Serve images from your own domain where practical, so the traffic and the credit come back to you.

Where to get images

The best images for a small business website are almost always your own. The question is what to do for the pages where that is not possible.

Licensing, and how it goes wrong

Image licensing is dull right up until the moment it is expensive. Rights holders and their agents actively scan the web for unlicensed use, and a letter demanding payment for a photograph used innocently on a small business website is a common and unpleasant experience.

1. Keep proof for every image. Save the licence, the download receipt or the source page, in a folder outside the website, organised by file name.
2. Read the actual licence terms, not the marketing headline. Some free licences require attribution, exclude commercial use, exclude use in advertising, or prohibit use in logos and trademarks.
3. Check whether attribution is required and, if it is, actually provide it in the form the licence specifies.
4. Be careful with people, brands and property. A photograph of an identifiable person generally needs a model release for commercial use, and recognisable logos, artworks and some buildings carry their own restrictions.
5. Do not assume a designer cleared it. If a contractor supplied images, ask for the licences in writing. Liability for what appears on your site generally sits with you.
6. Re-check inherited images. If you took over an existing website, the images on it came from somewhere nobody documented. This is worth an afternoon.
7. If a claim arrives, do not ignore it and do not panic-pay. Take the image down, gather your records, and get proper advice. This is a legal matter and not one to resolve from a checklist.

Hero images

The large image at the top of a page has an outsized effect because it is usually the largest element the browser has to fetch, and it is what the visitor judges the site by in the first second.

1. Prioritise its loading. Never lazy load it, and mark it as high priority where your platform supports that.
2. Keep it as light as the design allows. This is the one image worth spending real effort compressing.
3. Overlay text properly. Real HTML text over the image, with a scrim or gradient for contrast, rather than text baked into the picture.
4. Consider whether you need a photograph at all. A clean solid or gradient background with strong typography loads instantly and often converts better than a generic stock photo.
5. Check the crop on mobile. Wide hero images frequently crop to something meaningless on a phone. Use art direction to serve a different crop where it matters.
6. Make sure it says something. A hero image of a generic smiling office adds weight and no information. A photo of your actual work does both jobs at once.

Galleries and product images

Galleries and product pages are where image handling has the most direct commercial consequence, because the images are doing the selling.

1. Use thumbnails that are actually small. A gallery serving full-size images as thumbnails is the classic cause of a very slow portfolio page.
2. Lazy load everything below the fold, and load the remainder as the visitor scrolls.
3. Keep aspect ratios consistent within a gallery. Mixed ratios make an otherwise good set of photographs look unprofessional.
4. Provide zoom on product images, and make sure it works by swipe and pinch on mobile rather than only by hovering.
5. Show scale. At least one image with a familiar object or a person for reference prevents a whole category of returns and complaints.
6. Be accurate about colour, which is one of the leading causes of returns on physical products.
7. Caption portfolio work with what it was, where, and what was involved. This is content, and it helps both visitors and search.

A simple workflow

None of this needs to be complicated. A repeatable process that anyone in the business can follow looks like this.

1. Shoot or select at the highest quality available, and keep the master file somewhere off the website.
2. Crop to the aspect ratio the page design uses.
3. Resize to the largest dimension it will ever display at, allowing for high-density screens where sharpness matters.
4. Export to a modern format at a sensible quality setting, with metadata stripped.
5. Rename descriptively, lower case, hyphen separated.
6. Upload and immediately write the alt text while you still remember what the image shows.
7. Check the page on a phone, on mobile data, and confirm nothing jumps as it loads.
8. File the licence if the image came from anywhere other than your own camera.

Common mistakes

1. Uploading straight from a phone or camera. The most common and most costly habit, and the easiest to fix.
2. Using PNG for photographs. Produces enormous files for no visible improvement.
3. Leaving alt text empty on meaningful images, or filling it with keywords, which are two failures of the same feature.
4. Lazy loading the hero image, which makes the page feel slower while technically loading less.
5. Omitting width and height, causing the layout to jump as images arrive.
6. Text baked into images, which is invisible to screen readers, untranslatable and blurry when scaled.
7. Generic stock photography everywhere, which signals that there was nothing real worth showing.
8. No record of where images came from, which is fine until the day it is not.

Image checklist

Where image handling is going

Two shifts are worth knowing about, because both reduce work rather than adding it. The first is that modern formats keep improving, so an image set exported two years ago is probably larger than it needs to be today. Re-exporting your heaviest pages occasionally is a cheap win. The second is that image handling is increasingly automated at the platform or delivery layer, with services that resize, convert and compress on the fly based on what the requesting device actually supports.

For a small business this means the sensible strategy is to keep good, large master files somewhere safe and let the delivery layer produce the variants, rather than manually maintaining dozens of sized copies. It also means the practices in this guide, correct dimensions, sensible compression, explicit width and height, honest alt text and documented licensing, remain the things you are responsible for. Automation handles the mechanics. It cannot decide what an image is meant to communicate, and it cannot tell you whether you are allowed to use it.

Frequently asked questions