Beautiful photography can quietly sabotage your website if the files are too heavy. Image optimisation is the unglamorous step between a great shoot and a fast page — the work that keeps your images crisp while shaving load times that affect bounce rates, conversions and search ranking. For Singapore brands competing for impatient mobile users, it’s not optional. This guide covers the practical levers that actually move the needle, in the order they matter.
Why image optimisation matters more than people think
Images are usually the heaviest thing on a web page — often the bulk of the total download. An unoptimised gallery can mean a page that takes several seconds to load, and visitors don’t wait. Three reasons it’s worth the effort:
- Speed affects conversions. Slower pages lose sales and sign-ups, full stop. The relationship is well established.
- Search engines care. Page speed and Core Web Vitals feed into ranking, so heavy images can hold back the SEO you’re paying for elsewhere.
- Mobile data and devices. Many of your visitors are on phones, sometimes on patchy connections. Lean images respect that.
The goal of image optimisation is simple: the smallest file that still looks good at the size it’s displayed.
Choose the right format
Format is the first big lever, and modern options beat the old defaults considerably.
- WebP — the sensible default for most web images today. Comparable quality to JPEG at noticeably smaller file sizes, and widely supported.
- AVIF — even smaller for the same quality, support is now broad; a strong choice where your platform allows it.
- JPEG — still fine and universal for photographs if you can’t serve WebP/AVIF.
- PNG — only for graphics needing transparency or sharp flat colour (logos, icons). Don’t use it for photographs; the files are huge.
- SVG — for logos and simple icons, infinitely scalable and tiny.
The common mistake is publishing photographs as PNGs “for quality” — they end up several times larger for no visible benefit.
Resize before you compress
The biggest single waste is uploading a full-resolution camera file straight into a slot that displays it at a fraction of the size. The browser downloads all those pixels and then shrinks them — pure dead weight.
- Resize each image to roughly the dimensions it actually displays at (allowing about double for high-density screens).
- A 6000-pixel hero served into a 1600-pixel slot should be exported at a sensible width first, not dumped in raw.
- Serve different sizes to different devices where your platform supports responsive images, so phones aren’t downloading desktop-sized files.
Right-sizing alone often cuts file weight more than any other step.
Compress sensibly
Compression throws away data the eye is unlikely to miss. The art is finding the point where the file shrinks dramatically but the image still looks clean.
- For most photographs, a quality setting around 70–85% gives a big size saving with no visible loss.
- Over-compress and you get blocky artefacts and muddy detail — bad on product close-ups especially.
- Use a good compression tool or an automated pipeline rather than guessing; batch-process so your whole library is consistent.
Resize first, then compress — doing them in that order gives the leanest result.
Loading and delivery tricks
Beyond the files themselves, how they’re delivered matters:
- Lazy loading — images below the fold load only as the visitor scrolls to them, so the initial page paints fast. Most modern platforms support this with a simple attribute.
- A CDN — serves images from a server geographically near the visitor, cutting latency. Valuable if you reach audiences beyond Singapore.
- Caching — returning visitors load images from their device, not your server.
- Set explicit dimensions so the layout doesn’t jump as images load — better experience and better Core Web Vitals.
Don’t forget alt text and file names
Optimisation isn’t only about speed — it’s also discoverability and accessibility.
- Descriptive file names (sage-linen-cushion.webp, not IMG_4821.webp) help image search understand the file.
- Alt text describes the image for screen readers and search engines. Write it for a human first, naturally including the relevant term where it fits.
These small habits compound across a whole site. Building a properly optimised, well-named image library is part of how we hand over assets after a shoot, so they’re ready to perform rather than just sit on a drive — see the kind of brand imagery we produce across our portfolio and how our photography and content service delivers web-ready files.
A practical optimisation workflow
- Start from the high-res master.
- Resize to the display dimensions (×2 for sharp screens).
- Export as WebP or AVIF.
- Compress to around 70–85% quality and check it still looks clean.
- Give it a descriptive file name and alt text.
- Enable lazy loading and let your CDN/cache do the rest.
Frequently asked questions
What’s the best image format for a website?
WebP is the sensible default for photographs today — smaller than JPEG at similar quality and widely supported. AVIF is even smaller where your platform allows it. Keep PNG for transparency and flat graphics, and SVG for logos and icons.
How much can image optimisation speed up my site?
Often dramatically, because images are usually the heaviest assets on a page. Right-sizing, modern formats and sensible compression frequently cut image weight by more than half, which directly improves load time, mobile experience and Core Web Vitals.
Will compressing images make them look bad?
Not if done sensibly. Around 70–85% quality usually shrinks files a lot with no visible loss. Problems come from over-compressing or compressing an already-small image repeatedly. Resize first, then compress once from the master.
Want a shoot that arrives web-ready, not as giant raw files? Tell us about your site and we’ll deliver images optimised for speed and search.
