Heavy catalog images stall the mobile buy path on Salla, Zid, Shopify, and Woo

Most stores in the region treat catalog images as a photography problem. They are a delivery problem. A 4,000 pixel studio file on a 390 pixel screen still costs megabytes, still blocks Largest Contentful Paint, and still makes the buy button feel late.

Salla, Zid, Shopify, and WooCommerce all let you upload a master file. None of them magically ship the right byte size to every phone on STC, Vodafone Egypt, or Etisalat. You choose dimensions, format, lazy loading, and what loads before the fold.

This article is a working order, not a lecture. You will map where catalog images live, cut bytes without killing quality, protect LCP and layout, then measure the first screen with a scan instead of a guess.

Why catalog images decide the first tap

On a category page the largest paint is almost always a product photo. If that file is a 2 MB JPEG with no width and height, the phone downloads it, decodes it, then paints a grid that was empty for seconds. The shopper already compared two other stores in Instagram.

In KSA and the UAE, 4G is often good in cities and uneven in compounds and malls. In Egypt, peak evening traffic on mobile data makes a heavy gallery feel broken even when the theme looks fine on office Wi-Fi. Catalog images that pass on desktop still fail the buy path.

Trust also drops. A blank tile looks like an unfinished store, not a premium brand. That is before price, VAT, or cash on delivery even enter the decision.

What “heavy” means in practice

Heavy is not a vibe. It is a file that is larger than the slot it fills, or a format the browser must decode slowly.

• A hero or first grid tile over about 200 KB on mobile is already expensive.
• A full catalog of 40 products at 1 MB each is a 40 MB browse session before filters.
• PNG screenshots of products add alpha data nobody needs on a white card.
• Four carousel frames loading at once multiply the same mistake.

Takeaway: size catalog images to the CSS slot, then compress. Do not upload camera originals and hope the CDN guesses.

If PageSpeed flags LCP as an image, you are not looking at a mysterious JavaScript bug. You are looking at the photo you chose as the face of the catalog. That is good news. Photos are cheaper to fix than a full theme rewrite. Read how to read the scan, then fix before you hire a redesign. That write-up also covers sales lost to a slow first paint.

How Salla, Zid, Shopify, and Woo ship photos

Platforms differ, but the shopper does not care. They care that the first row appears. Your job is to use the native image pipeline, then stop fighting it with apps and page builders.

Salla and Zid

Salla and Zid store product media in their own CDN. You still control the upload. If you drop a 12 MB TIFF-style export from Photoshop, the platform may convert, but it will not crop to your card ratio or strip EXIF bloat unless you do that upstream.

Theme settings often load the first N thumbs eagerly. If N is 24 and each thumb is still a near-full product shot, the home catalog is a flood. Lower the above-the-fold count. Use the platform’s size variants if the theme supports `srcset`. Do not paste raw HTML `<img>` tags with absolute desktop URLs inside banners.

Apps for sliders, lookbooks, and Instagram feeds fetch their own catalog images. Those URLs often skip the store CDN’s resizing. Audit every app that injects a grid.

Shopify and WooCommerce

Shopify’s CDN can emit WebP and AVIF when the theme uses `image_url` filters correctly. A theme that hard-codes `product.featured_image | img_url: 'master'` sends the master. That is the usual leak.

WooCommerce on shared hosting in Egypt or a cheap VPS is harsher. There is no Shopify-grade CDN unless you add one. Unoptimized uploads live on origin. A page builder that clones the same 2000px gallery three times on a category template will melt LCP.

Woo also loves plugins that regenerate thumbnails and then never delete the unused sizes. Disk fills, and HTML still points at the largest file.

Takeaway: use the platform image API. If the theme requests `master`, change the theme, do not only recompress in a desktop folder.

When the theme itself is the bottleneck, fix the image helpers in the theme instead of stacking another compression app on a broken grid.

A compression workflow you can run this week

Do not start with a redesign. Start with the files that paint first. One merchant, one folder, one format rule.

1. Export a list of the home grid, the top 20 category pages, and the top 20 products by revenue. Those catalog images pay the rent.
2. Resize so the longest edge matches the largest real slot. If the card is 400 CSS pixels at 2x, 800 pixels is enough. 2400 is waste.
3. Convert to WebP (or AVIF if the theme and CDN already negotiate it). Keep a JPEG fallback only if an old WebView in a super-app browser still fails.
4. Strip metadata. Camera EXIF and Photoshop profiles add tens of kilobytes for no on-screen gain.
5. Set width and height in HTML or CSS aspect-ratio so the grid does not jump. That protects cumulative layout shift.
6. Lazy-load every tile below the first row. Never lazy-load the LCP image.
7. Recheck on a throttled mobile profile, then scan the store and compare LCP before and after.

This sequence works on Salla media, Zid product photos, Shopify Files, and Woo uploads. The tool names change. The physics do not.

Quality without the studio file

Teams fear compression because a past export looked muddy. Mud comes from shrinking a busy pattern too far, or from stacking compression three times (export, app, CDN). Compress once, at the right size.

Fashion and beauty need more chroma than a plain carton of dates. Test one SKU at 70, 75, and 80 WebP quality on a real phone, not only on a calibrated monitor. If stitching or fabric noise dies, bump quality on that collection only. Do not raise the whole catalog to 95 “just in case.”

Background removal PNGs are a special case. A 2 MB transparent PNG in a 200 pixel thumb is a common Woo and Shopify mistake. Convert to WebP with transparency, or composite onto the card color and save as a smaller opaque WebP.

Galleries, carousels, and layout shift

The category grid is only half the story. Product galleries on Shopify and Salla often preload every angle. On a 12-image jewelry SKU, that is twelve decodes before the shopper pinches anything.

Load the featured image as LCP. Defer the rest until swipe or until idle. If you use a variant-image swap (gold vs silver), swap a sized URL, not the original.

CLS from missing image boxes

Layout shift is the silent twin of heavy files. The text block sits high, then a late photo pushes Buy down. The shopper taps the wrong control. On RTL stores that already fight mixed alignment, a jumping gallery is worse. Pair this work with one RTL checkout path.

Reserve the box. Use the real aspect ratio of the collection. Mixing 1:1 and 4:5 in one grid without a consistent card height makes every row reflow as images arrive.

Autoplay video posters count as catalog images too. A 4K poster under a muted reel is still an LCP candidate. Treat posters like photos: sized, compressed, not lazy if they are first paint.

Takeaway: one sized featured image for paint, the rest on demand. Empty space with a reserved ratio beats a jumping page.

Video, apps, and the GCC network

Instagram-style shoppable grids look modern in a pitch deck. On a phone in Jeddah at 7pm they compete with chat widgets, pixel scripts, and a sticky bar. Each extra library fetches more catalog images through a different host, which delays the real product CDN.

Cap the number of image hosts. Prefer the platform CDN. If an app cannot use it, drop the app or replace the block with a native collection.

For cross-border GCC shipping stores, the same SKU photo is reused on Arabic and English templates. Optimize once. Do not keep a “print quality” file on the Arabic catalog and a compressed file on English. Shoppers share links across languages.

Woo stores that sell from Egypt to KSA often put Cloudflare or a similar proxy in front. That helps TTFB. It does not shrink a 3 MB PNG. Compression remains your job.

If you are still choosing a platform default, use the theme’s native image helpers so you are not fighting a second CDN.

What to check after you ship the new files

Compression is not done when the designer says the folder is clean. It is done when LCP on mobile drops and the first row is visible without a spinner.

Open the live category on a mid phone, not the newest flagship. Confirm the first image is WebP or AVIF in the network panel. Confirm it is not `loading=lazy`. Confirm the byte size matches the slot.

Then run your x8x scan on the same URL. If LCP is still a photo, you either left a larger `srcset` candidate in play or a CSS background-image that bypasses the CDN. Background images in sliders are a frequent Salla homepage leak.

Product SEO still needs alt text that describes the SKU, not “IMG_3098.” Compression and alt text are the same asset. One file, two jobs.

Takeaway: ship sized catalog images, prove LCP on a phone, then stop adding galleries until the first paint is stable.

If HTTPS warnings mix with mixed-content images, fix transport next. Insecure leftover `http://` image URLs can block a lock icon even after compression. See SSL certificate trust at checkout.