Advanced Image Optimisation Pipeline for Gulf Bilingual Content-Heavy Sites

Content-heavy bilingual sites in the Gulf region (Arabic/English) often serve large images that can drastically slow page load times. With high mobile usage and varying network conditions, achieving top Lighthouse scores requires a robust image optimization pipeline targeting modern formats, responsive sizing, and efficient delivery.

• Lighthouse Performance Score: ≥95 (mobile and desktop)
• First Contentful Paint (FCP): <1.5s
• Largest Contentful Paint (LCP): <2.0s
• Total Image Weight: <500KB per page (for content-heavy pages)
• Image Format: AVIF/WebP with JPEG/PNG fallbacks

The pipeline consists of four stages: pre-processing, compression, responsive generation, and delivery. Pre-processing includes stripping metadata, converting to progressive JPEG, and generating multiple resolutions. Compression uses lossy WebP/AVIF with quality 80-85 for photos and lossless for graphics. Responsive generation creates srcset variants at 480, 768, 1024, 1440, and 1920px widths. Delivery leverages a CDN with edge caching and HTTP/2 push for critical images.

For Gulf audiences, consider using CDN nodes in Dubai, Riyadh, and Doha to reduce latency. Arabic text in images should be avoided; use CSS web fonts instead. For bilingual content, ensure that image alt text is provided in both languages and that the pipeline respects right-to-left (RTL) layout when generating image overlays.

• Use CDN with edge locations in UAE, Saudi Arabia, Qatar, Kuwait, Bahrain, Oman.
• Implement lazy loading with intersection observer for below-the-fold images.
• Serve different image crops for Arabic (RTL) vs English (LTR) layouts if text is embedded.
• Monitor real user metrics (RUM) to adjust quality levels based on network conditions.

• 1. Audit existing images: identify largest and most impactful images.
• 2. Set up build-time image processing (e.g., sharp, ImageMagick) to generate WebP/AVIF and responsive sets.
• 3. Configure CDN to serve images with cache headers (max-age 1 year) and vary based on Accept header for format negotiation.
• 4. Integrate lazy loading with native loading='lazy' attribute and a polyfill for older browsers.
• 5. Test with Lighthouse and WebPageTest from Gulf locations; iterate on quality settings.