Images make pages attractive and persuasive, but they're also the most common cause of slow websites. Optimised images load fast, help visitors who use screen readers, and can bring extra traffic from Google Images and visual search.
1. Use original images
Stock photos appear on thousands of websites. Original photos of your team, premises, products and completed work build trust and are more likely to rank in image search. For a hotel, restaurant or tour company, good original photography is one of the best SEO investments.
2. Write useful alt text
Alt text describes an image for people using screen readers and for search engines:
<img src="kandy-lake-view-room.webp" alt="Deluxe room with balcony overlooking Kandy Lake">
Alt text tips
- Describe what's in the image, specifically
- Include a keyword only if it fits naturally
- Keep it short: a sentence or less
- Decorative images (patterns, dividers) get empty alt text:
alt="" - Don't start with "image of" or "picture of"
- Don't stuff keywords: "SEO Sri Lanka SEO Colombo SEO company"
3. Name files descriptively
IMG_20260512_093412.jpg tells Google nothing. galle-fort-boutique-hotel-pool.jpg does. Use lowercase words separated by hyphens.
4. Resize before uploading
A photo from a modern phone can be 4000 pixels wide and 5 MB. If it's displayed at 800 pixels, you're making visitors download five times more than needed. Resize images to roughly the largest size they'll be displayed, or double that for sharp screens.
5. Use modern formats
| Format | Use for |
|---|---|
| WebP | Photos and graphics; supported by all modern browsers |
| AVIF | Photos; even smaller than WebP |
| SVG | Logos and icons |
| PNG | Graphics needing transparency, if WebP isn't possible |
| JPEG | Fallback for photos |
WebP is typically 25 to 35% smaller than JPEG at similar quality.
6. Compress
Tools like Squoosh, TinyPNG or WordPress plugins like ShortPixel and Imagify can reduce file size by 50 to 80% without visible quality loss.
7. Set width and height
Always include width and height attributes so the browser reserves space and the page doesn't jump while loading:
<img src="team.webp" alt="SEO team meeting" width="800" height="533">
This prevents layout shift, part of Core Web Vitals.
8. Lazy-load below the fold
Add loading="lazy" to images further down the page so they load only when needed. Don't lazy-load the main hero image; it should load as early as possible. This website lazy-loads all blog images automatically.
9. Use responsive images
srcset lets the browser pick a smaller image on phones:
<img src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Tea plantation in Nuwara Eliya">
Most modern platforms do this automatically.
10. Add images to your sitemap and schema
- Include important images in your XML sitemap, or let your SEO plugin do it
- Add images to structured data for products, articles and businesses
- Set an Open Graph image so pages look good when shared on Facebook and WhatsApp
Quick image checklist
- Original where possible
- Descriptive file name
- Useful alt text
- Resized to display size
- WebP or AVIF
- Compressed
- Width and height set
- Lazy-loaded if below the fold
Slow images are often the biggest speed problem on Sri Lankan websites. See website speed for mobile users, or let our website speed optimisation service fix them.