A landscaping company has a beautiful photo of a finished backyard project. On a desktop monitor, it looks impressive. On a customer's phone, however, the website may download far more image data than the screen needs—and the visitor waits to see the work.

The solution is not to make every photograph smaller until it looks soft. Good image optimization keeps the details customers need while avoiding downloads they do not. For a service business, that means treating a homepage banner, a project gallery, and a small service thumbnail differently.

Start With Where the Image Will Be Used

Before opening a compression tool, look at the page. Is the photo a wide banner, a card in a row of services, or a close-up meant to show workmanship? Each use calls for a different crop and amount of detail.

A full-resolution camera photo may be much larger than the space it occupies on a website. If an image is displayed in a relatively narrow content column, sending the original multi-thousand-pixel file can waste data. On the other hand, using a tiny thumbnail for a full-width banner may look blurry, particularly on a high-density screen.

Keep the original photo in a safe location, then create a web-ready copy. Crop out unhelpful space, but do not cut away the details that explain the job. For a cleaning service, the condition of the work area may matter more than an artistic background. For a handyman business, visitors should still be able to see what was repaired.

The right dimensions depend on the site's layout and the screens it serves. There is no universal pixel width or file-size limit for every business photo. Google's image guidance recommends balancing visual quality with efficient delivery and using responsive image techniques.

Choose a Format That Fits the Picture

File type matters, but there is no reason to convert every asset to the same format.

  • JPEG: A dependable option for photographs, especially when compatibility with older systems is important. Compression can introduce visible artifacts if pushed too far.
  • WebP or AVIF: Modern formats worth testing for photographs because they can often deliver comparable visual quality with less data. Your website platform and intended browsers must support the versions you serve; provide an appropriate fallback when needed.
  • PNG: Often appropriate for screenshots, graphics with sharp text, or images that need lossless detail or transparency. It is not automatically the best choice for a large photographic banner.
  • SVG: Useful for suitable logos and simple vector graphics, rather than ordinary camera photographs. Any uploaded SVG should be handled through a trusted, appropriately secured workflow.

These are use cases, not an absolute ranking. The MDN image-format guide explains how formats differ in compression, transparency, and compatibility.

Export a few versions of an important photograph and compare them at the size a customer will actually see. Look for lost texture, unnatural edges, muddy lettering on vehicles, or faces that have become smeared. Choose the smallest version that still looks appropriate for the image's job. Do not judge quality only from a file-size number.

Send the Right Version to Each Screen

A mobile visitor should not routinely have to download a large desktop image. Responsive image delivery lets the browser select from different sizes according to the screen and layout. In WordPress, for example, the platform can generate multiple image sizes and include srcset and sizes information, although the theme and implementation still need to use them correctly. The WordPress responsive-images handbook describes this built-in behavior.

Ask your website provider whether your site already creates and serves appropriately sized images before paying for another image plugin. An optimization tool is only useful if it works with the actual website and does not disrupt photos, galleries, or backups.

Loading order matters too. Lazy loading can postpone below-the-fold gallery images until they are needed, but it can delay the most important image visible when a page first opens. Google's Largest Contentful Paint guidance advises against lazy-loading the main image when it is the page's LCP element. A developer can verify which image that is rather than assuming every banner needs the same setting.

Make a Small Change, Then Test It

Start with a page that people rely on—a homepage, major service page, or project gallery—instead of converting the entire media library at once.

  1. Identify the heavy images. Check the page on a phone and use PageSpeed Insights to see whether image delivery is among the reported issues. Treat the results as diagnostic clues, not a promise of higher search rankings.
  2. Keep the originals. Save the source files before cropping, compressing, or replacing anything. Check whether your platform retains earlier versions and whether there is a recovery path if an update fails.
  3. Prepare one image for its actual placement. Set a suitable crop, export an appropriate size and format, and compare how it looks on a real screen. If a customer needs to inspect work details, do not sacrifice those details for a smaller download.
  4. Check desktop and mobile. Inspect sharpness, cropping, whether the image appears promptly, and whether the surrounding page shifts as images arrive. A nice-looking desktop screenshot is not enough.
  5. Compare before and after. Recheck the same page under similar conditions. If the site still feels slow, don't assume images are the only cause; scripts, fonts, hosting, and other page resources may also need attention.

You can usually handle selecting better photos, deciding on crops, and comparing exports yourself. Responsive delivery, loading priorities, and site-wide media changes may be better reviewed by whoever maintains your website.

The goal is not the smallest possible image file. It is a page that shows your work clearly and arrives without unnecessary delay. For a small service business, that is a more useful standard than a perfect-looking optimization score.

Sources and Further Reading