Image Optimisation for Accounting Websites: Full Guide

Images affect three distinct aspects of your accounting website's performance: page load speed, search engine understanding, and accessibility for users with visual impairments. Poorly optimised images are one of the most common technical issues on accounting firm websites, and they are entirely avoidable with a straightforward process applied consistently.

The good news is that image optimisation requires no specialist technical knowledge. Once you understand the rules and apply them as a habit before every upload, your site will load faster, your pages will be better understood by search engines, and your content will be accessible to all users.

Why images affect page speed, rankings, and accessibility

Page speed is a confirmed Google ranking factor. Images are frequently the single largest contributor to a page's total file size, and slow-loading pages perform worse in search results and lose visitors before the content even loads. Google's Core Web Vitals metrics include Largest Contentful Paint (LCP), which measures how quickly the main content of a page becomes visible. An unoptimised hero image or banner photograph is often the direct cause of a poor LCP score.

Beyond speed, search engines cannot "see" images the way humans can. They rely entirely on the text signals around an image, including the filename, the alt attribute, the surrounding paragraph text, and the page's heading structure, to understand what the image depicts and how it relates to the page's content. Well-optimised images with descriptive filenames and accurate alt text contribute to the overall relevance of a page for its target keywords.

Accessibility is the third consideration. Screen readers, used by people with visual impairments, read the alt text of images aloud. If an image has no alt text, the screen reader typically reads the filename instead. An image named IMG_4521.jpg tells a screen reader user nothing. An image with proper alt text saying "two accountants reviewing a client's self assessment tax return" gives that user the same contextual information a sighted visitor would receive.

File format: why WebP should be your default in 2026

WebP is the correct format for the majority of images on an accounting website. It was developed by Google and is now supported by every major browser including Chrome, Firefox, Safari, and Edge. The performance benefits are significant: WebP reduces file size by approximately 30% compared to JPEG at equivalent visual quality, and by even more compared to PNG for photographic content.

In practice, this means an image that would be 400KB as a JPEG can typically be exported as WebP at around 280KB with no visible quality reduction. At scale, across a website with dozens of images per page, this adds up to substantial improvements in total page weight and load time.

The only scenarios where WebP is not the right choice are:

• Animated images (use WebP or GIF for very simple animations; use MP4 video for anything more complex)
• High-fidelity SVG graphics such as logos, icons, or diagrams (SVG is already a vector format and should not be converted to WebP)

For photographs, team images, office images, infographics, and decorative images, WebP is the correct choice. If your CMS does not automatically convert uploads to WebP, use a tool like Squoosh (squoosh.app, browser-based and free) to convert and compress images before uploading.

Compression: the 200KB target

Compression reduces file size by removing image data that is not perceptible to the human eye. Modern compression algorithms are highly effective: a well-compressed image typically looks identical to the original at a fraction of the file size.

The target for most web images is under 200KB. This is not a hard threshold, but it is a useful benchmark:

• A headshot or team photograph: 80 to 150KB
• A banner or hero image: 150 to 200KB
• An infographic: 100 to 250KB (depending on complexity)
• A small icon or logo: under 30KB

If any image on your site exceeds 500KB, it is almost certainly unoptimised. Images over 1MB on a web page are a significant performance problem.

Tools for compression:

• Squoosh (squoosh.app): browser-based, free, converts between formats including WebP, and shows a side-by-side comparison of original and compressed versions with file size readout.
• TinyPNG / TinyJPG (tinypng.com): drag-and-drop compression, free for small volumes, preserves transparency in PNGs.
• ImageOptim (Mac, free): batch processes images and removes unnecessary metadata (EXIF data) that adds file size without any visual benefit.
• Your CMS's built-in compression: many modern website platforms (WordPress with a plugin, Squarespace, Webflow) offer automatic image compression on upload. Check whether yours does this and at what quality level.

Always compress before uploading. Re-compressing an image that has already been through lossy compression degrades quality. Work from the original file each time.

Serving images at display size

A common mistake is uploading a high-resolution image and letting the browser scale it down for display. If your website displays a team photo at 400 x 300 pixels but you upload the original at 4000 x 3000 pixels, the browser downloads all ten times more data than it needs and then resizes it on the fly. This wastes bandwidth and slows loading significantly.

The correct approach: resize the image to the exact dimensions at which it will be displayed before uploading. If your service page features an image at 800 x 500 pixels, export the image at 800 x 500 pixels (or at 1600 x 1000 for high-density displays, which is worth doing for hero images that will appear large and prominently).

For responsive designs where images appear at different sizes on different screen widths, use the HTML srcset attribute to provide multiple versions of the same image. This allows the browser to download the version most appropriate for the device.

File naming: descriptive, hyphenated, lowercase

The filename of an image is one of the signals search engines use to understand its content. Filenames such as IMG_4521.jpg or DSC00234.webp tell Google nothing. Descriptive filenames that reflect the image content and its context on the page are one small but cumulative SEO signal.

The rules for image filenames:

• Lowercase only: self-assessment-accountant-manchester.webp, not Self_Assessment_Accountant_Manchester.WebP
• Words separated by hyphens, not underscores: Google treats hyphens as word separators and underscores as word joiners. self-assessment-accountant is three separate words to Google; self_assessment_accountant is one.
• Descriptive of the image content: name the image for what it actually shows, plus the page context where relevant.
• Reasonably concise: accountant-client-meeting-sheffield.webp is sufficient; excessively long filenames are unnecessary.

Alt text: describing images for search engines and screen readers

Alt text is the most important image attribute for both accessibility and SEO. It sits inside the <img> tag: <img src="filename.webp" alt="Your descriptive alt text here">.

Screen readers read alt text aloud for users who cannot see the image. Search engines use alt text to understand image content and to index images in Google Images search. Both use cases require the same thing: an accurate, descriptive description of what the image shows.

Rules for writing alt text:

• Describe what the image shows: "A bar chart showing UK corporation tax rates from 2020 to 2026" is correct. "Tax chart" is too vague.
• Include the keyword where it is genuinely relevant to the image: if the image shows an accountant working in Manchester and the page is about Manchester accountancy services, "accountant working with a client in a Manchester office" is both accurate and keyword-relevant.
• Do not stuff keywords: "self assessment accountant self assessment tax return self assessment help accountant UK" is not alt text; it is spam, and it provides no value to screen reader users.
• Keep it reasonably concise: one to two sentences is usually sufficient.
• Decorative images can have empty alt text: if an image is purely decorative and provides no information to the user, use alt="". This tells screen readers to skip the image entirely. Do not omit the alt attribute; an absent alt attribute causes the screen reader to announce the filename.

Lazy loading: defer off-screen images

The HTML loading="lazy" attribute tells the browser not to download an image until the user is likely to scroll to it. For images below the fold (not visible in the first viewport without scrolling), lazy loading reduces the amount of data downloaded on initial page load and improves both LCP and overall page speed.

Add loading="lazy" to every image that does not appear in the first visible portion of the page. Do not add loading="lazy" to your above-the-fold hero image or logo. These need to load immediately. Lazy loading them will delay the LCP element and worsen your Core Web Vitals score.

Common mistakes on accounting websites

Uploading original smartphone photos: modern smartphones produce photographs at 10 to 20 megapixels with file sizes of 5 to 15MB. Uploading these directly to a website is one of the most damaging performance errors possible. Always resize and compress before uploading.

Using generic filenames: photo1.jpg, image.png, banner.jpg. These tell Google nothing and make your media library impossible to manage as the site grows.

Omitting alt text entirely: this is both an accessibility failure and a missed SEO opportunity. Every image that conveys meaningful information should have descriptive alt text.

Using PNG for photographs: PNG is a lossless format ideal for logos, screenshots, and images with transparency. For photographs, JPEG or WebP produces a much smaller file with no meaningful quality difference at typical compression levels.

Applying the same generic alt text to multiple images: "accountants" as the alt text for every image on your site provides no useful information. Write unique alt text for each image.

Quick audit: finding unoptimised images with Chrome DevTools

You can identify large or unoptimised images on any page without specialist tools:

1. Open the page in Google Chrome.
2. Right-click anywhere on the page and choose "Inspect".
3. Go to the "Network" tab, then reload the page.
4. Click the "Img" filter to show only image requests.
5. Sort by "Size". Any images over 200KB are candidates for optimisation.
6. Check the "Name" column to see the filenames; any that are non-descriptive (IMG_xxxx, photo1) should be renamed.

For a site-wide image audit, Google PageSpeed Insights (pagespeed.web.dev) will flag specific images as "Properly size images" or "Use next-gen formats" under its Opportunities section. Both flags indicate images that need optimisation.

Key takeaways

• Images are a leading cause of slow page loading and poor Core Web Vitals scores; optimising them is one of the most direct performance improvements available.
• WebP is the correct format for all photographic images in 2026, reducing file size by approximately 30% versus JPEG at equivalent quality.
• Target images under 200KB; compress using Squoosh or TinyPNG before uploading, and resize images to the dimensions at which they will be displayed.
• Use descriptive, hyphenated, lowercase filenames that reflect the image content and page context.
• Write unique, accurate alt text for every meaningful image; include the keyword naturally where it is genuinely relevant to what the image shows.
• Add loading="lazy" to all below-the-fold images; do not lazy-load your hero or logo images.

Frequently asked questions

Does image alt text directly affect keyword rankings?

Alt text is an on-page relevance signal and contributes to how search engines understand the page's topic. It is not a dominant ranking factor on its own, but it is a consistent, cumulative signal. Well-written alt text on every image across a site adds up to a meaningful improvement in topical clarity.

What should I do about images already live on my site that are unoptimised?

Start with your highest-traffic pages. Export your images, compress and convert them to WebP, then re-upload and update the src attributes. Also update alt text and filenames at the same time. Use Google Search Console's Core Web Vitals report to identify which pages are currently failing and prioritise those.

Can I have multiple images on a service page?

Yes, and images that are relevant to the page content (team photos, office photos, screenshots of software you review, diagrams explaining a process) genuinely add value. The principle is that every image should add meaning or context. Decorative images that do not contribute content can use empty alt text and should be kept minimal for performance reasons.

What is a "retina" or high-density display, and should I account for it?

High-density displays (found on most modern smartphones and Apple Retina screens) show more pixels per inch, meaning images need to be twice the pixel dimensions to appear sharp. For important images such as your logo and hero images, providing a 2x resolution version and using srcset is worth the effort. For body images in blog posts and guides, the performance cost of doubling the resolution usually outweighs the visual benefit.

Is it worth adding images to blog posts and guides from an SEO perspective?

Yes, for two reasons. First, relevant images make content more readable and reduce bounce rates. Second, images with good alt text and filenames contribute to the page's keyword relevance signals. Infographics and diagrams in particular can attract inbound links from other sites, which strengthens your overall domain authority.