Image optimization for Moroccan websites: the complete guide

Open any Moroccan business website, run a performance audit, and the same problem appears: massive, unoptimized images. A 4MB hero image. Product photos uploaded straight from the camera at 4000×3000 pixels. Gallery images that load all at once instead of on demand. Images alone account for 50–70% of most website weight, and for Moroccan visitors browsing on mobile data, they are the single biggest reason sites feel slow.

The cost of unoptimized images

A single unoptimized JPEG hero image can be 3–5MB. On a 4G connection in Casablanca, that takes 3–5 seconds to download. Your visitor stares at a blank or blurry page for 5 seconds before seeing anything. On 3G in rural areas, it can take 15+ seconds. Compare this to a properly optimized WebP version of the same image at 80–150KB — it loads in under a second on 4G.

The math is simple: optimize your images and your site loads 3–10x faster. Don't optimize them, and you lose the majority of your mobile visitors before they see your content.

WebP: the format you should be using

WebP is an image format developed by Google that delivers 25–35% smaller file sizes than JPEG at equivalent quality. Every modern browser supports it (Chrome, Firefox, Safari, Edge). There's no reason to serve JPEG or PNG images in 2026 unless you need to support extremely old browsers, which, in Morocco, you don't.

How to convert: If you use Next.js, the Image component automatically serves WebP with proper sizing. For WordPress, plugins like ShortPixel or Imagify convert images on upload. For manual conversion, tools like Squoosh (squoosh.app) let you convert and compress individual images with visual quality comparison.

Responsive images: serve the right size

A hero image displayed at 1200px wide on desktop does not need to be 1200px wide on a 375px phone screen. Responsive images use the srcset attribute to serve different image sizes based on the device's screen width. A phone gets a 400px version. A tablet gets an 800px version. A desktop gets the full 1200px version.

In Next.js, the Image component handles this automatically with the sizes prop. For static HTML, you need to generate multiple image sizes and implement srcset manually.

Lazy loading: load images when needed

Images below the fold (not visible when the page first loads) should not load until the user scrolls near them. This is lazy loading, and it dramatically reduces initial page weight. A gallery page with 20 images goes from loading all 20 immediately (4MB+) to loading only the 3 visible ones (300KB), with the rest loading as the user scrolls.

Modern browsers support native lazy loading with the loading="lazy" attribute. Next.js applies this automatically to images that are not marked as priority.

Image dimensions: prevent layout shift

Always specify width and height on your images. Without dimensions, the browser does not know how much space the image will occupy until it loads. The page layout shifts when the image appears, causing a poor CLS (Cumulative Layout Shift) score. In Next.js, width and height are required props — the framework enforces this best practice.

The optimization checklist

Format: Use WebP for all images. AVIF for extra compression if your stack supports it. Never serve raw JPEG or PNG from a camera.

Size: No image should be larger than the maximum display size. A hero image does not need to be wider than 1920px. Product thumbnails do not need to be wider than 600px.

Compression: Target 80–85% quality for photographs. Below 80%, artifacts become visible. Above 85%, the file size increase is not worth the minimal quality improvement.

Lazy loading: Apply to all images below the fold. Mark hero images as priority/eager.

Dimensions: Always specify width and height to prevent layout shift.

File size targets: Hero images under 150KB. Product images under 80KB. Thumbnails under 30KB. If any image exceeds 300KB, it needs more compression.

For how image optimization fits into the broader performance picture, see how we achieve 100/100 Lighthouse scores. If your site is image-heavy and slow, let's fix it.