Why image optimisation is still overlooked
Most small business websites I look at have the same pattern. The text appears almost instantly, then the images arrive one by one, pushing the layout around as they land. In any web design project, images are often the heaviest elements on the page — heavier than the fonts, the scripts and the copy combined.
That weight is paid for by your visitors. On a desktop with office wifi, a sluggish image barely registers. On a phone on the MRT with two bars of signal, it is the difference between a page that opens and a page that gets abandoned. Singapore buyers are impatient and often browsing on mobile data they are conscious of using.
There is a search cost too. Google’s page experience signals, including Core Web Vitals, look at how quickly the main content of a page appears and how much the layout jumps around while loading. Oversized images hurt both. Then there is accessibility: a screen reader user cannot see your photo of a shopfront or a plate of food, so the words you attach to that image are the only version of it they get.
The most common mistake I see from Singapore SMEs is not laziness, it is habit. Someone takes a photo on a phone, sends it over WhatsApp, and uploads the file exactly as it arrived. A single photo from a recent phone can easily be 4 MB or more; a stock image downloaded at full resolution can be larger still. A homepage carrying six of those is a slow homepage by design.
None of this requires code to fix. Below is the same process I go through on client sites, written for the person who uploads the images rather than the person who builds the theme.
Start with the right file format
The format decides how efficiently the picture is stored. Choosing the wrong one wastes size before you have done anything else.
- JPEG for photographs — product shots, team photos, interiors, food. It handles gradual colour and detail well and compresses neatly.
- PNG for logos, icons with transparency, and simple graphics with flat colour. PNG keeps hard edges crisp, but photographic content saved as PNG becomes enormous.
- WebP (and AVIF where supported) for modern browsers. Both give good sharpness at smaller file sizes than JPEG, and both are widely supported now. Many platforms generate WebP versions automatically.
- SVG for icons, line art and simple illustrations. An SVG logo stays razor sharp at any size and is usually a fraction of the size of a PNG.
Some examples. A café’s hero shot of its interior should be a compressed JPEG or WebP at roughly 1600–2000 pixels wide. The same café’s logo should be an SVG, with a PNG fallback only if needed. A product photo on an e-commerce listing is a JPEG at around 1000–1200 pixels — sharp enough to zoom, small enough to load quickly on a phone.
There is more on this in How to Use Images Effectively in Web Design, including how sharpness and file size trade off against each other.
Compress files before you upload
Compression is where the biggest savings are, and it takes seconds per image.
Free tools do the job well. Squoosh lets you drag in an image, pick a format, and watch the file size change while you compare the preview at 100%. TinyPNG does the same for PNG and JPEG with almost no settings to think about. Either will typically take a multi-megabyte phone photo down to a few hundred kilobytes with no visible difference on screen.
If you are exporting from a design tool, the export settings matter more than people expect:
- Canva: use Download → JPG and move the quality slider down. The default is generous; a lower setting is often indistinguishable on a web page.
- Photoshop: use File → Export → Export As, choose JPG, and set quality around 70–80. Tick the option to convert to sRGB so colours look the same in browsers.
- Phone photos: crop and straighten first, then export or compress. Cropping alone can remove a third of the pixels you do not need.
Get into the habit of checking file size in kilobytes rather than megabytes. A well-prepared in-page photo is usually somewhere between 80 KB and 250 KB; a full-width hero is larger, but still comfortably under 500 KB.
The thing to avoid is uploading a 5 MB original and assuming the website will sort it out. Some platforms do generate smaller copies, but they are working from a bloated source, they store every version, and any page that ends up serving the original — a lightbox, a social share preview, a PDF — serves the 5 MB. There are more tactics in Freelance Web Design: Tips for Optimizing Website Loading Speed.
Resize for the actual display size
Over-compression is rarely the problem. Over-sizing is. An image that displays at 600 pixels wide does not need to be 4000 pixels wide, and shrinking it in the page editor does not shrink the file — the browser still downloads the full thing and then throws most of it away.
A simple rule: match the image width to the largest size at which it will ever appear.
- Full-width hero banner: around 1600–2000 pixels wide.
- Image inside a content column: around 800–1200 pixels wide.
- Thumbnail or card image: around 300–600 pixels wide.
- Logo in the header: whatever the header actually renders, usually 200–400 pixels, or an SVG.
Responsive images handle the rest. In plain terms, modern sites can offer the browser several versions of the same picture and let it pick whichever suits the screen — a smaller file for a phone, a larger one for a laptop. You do not need to write the srcset attribute yourself; WordPress, Shopify and most modern platforms will generate these versions from the images you upload, provided the original is a sensible size to begin with.
Two practical habits help. First, keep aspect ratios consistent within a group — if your team photos are all 4:3, they will line up neatly in a grid instead of being cropped differently on every device. Second, always set a width and height (or let your platform do it) so the space is reserved before the image loads. That is what stops the page from jumping around as pictures arrive.
For more detail, see The Benefits of Responsive Images in Web Design.
Write clear filenames and alt text
Two small pieces of text do a lot of quiet work.
Filenames. A file called IMG_8821.jpg tells Google nothing and tells you nothing six months later when you are hunting through a media library. Rename before uploading, using lowercase words separated by hyphens: changi-showroom-reception-desk.jpg, kopi-o-and-toast-set.jpg, marble-countertop-close-up.jpg. Keep it short and descriptive rather than cramming in every keyword you can think of.
Alt text. This is the description attached to an image in the code. Screen readers read it aloud, it displays if the image fails to load, and search engines use it to understand what the picture shows.
The easiest way to write good alt text is to describe the image as if you were speaking to someone on the phone who cannot see it. “A two-storey shophouse unit in Joo Chiat with a dark grey awning and potted plants by the entrance” is useful. “Shop, shophouse, Joo Chiat, Singapore, property, buy shop, best shop Singapore” is not — that is keyword stuffing, and it makes the experience worse for the people the text exists to serve.
A few rules worth remembering:
- Describe what matters in the image, not every object in the frame.
- Keep it to roughly a sentence; skip “image of” and “picture of”.
- Never repeat the same alt text across different photos.
- Purely decorative images — a divider line, a background texture — can have an empty alt attribute, which tells screen readers to skip them.
There is a fuller explanation in The importance of the “alt” attributes in HTML code.
Prepare images before your next web project
If you are planning a new site or a redesign, the single most useful thing you can do is prepare your images before design starts, not during it. Uploading and fixing images is one of the biggest causes of delay in the final week of a project.
A workable approach:
- List the pages your site will have — home, about, services, contact, and so on.
- Create one folder per page and drop in the images you want for each.
- Delete duplicates and anything blurry, dated or not actually yours to use.
- Batch rename the keepers and compress them.
- Record the alt text in a simple spreadsheet: filename, page, alt text.
- Hand that folder and spreadsheet over with your copy.
That package saves a round of back-and-forth, gets your launch date closer to the plan, and means the person building the site spends time on layout and speed rather than chasing replacements. It also pairs naturally with Website Content Planning: What to Prepare Before Design, which covers the words side of the same preparation.
Quick image checklist
Before any image goes live, run through this:
- Correct file format chosen — JPEG for photos, PNG or SVG for logos and icons, WebP where available.
- File compressed to a sensible size in KB, not MB.
- Dimensions match the largest area where the image will display.
- Filename is descriptive and hyphenated, not a camera default.
- Alt text written where the image carries meaning; left empty where it is decorative.
- Consistent aspect ratios across grouped images.
- Mobile preview checked on a phone, not just resized in a desktop browser.
Let’s talk about your site
If your current site feels slow and you suspect the images are part of the reason, I can take a look and tell you plainly what is worth fixing and what is not. I build fast, SEO-optimised websites for Singapore small businesses and stay around after launch for updates, fixes and the occasional “can you just check this for me” question. Send me a note through the contact page with your website address and a line about what is bothering you, and I will come back with a straight answer.