Quick Answer
Use Odoo's automatic image resizing fields (image_256, image_512, image_128) instead of full-size image_1920 to reduce page load by 99%. The problem: D2C shoots beautiful 4K product photos, uploads directly to Odoo, product page looks stunning... eventually. User on 4G stares at white screen for 8 seconds downloading 5MB image to fit 300px box. Amazon found 100ms latency = 1% sales loss. 8-second delay = guaranteed bounce. Odoo solution: Since Odoo 13, product.template auto-generates resized versions: image_1920 (original, max 1920px, zoom view), image_1024 (large, detail page), image_512 (medium, featured blocks), image_256 (small, shop grid), image_128 (thumbnail, cart/checkout). Common mistake: QWeb template requests full image = <img t-att-src="image_data_uri(product.image_1920)"/> in grid view = loads massive 5MB file. Fix: Request specific size = <img t-att-src="image_data_uri(product.image_256)"/> = 5MB → 20KB = 99% reduction. WebP (30% smaller): JPEG/PNG old tech, WebP 30% smaller same quality. Odoo 15+ native support if libwebpmux installed. Install: sudo apt-get install -y webp libwebp-dev, restart Odoo, future uploads auto-generate WebP. Verify: right-click image → Open in New Tab, check Content-Type: image/webp. Lazy loading: Homepage with 50 products = browser downloads 50 images at once. loading="lazy" = only download when user scrolls to see it. Add manually to custom QWeb: loading="lazy". Critical: DON'T lazy load above-fold image (hero/top product) = delays LCP = hurts SEO. Bulk optimization: 10,000 existing unoptimized images. Option A: Python script with Pillow (iterate products, decode image_1920, save as JPEG quality=85 optimize=True). Option B: Cloudflare Polish CDN (auto-compress, serve WebP at edge, Odoo doesn't process). Impact: Properly sized images + WebP + lazy loading = faster PageSpeed scores = higher Google ranking = more sales.
The Image Performance Problem
Your D2C brand just shot beautiful 4K product photos. You upload them directly to Odoo. The product page looks stunning... eventually.
| Issue | Impact |
|---|---|
| The Problem | User on 4G mobile stares at white screen for 8 seconds downloading 5MB image for 300px box |
| The Data | Amazon: 100ms latency = 1% sales loss. 8-second delay = guaranteed bounce |
| The Solution | Odoo has image processing capabilities: resize, compress, serve WebP |
We've implemented 150+ Odoo systems. The fastest e-commerce sites we manage treat images as data that needs optimization, not just files to be stored. This guide covers Odoo's automatic resizing fields, how to force WebP usage, and how to bulk-optimize your existing catalog.
Understanding Odoo's Image Fields
Since Odoo 13, the product.template model does not just store one image. It automatically generates resized versions when you upload the "Original."
| Field Name | Size | Best Use Case |
|---|---|---|
image_1920 | Max 1920px | Zoom view |
image_1024 | Large (1024px) | Main product image on detail page |
image_512 | Medium (512px) | "Featured Product" blocks |
image_256 | Small (256px) | Shop Grid view |
image_128 | Thumbnail (128px) | Cart lines and Checkout |
The Common Mistake
In your QWeb template, you request the full image:
<!-- WRONG: Loads the massive original image -->
<img t-att-src="image_data_uri(product.image_1920)"/>The Fix
Request the specific size you need:
<!-- RIGHT: Loads the optimized 256px version -->
<img t-att-src="image_data_uri(product.image_256)"/>5MB → 20KB
That's a 99% reduction in file size. Load time drops instantly.
Serving WebP (Next-Gen Formats)
JPEG and PNG are old tech. WebP images are 30% smaller with the same quality.
Odoo 15+ Native Support
Modern Odoo versions automatically attempt to serve WebP if the browser supports it and if the system library (libwebpmux) is installed on the server.
How to Verify
1. Go to your website
2. Right-click an image → "Open Image in New Tab"
3. Check the URL or the "Network" tab in Inspector
4. Does the Content-Type header say image/webp?
If NOT Serving WebP
You likely need to install the libraries on your Ubuntu server:
sudo apt-get install -y webp libwebp-devThen restart Odoo. Future image uploads will generate WebP variants.
Lazy Loading (The "Defer" Strategy)
Even optimized images take time to load. If your homepage has 50 products, the browser tries to download 50 images at once.
Lazy Loading tells the browser: "Only download this image when the user scrolls down to see it."
Implementation (Odoo 14+)
Odoo's website builder uses the loading="lazy" attribute by default on standard snippets. However, for custom QWeb views, you must add it manually.
<img t-att-src="image_data_uri(product.image_512)"
class="img img-fluid"
loading="lazy"
alt="Product Name"/>⚠️ Critical Note:
Do NOT lazy load the "Above the Fold" image (the main hero banner or the top product image). Lazy loading them delays the Largest Contentful Paint (LCP), hurting your SEO scores. Only lazy load images that are off-screen initially.
Bulk Optimization (Fixing the Past)
You already have 10,000 unoptimized images in your database. Re-uploading them manually is impossible.
Option A: Odoo Automation Script (Python)
You can write a script to iterate through products and re-trigger the optimization tools (Pillow).
from PIL import Image
import io
import base64
def optimize_all_images(self):
products = self.env['product.template'].search([])
for p in products:
if not p.image_1920:
continue
# Decode
image_stream = io.BytesIO(base64.b64decode(p.image_1920))
img = Image.open(image_stream)
# Save as optimized JPEG
buffer = io.BytesIO()
img.save(buffer, format="JPEG", quality=85, optimize=True)
# Write back
p.image_1920 = base64.b64encode(buffer.getvalue())
self.env.cr.commit() # Commit periodicallyOption B: External CDN (The Pro Move)
Instead of relying on Odoo to process images, use a CDN like Cloudflare or Gumlet.
1. Point your domain through Cloudflare
2. Enable "Polish" (Image Optimization) in Cloudflare settings
3. Cloudflare automatically compresses images and serves WebP to supported browsers at the edge
4. Odoo doesn't have to lift a finger
Your Action Items
Code Audit
❏ Search your codebase for image_1920 or image_1024
❏ Are you using image_1920 in the shop grid view? Change it to image_256
❏ Are you using image_1024 in the cart view? Change it to image_128
Server Check
❏ Check if libwebp is installed on your server
❏ Upload a new test image and verify if it converts to WebP
Frontend Check
❏ Run Google PageSpeed Insights on your product page
❏ Look at the "Properly size images" opportunity - it will tell you exactly which images are too big
Performance Comparison
| Scenario | File Size | Load Time (4G) | Result |
|---|---|---|---|
| Unoptimized (image_1920 JPEG) | 5MB | 8 seconds | Guaranteed bounce |
| Resized (image_256 JPEG) | 20KB | 0.3 seconds | Much better |
| Optimized (image_256 WebP + Lazy) | 14KB | 0.2 seconds | Perfect performance |
Frequently Asked Questions
Which Odoo image field should I use for product grid views?
Use image_256 for shop grid views to reduce file size by 99% compared to image_1920. Odoo 13+ auto-generates multiple resized versions when you upload the original. For shop grid (typically 200-300px wide thumbnails), use image_256 in your QWeb template: <img t-att-src="image_data_uri(product.image_256)"/>. This loads a 20KB file instead of a 5MB original. Similarly, use image_128 for cart lines, image_512 for featured product blocks, image_1024 for product detail pages, and image_1920 only for zoom views. The correct field selection = 99% file size reduction = instant load times = lower bounce rates.
How do I enable WebP images in Odoo?
Install libwebp and libwebp-dev libraries on your server, then restart Odoo to enable automatic WebP generation. Odoo 15+ has native WebP support but requires the libwebpmux system library. On Ubuntu: sudo apt-get install -y webp libwebp-dev, then restart Odoo service. After restart, new image uploads will automatically generate WebP variants alongside JPEG/PNG. Odoo serves WebP to browsers that support it (Chrome, Firefox, Edge, Safari 14+) and falls back to JPEG for older browsers. To verify: right-click any product image → Open Image in New Tab, check if Content-Type header shows image/webp in browser DevTools Network tab. WebP provides 30% smaller file sizes than JPEG at the same visual quality = faster page loads = better PageSpeed scores.
Should I use lazy loading on all product images?
Use loading="lazy" on off-screen images only, NOT on above-the-fold images to avoid hurting LCP and SEO. Lazy loading defers image downloads until the user scrolls to see them, reducing initial page load. For custom QWeb templates, add loading="lazy" attribute manually: <img t-att-src="..." loading="lazy" alt="..."/>. Critical rule: DON'T lazy load hero banners, main product images, or any image visible without scrolling (above the fold). Lazy loading above-fold images delays Largest Contentful Paint (LCP), a Core Web Vital that Google uses for ranking. Only lazy load product grid images below the fold, carousel images, or footer content. Odoo 14+ website builder snippets include loading="lazy" by default, but custom QWeb views need manual implementation. Proper lazy loading = 50 product grid + only loads 6 visible images initially = 88% fewer HTTP requests = faster Time to Interactive.
How can I bulk optimize 10,000 existing product images in Odoo?
Use a Python script with Pillow library to iterate products and re-compress images, or use Cloudflare Polish CDN for automatic optimization. Option A (Python script): from PIL import Image, base64-decode existing image_1920, open with Image.open(), save with img.save(buffer, format="JPEG", quality=85, optimize=True), write back to image_1920 field, commit periodically to avoid memory issues. Run during off-hours as it's CPU-intensive. Option B (Cloudflare CDN): Point domain through Cloudflare, enable Polish feature in dashboard, Cloudflare automatically compresses images and serves WebP at edge servers, zero Odoo processing required. CDN approach is better for high-traffic sites (1000+ daily visitors) as it offloads image optimization and delivery. For smaller catalogs (<1000 products), Python script is simpler and free. Both approaches maintain image quality while reducing file sizes 50-70%.
What is the impact of image optimization on PageSpeed scores?
Proper image optimization (sized correctly + WebP + lazy loading) typically improves PageSpeed scores by 20-40 points and Core Web Vitals. Google PageSpeed Insights measures three image-related opportunities: "Properly size images" (using image_256 vs image_1920), "Serve images in next-gen formats" (WebP vs JPEG), "Defer offscreen images" (lazy loading). Unoptimized images cause: slow Largest Contentful Paint (LCP >4s = poor), high Total Blocking Time, large page weight. Optimized images improve: LCP to <2.5s (good), First Input Delay <100ms, Cumulative Layout Shift <0.1. Real impact: eCommerce site with 50 product grid, before optimization = 45 PageSpeed score, 8.2s LCP, 12MB page weight. After optimization (image_256 + WebP + lazy) = 87 PageSpeed score, 1.8s LCP, 800KB page weight. Better scores = higher Google ranking = more organic traffic = increased revenue.
Should I use a CDN for Odoo e-commerce images?
Use a CDN if you have global traffic, high concurrent users (500+), or want to offload image processing from Odoo server. CDN benefits: serves images from geographically closest edge server (Sydney user gets image from Sydney, not US server = 200ms vs 800ms), automatic WebP conversion and compression (Cloudflare Polish, Gumlet), reduces Odoo server load (image requests don't hit your server), handles traffic spikes (Black Friday sale = 10,000 concurrent users). Setup: point domain through Cloudflare (free tier works), enable Polish feature, or use specialized image CDN like Gumlet ($49/mo) with automatic responsive images and format conversion. When NOT to use CDN: low traffic (<100 daily visitors), single-region customers (all US customers + US server = no benefit), tight budget (optimize Odoo images directly first). CDN is the "pro move" for $1M+ revenue brands with international customers or high traffic.
Free PageSpeed Audit
Images are the heaviest part of your website. We'll scan your site for oversized images, identify missing lazy loading attributes, check your server's WebP configuration, and recommend a CDN strategy if you have high global traffic. A faster site ranks higher on Google and sells more product.