Image Optimization for Shopify, WordPress, and Next.js (2026)

Every platform is different

Shopify, WordPress, and Next.js each handle images differently. Some do most of the work for you; others give you full control but require manual setup. This guide covers what each platform does out of the box, what gaps remain, and how to fill them.

Shopify

What Shopify does automatically

Shopify's CDN handles a lot:

• Converts images to WebP when the browser supports it
• Generates multiple sizes for responsive delivery
• Serves from a global CDN (Shopify's own)
• Lazy loads images using native browser lazy loading

For a basic Shopify store, this is often enough. Your images are optimized and served efficiently without touching any code.

What Shopify doesn't do

It doesn't compress before storing. When you upload a 5MB product photo, Shopify stores the original. It creates optimized versions on the fly, but the conversion quality settings are fixed — you can't adjust compression levels.

Theme images aren't always optimized. Your theme's hero banners, promo images, and decorative graphics are served as-is. If you upload an uncompressed PNG hero image, that's what gets served.

What you should do

Optimize images before uploading. Compress and resize your product photos and theme images before uploading to Shopify. Target: WebP or JPEG at quality 80, sized to the maximum display dimension (usually 2048px for product images).

{%- comment -%} Use Shopify's image_tag for responsive images {%- endcomment -%}
{{ product.featured_image | image_url: width: 800 | image_tag:
  loading: 'lazy',
  widths: '200,400,600,800'
}}

WordPress

What WordPress does automatically

Very little, compared to Shopify:

• Generates multiple thumbnail sizes (150, 300, 768, 1024px)
• Lazy loads images since WordPress 5.5
• Basic responsive srcset attributes on <img> tags

What WordPress doesn't do

No format conversion. WordPress serves images in whatever format you upload. Upload JPEG, get JPEG. It won't convert to WebP automatically.

No meaningful compression. WordPress applies minimal compression when generating thumbnails, but the quality settings are loose. Most images are larger than they need to be.

Recommended plugins

You need a plugin for serious image optimization on WordPress:

ShortPixel is the strongest choice for most WordPress sites. It offers lossy, glossy, and lossless modes, automatically converts to WebP/AVIF, and processes existing images in bulk.

What you should do

1. Install ShortPixel (or Imagify)
2. Run bulk optimization on existing media
3. Enable automatic WebP conversion
4. Add explicit width and height to your theme's image templates
5. Pre-optimize images before uploading — don't rely solely on plugin compression

Next.js

What Next.js does automatically

Next.js has the best built-in image optimization of the three:

• Automatic format conversion to WebP or AVIF (based on browser Accept header)
• On-demand resizing and optimization
• Lazy loading by default
• Blur-up placeholders
• Automatic srcset generation

For detailed information about the Next.js Image component, see the official Next.js documentation.

All of this happens through the next/image component:

import Image from "next/image";

<Image
  src="/product.jpg"
  alt="Product photo"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 800px"
/>

What Next.js doesn't do

The optimization happens at request time (or build time), not at upload time. The first request for each image/size/format combination is slower because the server has to generate it. Subsequent requests are cached.

You need to use the <Image> component. Regular <img> tags bypass all optimization. If you're using dangerouslySetInnerHTML or rendering markdown, images inside won't be optimized.

What you should do

// For above-the-fold LCP image — load immediately with high priority
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  sizes="100vw"
/>

// For below-the-fold images — default lazy loading is fine
<Image
  src="/feature.jpg"
  alt="Feature"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Configure your optimization settings in next.config.js:

// next.config.js
module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    minimumCacheTTL: 60 * 60 * 24 * 365, // 1 year
  },
};

The universal rule: optimize before upload

Regardless of platform, one practice applies everywhere: compress and resize images before uploading. No platform's automatic optimization is as effective as starting with an already-optimized source.

A 6000×4000 DSLR photo at 12MB is wasteful even if your platform resizes it. You're paying for storage, slowing down your admin panel, and relying on server-side processing that adds latency.

The workflow: resize to your maximum display dimension, convert to WebP at quality 80, then upload. Your platform's optimization layer works on top of an already-efficient file.

Pre-optimize for any platform

Compress, resize, and convert images before uploading to Shopify, WordPress, or anywhere. Free, in your browser.

Get Started