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

I was working late on a Next.js project for a construction client in Dubai when I noticed their homepage took 17 seconds to load. Lighthouse flagged massive PNGs weighing 5MB each for a background slider. One image alone slowed the page down enough to fail any Core Web Vitals score. That’s when I realized image handling wasn’t a nice-to-have in the UAE—it was survival for businesses relying on impatient mobile users with blazing-fast internet expectations.

Why UAE Sites Can’t Skimp on Image Optimisation

Let’s get real: UAE internet speeds average 158 Mbps. Users here expect websites to load like native apps. Add to that the local preference for visually rich content in both Arabic and English—and a booming tourism sector like Dubai’s—it’s clear that lazy-loading heavy images is career suicide.

Last year, I worked on a luxury limo booking platform (Tawasul Limo) where the client insisted on full-screen hero banners. Testing revealed that even with 4G, those JPEGs added 3 seconds to load time—killing conversions. That’s when we switched to WebP compression with fallback logic for older Safari versions, cutting image sizes by 60% without losing quality.

WebP Should Be Your Default—With Caveats

Here’s the thing: WebP crushes JPEG/PNG in compression ratios, especially for PNGs with transparency. But I learned the hard way this isn’t universal. One client’s logo had zero opacity gradients that looked terrible in WebP conversion. After wasting 90 minutes tweaking config flags, we bit the bullet and generated both WebP and JPEG versions, letting Next.js pick the right format per user.

For most use cases, though? WebP is golden. I’ve been using the next-optimized-images package with WebP conversion since Next.js 12—it even autogenerates fallback .jpg files for Safari 14 users. Just keep this in mind:

• •Convert SVGs to WebP if they’re complex (yes, it happens)
• •Strip EXIF data from photographer JPEGs—they’ll thank you
• •Test Safari 14.1 manually. Emulators often lie.

The Ugly Mid-Article Anecdote

Remember that client logo I mentioned? I tried using Squoosh’s CLI to fix the alpha gradients. Spent three hours tweaking options before checking the actual HTML specs: WebP doesn’t support 16-bit alpha channels. The designer had saved the PNG-24 with advanced transparency settings no browser handles well. Solution? We exported it as a regular 8-bit WebP and used CSS blur on Safari. Not perfect, but 95% of users never noticed.

Handling Multiple Formats in Next.js

The best approach I’ve found? Let Next.js handle source generation, not runtime choices. We set up the images.formats config to output WebP + legacy JPEG, then use srcSet with type attributes like this:

<Image
  src="/hero-banner"
  alt="Desert skyline"
  width={1920}
  height={600}
/>

Next.js automatically generates hero-banner.webp and hero-banner.jpg in .next/static/media, then injects markup with tags. You get WebP benefits without JavaScript detection.

For animations, we sometimes use APNG → WebP fallback (via Imagemagick scripts), but that’s edge-case territory. Most clients need straightforward product shots, banners, and profile pics optimized—which WebP crushes.

Real-World Win: Tawasul Limo Case Study

Back to the limo app: Before optimisations, their homepage scored 4 on Lighthouse. After implementing WebP compression, responsive image sizes (sizes="100vw" on full-width banners), and critical image prioritization, it jumped to 88. The client’s operations manager in Abu Dhabi reported a 22% bounce rate drop overnight.

Key wins from that project:

• •Converted all CMS-uploaded images to WebP + JPEG during Next.js builds
• •Used Cloudinary for dynamic DPR detection (no need for 4K images on a 1x screen)
• •Prioritized LCP image with priority prop—this shaved ~1.5s off LCP time

Arabic Websites Need Even Better Performance

RTL Arabic websites often struggle with international CDNs. Combine that with font loading and giant hero images, and you’ve got a recipe for disaster. I’m working on a food delivery app for Dubai’s market right now where we compress WebP hero banners to 100KB each—even with Arabic text overlay—while keeping the design director happy.

React Native apps like Greeny Corner (my indoor plant app) need special handling: iOS supports WebP since 10.0, but performance spikes during scroll on older devices. We switched to React Native Fast Image for WebP support and memory caching—made the app feel 2x smoother on iPhones in UAE stores.

Final Thoughts

I’ll be real—no one’s giving awards for invisible image optimisation work. But it’s the difference between a happy client in Doha and a 3am panic call on Jumaah. UAE clients especially don’t care about technical debt until it hits their AdWords CPA.

For the love of Allah and fast websites, stop serving 5MB PNGs to mobile users. Your users (and my sleep schedule) will thank you.

If you’re drowning in image debt for your Next.js site, hit me up at sarahprofile.com/contact. I’ve probably already fixed the same problem two months ago.