Image Optimization for Ecommerce: Speed Up Your Store Without Losing Quality

Alt text describes your image to search engines and screen readers. Google Images drives 20-60% of total ecommerce traffic for many stores, and alt text is the primary signal Google uses to understand what an image shows. **Bad alt text:** 'IMG_3847.jpg' or empty alt='' **Good alt text:** 'Blue cotton crew neck t-shirt, front view' **Great alt text:** 'Mens blue organic cotton crew neck t-shirt by BrandName, front view on white background' Include the product name, key attributes (color, material, size), and context. Don't stuff keywords — write naturally.

Modern formats make a huge difference: **WebP:** 25-35% smaller than JPEG at equivalent quality. Supported by all modern browsers. This should be your default format. **AVIF:** Even smaller than WebP (up to 50% smaller than JPEG), but slower to encode and not yet universal. **JPEG:** Still fine for product photos, but use quality 80-85, not 100. The difference is invisible but the file size drops dramatically. **PNG:** Only for images that need transparency. Never use PNG for product photos — the files are 5-10x larger than JPEG. Shopify automatically serves WebP when browsers support it. WooCommerce stores should use a plugin like ShortPixel, Imagify, or Smush.

**Lazy loading** means images below the fold don't load until the user scrolls near them. This dramatically improves initial page load. Add `loading='lazy'` to all images except the first visible one (hero/product image above the fold). **Responsive images** (srcset) serve different image sizes based on the user's screen. A phone doesn't need a 2000px wide image. Use srcset to serve 400px images on phones, 800px on tablets, and full size on desktop. Both Shopify and WooCommerce handle this automatically in most themes, but custom code or older themes may not.

Always set explicit width and height on your `<img>` tags. Without them, the browser doesn't know how much space to reserve, so content jumps around as images load — causing layout shift (CLS). Modern CSS with `aspect-ratio` can help too, but the simplest fix is including width and height attributes in your HTML. RankRipper checks for this automatically.