Image Optimisation for UAE Websites: Serving the Right Format to Every User

Last time I checked Google PageSpeed Insights for a client’s property listings site in Abu Dhabi, 65% of their images were still using JPEGs. They had decent compression, but users on Etisalat and du mobile networks were seeing pages load 3-4 seconds longer than necessary. That’s not just a technical issue — in the UAE, where attention spans get tested by 5GHz Wi-Fi, even 1 second of extra load time kills conversions.

How Next.js Made Image Handling 90% Less Painful

Before Next.js 13, I’d manually convert images to WebP, write conditional tags, and cross my fingers. Now, the next/image component does most of the heavy lifting, but it took me six months to stop fighting its default behavior.

The real game-changer? Automatic format selection. When you set formats={['image/webp', 'image/jpeg']}, Next.js 15 generates both versions under the hood and serves the right one depending on the user’s browser. No more guessing if that old Samsung Galaxy in Sharjah supports AVIF (spoiler: it doesn’t).

But don’t skip these config tweaks:

1. Set a global quality value in your next.config.js — I usually go with 85 for JPEGs, 70 for WebP
2. Define explicit blurDataURL for lazy loading transitions — no need for extra libraries
3. Use sizes prop with viewport-relative units to avoid layout shifts on Arabic language sites (more on that later)

WebP is Not a Magic Bullet, But It Helps

I spent three weeks arguing with a client who refused to switch from PNGs for their UAE logistics tracking app. Their excuse? “It’s only a 58kb difference.” What they didn’t see was the cumulative weight across 15+ image-heavy pages. After switching to WebP with lossless compression for diagrams and lossy for photos:

• •Largest Contentful Paint dropped from 5.2s → 2.8s on 3G connections
• •Bounce rate on mobile decreased by 22% in 4 weeks

Pro tip: Convert SVGs to WebP when animation isn’t required. SVG isn’t always smaller — a complex vector graphic with gradients can balloon past 1MB while the WebP equivalent sits at 80KB.

Why UAE Websites Have Unique Image Challenges

In my 7 years building bilingual sites for Dubai startups and Abu Dhabi enterprises, I’ve learned a harsh truth: Arabic language versions always have larger layout shifts. Why? Longer text strings in Arabic mean thumbnails get resized inconsistently unless you enforce strict aspect ratios (which I do now, no exceptions).

This ties back to image optimisation. One of my logistics clients in Doha had 1920px-wide hero images that weren’t serving the cropped WebP version. Users on LTE saw a 2.5MB download instead of 400KB. The fix?

1. Use next/image’s object-fit="cover" consistently
2. Define aspect ratio in a global CSS variable: --aspect-ratio: 16 / 9
3. Add loading="eager" on the first image of each Arabic language page

Real Project, Real Pain Points

I’ll never forget the week I broke Tawasul Limo’s booking system trying to lazy-load images with Intersection Observer. The client wanted a luxury feel, which meant massive full-width banners. The first deploy caused a 600ms Cumulative Layout Shift. My mistake? Assuming Next.js handles priority correctly when you set loading="lazy".

We rebuilt that feature using fetchpriority="high" on critical hero images and added width-scaled for regional device variations. Turns out 68% of their UAE users came from devices with pixel densities ≤2x, so we limited high-res variants to 2x only.

Frequently Asked Questions

How does WebP compare to JPEG and PNG?

WebP offers 25-34% smaller file sizes than JPEG while maintaining quality, and lossless WebP is 26% smaller than PNG. For UAE websites serving both Arabic and English audiences, this matters because bilingual sites often have 1.5x more images due to localized banners and icons.

Can I use WebP images on older browsers in the Gulf market?

Yes, but with conditions. WebP works in Chrome, Edge, and Firefox, which cover 87% of UAE users. For Safari 14+ and the remaining 13%, configure Next.js to generate fallback JPEGs. Testing is key — I caught two corporate clients still on IE11 (yes, in 2026) through real-user monitoring data.

What image dimensions should I use for Next.js optimisation?

No one-size-fits-all, but here’s my baseline:

• •Small thumbnails: 150×100
• •Cards/grid views: 400×267
• •Hero images: 1920×1080 (always compressed at quality=70)

Also, generate 2x versions only for devices with Retina displays — don’t waste bandwidth on unnecessary HD versions.

How do I test if users actually get WebP images?

Open Chrome DevTools → Network tab → Right-click column headers → Enable the 'Type' column. Filter for .webp entries. For production, add a script to log Accept headers server-side. One Dubai fintech client discovered 18% of their users weren’t getting WebP because their CDN wasn’t configured correctly.

If you’re drowning in slow-loading images or want to build a bilingual site that doesn’t punish mobile users, book a free consultation. I’ve spent seven years making UAE websites faster for users on everything from 5G in JBR to 3G in inland Sharjah — let’s fix this together.