How to Choose Images for a Fast Service Business Website
Choose useful images, compare real exports, and keep your service website clear and quick to use.
Choose images that explain your service, export them for the space they occupy, and check what a phone actually downloads. A useful picture should help someone understand your work without making the page harder to use.
Key takeaways
- Use real project and team photos when they help customers assess your business. Label illustrations clearly.
- Choose dimensions from the page layout, then compare compressed exports at the intended display size.
- Measure the actual files. A format name alone does not guarantee a smaller or better image.
- Write alt text for the image’s purpose on that page, including an empty alternative when it is purely decorative.
- Check mobile cropping, responsive delivery, loading behavior, and the total page experience before publishing.
Choose images with a job to do
Start with the question the image answers. A service page might need to show a completed installation, the person a customer will meet, or a detail that explains the work. A generic skyline can make a page look finished while telling the visitor very little.
For example, a hypothetical cabinet installer could use one wide kitchen photo to show the overall result and one close-up to explain the finish. Six nearly identical room photos would add downloads without necessarily helping the customer choose. Keep the images that earn their place.
Use genuine business photos for claims about your people, premises, equipment, or completed projects. Get the permissions needed to publish them. Stock photos and AI illustrations can support an explanation, but should not be presented as evidence of your own work. The illustrations in this article are AI-generated demo assets, not client photography.
Decide where an image fits into the customer’s decision before choosing a file. The guide to service pages that help people decide explains how supporting information connects to inquiries.
Match dimensions to the layout
Image dimensions describe the number of pixels in the file. Display dimensions describe the space it occupies on the page. File size describes the bytes transferred. These are different measurements, and all three matter.
If a card displays at 420 CSS pixels wide, an 840-pixel source is a reasonable candidate to inspect on a screen with a device pixel ratio of two. That is an example, not a universal upload rule. A full-width banner has different needs, and the browser may select a different candidate depending on the viewport and device.
A responsive setup offers suitable versions through srcset and describes the layout through sizes. Simply shrinking a large image with CSS does not make its file smaller. See web.dev’s responsive image guidance for the distinction between fitting an image on screen and delivering an appropriate source.
- Inspect the widest space the image needs to fill before exporting.
- Keep the original separately so you can make a different crop later.
- Check the mobile crop: faces, equipment, and the part of the project being discussed should remain visible.
- Keep important headings and service details as page text rather than embedding them in an image.
Compare formats using a real demo
The table below uses the same generated landscape-card illustration shown in this article. We exported the full image at 1672 × 941 pixels and a resized copy at 836 × 470 pixels. The content is illustrative, but the file measurements are real.
| Dimensions | PNG | JPEG | WebP |
|---|---|---|---|
| 1672 × 941 | 2,219.6 KiB | 288.2 KiB | 196.9 KiB |
| 836 × 470 | 616.5 KiB | 90.1 KiB | 67.2 KiB |
Method: RGB exports using Pillow; JPEG quality 88; WebP quality 88 with method 6; default PNG encoding; Lanczos resizing for the smaller copy. Values are file bytes divided by 1,024, rounded to one decimal place. The quality numbers are encoder settings, not a claim of equal visual quality across formats.
For this asset, the full-size WebP contains fewer bytes than the JPEG or PNG exports. Reducing the dimensions lowers the file size further. That does not prove that the smaller image belongs in every position: it may be unsuitable for a large display. These are local export measurements, not a website speed test or a measured improvement in Core Web Vitals.
For your own photos, compare a compressed WebP or AVIF candidate with a JPEG export where your publishing workflow supports those formats. Keep PNG in consideration when lossless detail is important. For simple logos and icons, a trusted SVG source may be appropriate, subject to your site’s upload and security setup. Compare the files you actually produce rather than assuming one extension always wins.
Inspect edges, faces, fine textures, gradients, and any essential detail at the intended display size. Reduce quality until defects become visible, then step back to an acceptable result. Avoid repeatedly recompressing an already compressed copy.
Write alt text for the context
Alt text depends on why the image is present. The W3C alt-text decision tree distinguishes informative, decorative, and functional images. The same asset can need different treatment in different contexts.
| Context for the demo illustration | Suitable alternative | Reason |
|---|---|---|
| The illustration is the asset being compared in the export example | Landscape illustration on two picture cards and a smartphone, beside a magnifying glass. | Identifies the sample whose exports are measured. |
| The same image is used only as background decoration | Empty alt attribute: alt=”” | Adds no information that needs repeating. |
| An image alone links to a downloadable comparison | Download the image comparison | Communicates the link’s purpose rather than its appearance. |
Do not copy these alternatives onto unrelated business photos. For a real installation image, describe the relevant visible result in the context of the surrounding section. A caption can explain the project, materials, or limitations; alt text does not need to repeat every nearby sentence.
Use short, descriptive filenames and place images near relevant copy. Google’s image guidance supports useful contextual descriptions and warns against stuffing alt text with keywords. Adding every service and city name does not make an image more helpful.
Check how images load
Images farther down a page can often use lazy loading, so they are requested near the point they are needed. An important image visible immediately on arrival needs different treatment. web.dev’s image performance guidance explains why delaying images near the top can make them appear slower.
Ask your developer to identify the page’s Largest Contentful Paint element rather than assuming every hero image is it. If it is an image, do not lazy-load that resource. Explicit image dimensions or a reserved aspect ratio also help the layout keep its space while the image loads.
Check the actual page after your theme, optimization plugin, and CDN have processed it. An attractive compressed upload can still be delivered at an unnecessarily large size, and a plugin can change loading behavior. Review the requested image in browser developer tools at a mobile viewport, then inspect the page on a phone.
Use a repeatable WordPress workflow
Use the following routine for each new page. WordPress documents image replacement, sizing, and alternative text in its Image block guide. Alt text edited within a block applies to that instance, so review reused images in context.
- Choose the image and write down what it helps the visitor understand.
- Keep the original, then crop and export a web version for the intended placement.
- Record dimensions, format, and file size. Compare quality before choosing the final export.
- Upload with a descriptive filename, select a suitable image size, and add contextual alt text or an intentional empty alternative.
- Preview desktop and mobile layouts. Check cropping, readable text, and any image link destination.
- Test the finished page, record the conditions, and compare like-for-like results if you change an existing image.
If the page still feels slow, images may be only part of the problem. Use the technical SEO checklist alongside the website launch checklist to review the wider site.
Need help applying this to your site? Review the WordPress design and development service or discuss your website requirements. Bring one important service page and its current images so the review starts with a concrete customer journey.
Frequently asked questions
What is the best image size for a service business website?
There is no single size for every placement. Base dimensions on the layout, expected screen density, and available responsive versions. A small service card and a wide project banner should not automatically use the same source.
Should every image be below 100 KB?
Treat a file-size target as a working budget, not a universal rule. A small icon and a detailed project photo have different needs. Choose the smallest acceptable export for the placement and evaluate the total page load.
Will changing PNG files to WebP make my website fast?
It may reduce image bytes, as it did in this demo, but page speed also depends on delivery, scripts, fonts, layout, and server response. Measure your own page before claiming an improvement.
Does every image need descriptive alt text?
Every image needs an appropriate text-alternative decision. Informative images need a useful description; purely decorative images can use an empty alt attribute. An image that acts as a link may need its destination described.
About the author
Muhammad Faheem is the founder of Shayan Faheem SEO and an SEO & AI Search Specialist with more than 10 years of experience. He works with local service and multi-location businesses, connecting search strategy, content, and website implementation. His full name is Muhammad Shayan Faheem.
PUT IT INTO PRACTICE
Know where your business stands.
The AI Visibility Audit turns a defined set of customer questions into a practical improvement roadmap.