I had a client in Abu Dhabi last year whose website took 9 seconds to load on mobile. Over half those requests were for images. This isn’t just bad UX—it’s a business killer. Users here (and anywhere) won’t wait for pixels to crawl. We fixed this by swapping outdated formats for smarter strategies, and today I’ll share how you can do the same.
WebP: The Format That Punches Above Its Weight
Let’s get technical. WebP consistently outperforms JPEG and PNG in compression efficiency. For one project—a luxury car booking app (Tawasul Limo), we cut image payload by 60% by converting to WebP. Real-world improvement: their page load time dropped from 8s to under 3s on average mobile networks.
Next.js’s Image component handles WebP automatically via the formats option. We set formats: ['image/webp', 'image/jpeg'] in next.config.js, letting browsers choose based on support. No more forcing all users down a single path.
The Browser Compatibility Gotcha
Here’s where it stings: older iOS versions (pre-2020 Safari) can’t render WebP. We hit this with a Qatari real estate client whose audience skewed toward Apple devices. Their solution? A hybrid approach. For images critical to SEO or conversion, we served both formats using the fallback prop. Not perfect, but better than a universally slow site.
Automating the Right Way (Mostly)
Manual image conversion works in a pinch, but scale kills that vibe. For a Dubai-based e-commerce brand, I scripted Sharp to batch-process uploads. It converted PNGs to WebP, auto-cropped whitespace, and generated srcset sizes in one go. The catch: we had to whitelist allowed MIME types in AWS S3 to prevent the CMS from serving broken files. This took three late nights and a lot of coffee.
UAE-Specific Quirks
Regional clients care deeply about speed but often overlook image handling. Arabic-language sites, in particular, tend to overcomplicate visuals—think calligraphy logos that balloon past 1MB each. With a Riyadh media company, we used Contentful’s image pipeline to compress and lazy-load hero images. The key wasn’t just shrinking files but prioritizing above-the-fold assets—a win for FCP scores.
When Automagic Tools Fail
I’ll be real: Next.js image optimization isn’t foolproof. Last month, a client’s team manually uploaded SVG thumbnails for articles. Our automated pipeline missed them because SVGs don’t get WebP variants. The homepage looked broken until we added a regex rule to exclude unoptimized SVGs from critical CSS. Pain in the ass? Yes. Learning moment? Absolutely.
Here’s the thing: tools are tools. You still need to check the damn output. Use Chrome DevTools’s Network tab to audit actual transfer sizes. Once, a seemingly “optimized” photo grid was still sending 800KB PNGs to Safari users—because the team had hardcoded src attributes instead of using the
Practical Steps for UAE Developers
- Audit First: Run a crawl with Screaming Frog to find over-200KB images.
- Default to WebP: Configure your image pipeline (Cloudinary, ImageKit, or Next.js) to generate WebP by default.
- Test on Actual Networks: Speedtest UAE’s mobile networks—4G in Abu Dhabi isn’t the same as Dubai’s 5G.
- Handle SVG Separately: Don’t assume your automation plays nice with vectors.
A recent project, Greeny Corner (the UAE plant app), became a case study in balancing quality and size. We served leaf textures in WebP but kept icon illustrations as SVG. Users browsing at 2AM (who knows why—certainly not me) saw immediate improvements.
Final Notes
None of this matters if you skip the basics: compressing before upload, using modern formats, and respecting device capabilities. UAE businesses demand results, but they don’t care how you get there—just that their site runs.
Need help untangling your image mess or auditing performance? Hit me up at sarahprofile.com/contact. I’ve seen the same problems break too many websites.