2 Geeks Web Design
How to optimise website images without sacrificing quality
Images help a small business website feel credible, memorable and ready for real customers. Product photos, team portraits, project galleries and location shots can explain an offer faster than paragraphs of copy, but large files can make pages slow and frustrating to use. The goal is to keep visual detail while removing unnecessary data.
A practical image workflow considers the original file, the visitor’s device, the page layout and the way the image will be delivered. This matters across Australia, where a customer in central Melbourne may use fast 5G while someone in a regional town may rely on a slower connection or a congested wireless service. Good optimisation gives both visitors a smoother experience.
| Image need | Recommended format | Useful approach | Typical result |
|---|---|---|---|
| Photographs and banners | WebP or AVIF | Resize to the display dimensions and compress with a quality preview | Smaller files with natural detail |
| Logos and simple graphics | SVG or compressed PNG | Use vector artwork where possible; keep transparent PNGs for complex effects | Sharp lines and small file sizes |
| Product thumbnails | WebP or JPEG | Create a dedicated thumbnail rather than shrinking a huge original in CSS | Faster category and shop pages |
| Decorative images | WebP, AVIF or CSS | Remove the file when a gradient, pattern or CSS shape can do the job | Fewer requests and less clutter |
| High-detail galleries | Responsive WebP or AVIF | Load a smaller preview first and provide a larger version on demand | Better browsing on mobile |
Start with the right dimensions
The most effective optimisation often happens before compression. A photograph uploaded directly from a modern phone can be 4,000 pixels wide, even when the website displays it at 900 pixels. Sending all those unused pixels wastes bandwidth and increases loading time. Resize the working copy to the largest size the page actually needs, then create smaller versions for cards, previews and mobile layouts.
Measure the image slot in the design rather than guessing. A full-width desktop banner might need 1,600 or 2,000 pixels, while a three-column service card may need only 600 pixels. Retina and high-density screens justify supplying an image around twice the CSS display width, but that does not mean every photo should retain its original camera dimensions.
Keep an untouched master file in a separate folder or cloud backup. Work from a copy, export the web version, and use a meaningful filename such as plumber-geelong-van.webp rather than IMG_8237.jpg. Descriptive filenames help internal organisation and can provide a small search benefit when they accurately describe the image.
Choose formats according to the image
WebP is a reliable default for most photographs and illustrations. It generally produces a smaller file than JPEG at a comparable visual quality, while supporting transparency. AVIF can reduce file size further, especially for photographs, although a sensible website setup should provide a fallback for older software or unusual browsing environments.
JPEG remains useful for broad compatibility and photographic images, particularly when a content management system or third-party platform handles conversion poorly. PNG is appropriate for transparency, screenshots, interface images and graphics with sharp blocks of colour, but it is often unnecessarily heavy for ordinary photos. SVG is excellent for logos, icons and simple diagrams because it remains crisp at any display size.
Use a visual comparison rather than choosing a compression setting by habit. Export a few versions at different quality levels, zoom into faces, text, foliage and product edges, then select the smallest file that still looks convincing. A slightly softer background is usually acceptable; visible halos around lettering, blotchy shadows and blocky skin tones are signs that compression has gone too far.
The Astromech build journal is a useful example of why different images require different treatment. A detailed electronics photograph may need sharper detail than a wide progress banner, while a gallery thumbnail can be much smaller than the image opened by a visitor.
Deliver images responsively
Responsive images prevent a phone from downloading a desktop-sized asset. The HTML srcset attribute can offer several widths, allowing the browser to select a suitable file. The sizes attribute tells the browser how much space the image occupies at different viewport widths. Together, these controls reduce waste without forcing every visitor to receive the same image.
A content management system can automate much of this process by generating multiple image sizes when an upload is made. Check the settings rather than assuming the feature works perfectly. Some systems preserve an enormous original, create too many variants, or deliver the wrong crop. Regularly review the media library and remove duplicates, outdated campaign graphics and unused uploads.
Lazy loading is useful for images below the first screenful, especially on long service pages, blogs and project galleries. The browser can delay those downloads until they approach the viewport. The main hero image should usually load promptly, because delaying the largest visible element can make the page feel slow and harm performance measurements.
Use width and height attributes or an appropriate aspect-ratio rule so the browser reserves space before an image arrives. This prevents content from jumping as photos load, a problem that is especially irritating for people tapping buttons on smaller screens. It also supports better Core Web Vitals, which can influence both usability and search visibility.
Protect quality through purposeful editing
Compression works best after sensible editing. Crop out empty areas, straighten the horizon, correct exposure and export in the colour profile expected by browsers. For ordinary web images, sRGB is a safe choice. An image that looks bright and balanced in editing software can appear dull or strangely saturated online if its colour profile is not handled properly.
Avoid enlarging a small source image to fill a large banner. Upscaling creates soft edges and exposes noise, while sharpening cannot recreate genuine detail. If a key service page needs a prominent photograph, arrange a new photo or choose a stronger source rather than relying on aggressive editing.
Accessibility is part of image quality. Write concise alt text when an image conveys information, such as “technician installing a split-system air conditioner in Perth”. For a decorative divider, use empty alt text so screen readers can skip it. Text embedded inside a photo may be unreadable on mobile and unavailable to assistive technology, so important words should also appear as live HTML text.
Australian businesses should also consider the rights attached to photographs, illustrations and user-submitted images. Copyright does not disappear because a file is available through a search engine. Keep records of licences and permissions, and take care with identifiable people. Under the Australian Privacy Act, photographs can contribute to personal information when they identify an individual, so a customer gallery should be published with appropriate consent and careful handling.
Build a repeatable image workflow
Image optimisation is easier when it becomes part of publishing rather than a last-minute rescue. A small studio, retailer or trades business can use an export preset, a naming convention and a short pre-publication check. This avoids inconsistent files across pages and makes future updates faster.
For Australian audiences, test pages on an actual mobile connection as well as office Wi-Fi. A customer comparing electricians in Adelaide, booking a café table in Brisbane or viewing a builder’s portfolio from a regional area may be carrying a limited data allowance. Compressing the first visible images can make the difference between a page that opens immediately and one that is abandoned.
A well-structured site can also separate visual presentation from technical delivery. The development approach described by a custom web studio reflects the value of matching implementation to the project rather than relying on a one-size-fits-all template. Image formats, cropping rules and responsive breakpoints should support the brand and its actual visitors.
Use these habits when publishing new images:
- Resize photographs to the largest display width required by the page.
- Export photographs as WebP or AVIF, with JPEG as a practical fallback.
- Create dedicated thumbnails instead of forcing browsers to scale huge originals.
- Add useful alt text, accurate filenames and stable aspect ratios.
- Check mobile loading, visual sharpness and layout movement before publishing.
Review performance after major design changes with browser developer tools, Lighthouse or another speed-testing service. Look for oversized images, missing dimensions, inefficient formats and files loaded below the fold. A page may appear fine on a desktop connection while still delivering several unnecessary megabytes to mobile visitors.
Keep galleries fast as they grow
Project galleries and portfolios create a special challenge because they may contain dozens of images. The parts rundown demonstrates the kind of detailed content that can become image-heavy when every component, stage or close-up is documented. A gallery should show enough detail to communicate the work without asking the browser to fetch every full-resolution original at once.
Create a compact preview for each gallery item and load the larger image only when someone opens it. Limit the number of images initially shown, group related stages, and use clear captions so visitors can understand why each photograph matters. A visitor interested in a completed project should not have to download every behind-the-scenes image before reaching the main result.
Consider a content delivery network when a site serves a national audience or contains many large assets. A CDN can cache files closer to visitors in Sydney, Canberra, Hobart or remote areas, reducing the distance those files travel. It does not replace resizing and compression, though: delivering an oversized file from a nearby server is still inefficient.
Finally, revisit older pages. Camera quality improves, businesses change, and a once-acceptable gallery can become the slowest part of a site. Replace weak photos, regenerate outdated formats and remove assets that no longer serve a customer purpose. Consistent image handling keeps pages attractive, accessible and quick without making the visuals feel cheaply compressed.