Best Practices for Image Placement on a Website

The best practice for image placement is to put images where they support a decision — next to the text they illustrate, above the fold only when they carry meaning, and always compressed, sized and labelled so they load fast on any connection. Decorative filler pushes your real content down the page and costs you loading time. This guide covers placement, formats, lazy-loading and alt text in plain terms for NZ business owners.

Put images where they do a job, not where there is a gap

Every image on a page should answer a question a visitor actually has: what does the product look like, who am I dealing with, where is this business, what does the finished work look like. If an image does none of those things, it is decoration — and decoration belongs in small doses.

A useful habit is to place images immediately beside or below the text they relate to. A photo of your team belongs next to the paragraph introducing your team, not three scrolls away in a gallery. Visitors scan down the left edge and across headings, so images placed at the start of a section or alongside key copy get seen; images buried between unrelated paragraphs get skipped.

Above the fold, be selective. A single strong hero image that shows what you do beats a rotating carousel of five stock photos — most visitors only ever see the first slide, but the browser still has to load all of them.

Choose the right format before you upload

Format choice decides how heavy an image is before any other optimisation happens. As a working rule: use JPEG for photographs, PNG for screenshots or images that need sharp text and transparency, SVG for logos and icons, and WebP or AVIF wherever your platform supports them — they typically produce noticeably smaller files than JPEG or PNG at the same visual quality.

The most common mistake we see on small business sites is uploading photos straight off a phone. A modern phone photo can be several thousand pixels wide and many megabytes in size, then get displayed in a column 800 pixels wide. The browser downloads the whole file anyway. Resize images to roughly the largest size they will be displayed at, then compress them — free tools like Squoosh or TinyPNG handle this in seconds, and WordPress plugins can automate it across an existing media library.

If your site runs on WordPress, modern themes and image plugins will generate multiple sizes automatically and serve the right one per device — but only if the original you upload is sensible to begin with.

Use lazy-loading, but not on everything

Lazy-loading tells the browser not to download an image until the visitor scrolls near it. For a page with ten or twenty images, that is the difference between downloading everything upfront and downloading two or three images to start. Modern browsers support it natively with a single attribute — loading="lazy" — and most website platforms now apply it by default.

The one place lazy-loading hurts is the image at the top of the page. Your hero image should load immediately, because it is the first thing visitors see; lazy-loading it adds a visible delay to the most important part of the page. So the rule is simple: eager-load anything above the fold, lazy-load everything below it.

Also set explicit width and height on images (or let your platform do it), so the browser reserves the space before the image arrives and text does not jump around while the page loads. That layout shift is one of the things Google measures in its Core Web Vitals, and one of the most irritating things on a slow mobile connection.

Write alt text like you are describing the image over the phone

Alt text is the short description attached to an image in the page code. It exists for people using screen readers, for visitors whose connection fails to load the image, and for search engines trying to understand what the image shows.

Good alt text is specific and brief: "electrician installing a switchboard in a Christchurch commercial fit-out" tells a screen reader user and a search engine something useful; "image1" or a string of keywords tells them nothing. Describe what is in the picture and why it is there, in one sentence or less. Purely decorative images — background textures, divider graphics — should have empty alt text so screen readers skip them rather than announcing clutter.

Alt text is also a small but real search signal. If your images show your actual work, products or location, describing them accurately gives search engines more evidence of what your business does.

Think about mobile and real-world NZ connections

Much of the traffic to a typical NZ business site arrives on a phone, and not always on fast fibre — plenty of visitors are on mobile data, rural connections or a patchy cafe network. Every unoptimised image makes your site slower for exactly those people.

Check your pages on an actual phone, not just a shrunk-down browser window. Images that sit side-by-side on a desktop stack vertically on mobile, which changes the reading order — make sure each image still lands next to the text it belongs to. Text overlaid on images is another common casualty: readable across a wide desktop banner, unreadable once cropped for a narrow screen.

A quick free test is Google's PageSpeed Insights. Run your homepage through it and look at the image-related suggestions — oversized files, missing dimensions and outdated formats are usually the fastest wins on a small business site.

When to fix it yourself and when to get help

If your site is a handful of pages on a modern platform, most of this is DIY territory: resize before uploading, write real alt text, let the platform handle lazy-loading, and test on a phone. An afternoon of tidying the worst offenders often makes a visible difference.

It becomes a professional job when the problems are structural — a theme that ignores image dimensions, a media library full of multi-megabyte originals, or a site that was never built responsive in the first place. Our website development team rebuilds and repairs sites with performance treated as a requirement rather than an afterthought, and ongoing hosting and maintenance keeps image optimisation, caching and updates handled month to month.

Solution Squad is a New Zealand IT company (Auckland & Hamilton) working with businesses NZ-wide — if your site feels slow or your images look wrong on mobile, call 0800 900 777 or get in touch and we will take a look.