SuiteCommerce Image Optimization: A Practical Guide

Optimize the image the browser actually downloads, not just the original in the File Cabinet. Start with a product page on a narrow phone-sized viewport and inspect the Network panel. Note the file URL, format, intrinsic dimensions, displayed dimensions, transfer size, and loading priority.

Match pixels to the layout

A thumbnail should not download a full-size product image. Generate a small set of image widths and let the browser choose with srcset and sizes:

<img
  src="/images/item-800.webp"
  srcset="/images/item-400.webp 400w,
          /images/item-800.webp 800w,
          /images/item-1200.webp 1200w"
  sizes="(max-width: 640px) 100vw, 50vw"
  width="800"
  height="800"
  alt="Blue ceramic bowl, front view">

The values must match files your site can really serve and the space the image occupies. MDN's responsive image guide explains how the browser selects a candidate.

Always include intrinsic width and height, or use CSS aspect-ratio, so the browser can reserve space before the image arrives. This helps prevent layout shifts.

Choose formats through testing

WebP and AVIF can reduce transfer size, but the best result depends on the image and encoder settings. Keep the source asset, compare visual quality at the rendered size, and verify browser and delivery support. A <picture> element can provide alternate formats when needed.

Do not claim a fixed percentage saving. A flat logo, transparent product cutout, and detailed photograph compress differently.

Load the first image first

Do not lazy-load the likely Largest Contentful Paint image. Keep it discoverable in the initial HTML and consider fetchpriority="high" only for the main candidate. Too many high-priority resources compete with each other.

Use native loading="lazy" for images well below the fold. The browser already handles scheduling; a custom Intersection Observer is only worthwhile when you have a measured need that native loading does not meet.

Be careful with URL rewriting and proxies

A CDN or image service can resize and convert assets, but it changes the delivery path. Confirm:

• authorized origin access;
• cache keys include every transformation;
• signed URLs cannot request unbounded work;
• invalid variants have a safe fallback;
• purge and replacement behavior is understood;
• generated URLs remain stable enough for the storefront and search engines.

Do not build a SuiteScript endpoint that downloads and transforms every image request. That puts CPU work and governance on a request path better handled by an image service or an offline asset process.

Preserve product meaning

Use useful alt text for informative images and empty alt text for decorative images. Do not stuff keywords. Keep image URLs crawlable if the image should appear in search, and include the image in the rendered product content.

Google's image SEO guidance covers crawlability, context, quality, and responsive images.

Measure the result

Check both lab and field data:

• Was a smaller resource selected at each viewport?
• Did the main image start earlier?
• Did LCP improve at the 75th percentile?
• Did CLS remain stable?
• Did image errors or visual defects rise?

Google's Core Web Vitals defines LCP and CLS and explains field measurement. Test home, category, and product templates separately. They often use different image components.

A good first change is simple: resize an oversized product hero, add dimensions, keep it out of lazy loading, and verify the result on a real phone.