Use progressive JPEG encoding

# Using ImageMagick
identify -verbose image.jpg | grep Interlace
# Progressive: Interlace: JPEG
# Baseline: Interlace: None
 
# Using file command
file image.jpg
# Progressive shows "progressive"

// Browser check using canvas
async function isProgressiveJPEG(url: string): Promise<boolean> {
  const response = await fetch(url)
  const buffer = await response.arrayBuffer()
  const bytes = new Uint8Array(buffer)
 
  // Check for progressive marker (0xFF 0xC2)
  for (let i = 0; i < bytes.length - 1; i++) {
    if (bytes[i] === 0xFF && bytes[i + 1] === 0xC2) {
      return true
    }
  }
  return false
}

# ImageMagick
convert input.jpg -interlace JPEG output.jpg
 
# Sharp (Node.js)
sharp('input.jpg')
  .jpeg({ progressive: true, quality: 80 })
  .toFile('output.jpg')
 
# ImageOptim CLI
imageoptim --jpeg-encoding progressive input.jpg

// sharp.config.js for build process
const sharp = require('sharp')
 
async function optimizeJpeg(inputPath, outputPath) {
  await sharp(inputPath)
    .jpeg({
      quality: 80,
      progressive: true,
      mozjpeg: true // Even better compression
    })
    .toFile(outputPath)
}

// webpack.config.js with image-minimizer-webpack-plugin
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 
module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: {
                quality: 80,
                progressive: true
              }
            }
          }
        }
      })
    ]
  }
}

// Ensure JPEG generation uses progressive encoding
function ProductImage({ src, alt }: { src: string; alt: string }) {
  // If using image CDN, request progressive format
  const progressiveSrc = src.includes('cloudinary')
    ? src.replace('/upload/', '/upload/fl_progressive/')
    : src
 
  return (
    <img
      src={progressiveSrc}
      alt={alt}
      loading="lazy"
      decoding="async"
    />
  )
}

<!-- Cloudinary -->
<img src="https://res.cloudinary.com/demo/image/upload/fl_progressive/sample.jpg">
 
<!-- Imgix -->
<img src="https://example.imgix.net/image.jpg?fm=pjpg">
 
<!-- Cloudflare -->
<!-- Progressive is typically default for JPEGs -->