Why do images slow websites down?
On many small business sites, images make up the largest share of what a visitor downloads. A single photo taken on a recent phone can be 3 to 6 MB and 4,000 pixels wide, while the slot it fills on screen is often 800 pixels across.
The browser still downloads every byte, and on a mobile connection in a busy BTS station that wait is what people feel as a slow site.
Three rules fix most cases: resize each image to the largest size it will actually display, save it in a modern format such as WebP at sensible quality, and let the page load below-the-fold images only when the visitor scrolls towards them. Do those three and many pages drop to a fraction of their weight without any visible change.
Images also decide one of Google's Core Web Vitals. Largest Contentful Paint (LCP) measures when the biggest visible element finishes rendering, and on a homepage or product page that element is usually a hero photo. If the hero is oversized or discovered late, LCP suffers. This guide sits in our SEO, speed and analytics section, and it covers the file handling side only; if images are just one of several problems on your site, our article on why a WordPress website is slow looks at hosting, plugins and themes too.
Choose the right format
No single format wins everywhere. The choice depends on what the image contains and whether it needs transparency. WebP is supported by all current major browsers, and AVIF support is now broad as well, which you can confirm on Can I use (linked in the sources below). WordPress has accepted WebP uploads since version 5.8 and AVIF since 6.5, although your host's image library must support them too.
A practical default for a Bangkok business site: photos in WebP, logos and icons in SVG, and PNG only where a screenshot or graphic needs sharp edges and WebP is not an option. Keep original JPEGs in a folder on your computer as masters, never as the files you upload.
| Format | Best for | Watch out for |
|---|---|---|
| JPEG | Photos when an older system cannot handle WebP | Larger than WebP at the same visual quality; no transparency |
| PNG | Screenshots, graphics with text, images needing transparency | Very heavy for photos; never upload a photo as PNG |
| WebP | Most photos and graphics on a modern site | Keep a JPEG master in case another platform needs it |
| AVIF | Photos where every kilobyte counts | Slower to encode; check your host and plugin support |
| SVG | Logos, icons, simple illustrations | Only upload SVG files from trusted sources, they can contain code |
Size images for where they appear
Before uploading, find out how wide the image appears on the page. A full-width hero on a desktop layout may display at around 1,600 to 1,920 pixels. A blog image inside a content column is often 700 to 900 pixels. A product thumbnail in a shop grid may be 300 to 400 pixels. Your developer or theme settings can tell you the exact numbers.
Allow for sharp screens
Phones and many laptops have high-density screens that pack two or more device pixels into each CSS pixel. An image shown 400 pixels wide looks crisp on those screens at roughly 800 pixels. So the working rule is: export at about twice the display width, and no more, capped at about 2,400 pixels for full-width heroes, since larger files cost more than the sharpness they add. Going to four times gains nothing a visitor can see.
Crop before you compress
Crop to the shape the layout uses, for example 16:9 for a banner or 1:1 for a product grid, so the browser is not downloading sky and floor that the theme then hides. Consistent ratios also keep a product listing tidy. What a product photo should actually show is a separate topic; here we only care that the file matches its slot.
Compression without visible loss
Lossy compression throws away detail the eye does not notice. For WebP and JPEG photos, a quality setting somewhere around 70 to 82 usually looks identical to the original at normal viewing size. Push much lower and you start to see blotchy skies and smeared text. The only reliable test is your own eyes: compare the compressed version side by side at 100 percent zoom.
Tools that work
- Squoosh, a free browser tool, lets you compare quality settings and formats live on one image.
- Desktop editors such as Photoshop, Affinity Photo or GIMP have export dialogs with quality and resize controls.
- WordPress plugins such as ShortPixel, Imagify, EWWW Image Optimizer or Smush can compress and convert images on upload. Several charge by volume, so check each plugin's current pricing page.
A plugin is a safety net, not a replacement for resizing. If staff upload a 5 MB photo, the plugin shrinks it, but the original often stays on the server and backups grow. Resize first, then let the plugin handle the rest. Our website speed optimization work can start by bulk-fixing the existing media library this way.
Responsive images and srcset
A phone does not need the same file as a 27 inch monitor. The srcset attribute lists several widths of one image, and the sizes attribute tells the browser how wide the image will be in the layout. The browser then picks the smallest file that still looks sharp on that screen. MDN's guide to responsive images explains the syntax in detail.
The good news for WordPress users: when you upload an image, WordPress creates several resized copies automatically (thumbnail, medium, large and a few more) and adds srcset and sizes to images placed in content. You get most of the benefit without touching code. Two things can still break it:
- A theme or page builder that outputs images as CSS backgrounds, which skip srcset entirely.
- Uploading an image that is already small, so WordPress has no larger copies to offer high-density screens.
Some sites go further with an image CDN, a service that resizes and converts images on the fly and serves them from servers close to the visitor. It helps busy stores with thousands of product photos. For how one popular option works, see our notes on putting Cloudflare in front of your site.
Lazy loading, and the one image you should not lazy load
Lazy loading tells the browser to wait before fetching an image until the visitor scrolls close to it. On a long menu page for a restaurant or a room gallery for a hotel, that saves a lot of data for people who never scroll to the bottom. WordPress adds loading="lazy" to most content images by default.
The exception is the main image at the top of the page. Lazy loading the hero delays the very element that LCP measures, which is one of the most common mistakes web.dev points out in its LCP guidance. Recent WordPress versions try to skip lazy loading on the first large image and add fetchpriority="high" to it, a hint that tells the browser to fetch that file early. Sliders, page builders and some themes defeat this, so check the page source: the hero should not carry loading="lazy".
A quick way to see whether the fix worked is the Core Web Vitals report. Our guide on reading Google Search Console Core Web Vitals and lab tests walks through what the LCP element is and how to find it.
Width, height and layout shift
You have probably tapped a button on a phone just as the page jumped and sent you somewhere else. That jump is layout shift, and Google measures it as Cumulative Layout Shift (CLS). Images are a frequent cause: the browser does not know how tall a picture will be until it arrives, so text below it gets pushed down.
The fix is simple. Every image tag should carry width and height attributes, or the container should have a fixed aspect ratio in CSS. The browser then reserves the right space before the file loads. WordPress adds these attributes to images inserted through the editor. Problems appear with images added through custom HTML blocks, sliders, ad slots and embedded social posts, so those are the places to test.
Good image handling is part of what makes a site feel well built, and it feeds into search performance too. If you are wondering how far layout and visuals affect rankings in general, we cover that question in our article on whether website design affects SEO.
Alt text and file names in two languages
Alt text describes an image for screen reader users and for search engines. Google's image SEO guidance asks for descriptive, useful alt text and descriptive file names rather than strings like IMG_4821.jpg.
Match the language of the page
On a bilingual Thai and English site, the Thai page gets Thai alt text and the English page gets English alt text. If your site uses one shared media library for both languages, check how your multilingual plugin handles alt text; some let you translate it per language, others copy the same value everywhere. A Thai visitor using a screen reader should hear Thai.
Write it plainly
- Describe what is shown: "Deluxe river view room with king bed" beats "hotel room photo", a habit worth building on any hotel or resort website.
- Skip "image of" at the start and do not stuff keywords.
- Decorative images, such as background patterns, can have empty alt text.
- File names can stay in Latin script with hyphens, for example deluxe-river-view-room.webp, which avoids encoding problems in URLs.
Only use images you have the right to use
Never download a photo from Google Images and put it on your site. Most images online are copyrighted, and "found on Google" is not a licence. Use your own photos, a paid stock licence, or a free library whose licence you have read.
An upload routine for your team
Print the steps below and keep them next to whoever updates the site. Once the habit sticks, the media library stays light without anyone thinking about it. To check that it is working, track page load and bounce alongside the other website KPIs for small business you already watch.
If your existing library is already full of 5 MB photos, a one-off cleanup is usually worth it. We can handle that as part of a maintenance arrangement, priced per site on request, or as part of a new build; our website design cost page shows what each package includes.
- Check the slot sizeAsk how wide the image displays, then plan for about twice that width.
- Crop to the layout ratioBanner, square product shot or portrait card, crop before exporting.
- Export as WebPQuality around 75 to 80, then compare against the original at full zoom.
- Rename the fileShort, descriptive, hyphenated, for example river-view-deluxe-room.webp.
- Write alt text in the page languageThai on Thai pages, English on English pages, describing what is shown.
- Leave the hero eagerNever set the top image to lazy load; let everything below it lazy load.
- Confirm the rightsOwn photo, paid licence or a free licence you have read. Never Google Images.
More on speed and performance
Sources
- web.dev: Optimize Largest Contentful Paint
- Google Search Central: Google Images best practices
- MDN: Responsive images
- Can I use: AVIF image format
- Can I use: WebP image format
Builds and ranks the websites: the systems behind the 17 client sites whose Search Console numbers we publish. This guide was written by the Website Development Bangkok team. More about us