Skip to main content

Image optimization

We recommend using @wethegit/masher, it was designed with corgi in mind.

  1. Install

npm install --save-dev @wethegit/masher

  1. Add the cache file to your .gitignore:

echo "mash.cache.json" >> .gitignore

  1. Update your package.json scripts with helpful commands:
{
  "scripts": {
    "build": "npm run mash-build && next build",
    "mash-build": "@wethegit/masher",
    "mash-build-all": "@wethegit/masher --force --clean",
    "mash-watch": "@wethegit/masher --watch",
    "preflight": "npm run mash-build-all && next build",
    "start": "npm run mash-watch & next dev -p 8080",
  }
}

For more information on the masher, check out the docs.

Image formats​

The masher's image compression is intended for .jpg and .png files.

If you need static .svg, .mp4, or assets of other formats, add them to the default Next.js /public/ directory. Just remember not to tamper with the generated /public/_images/ directory within. More on this in the other static assets section.

Image usage​

corgi provides a component for using the generated and optimized images. Check out the <Picture> component docs for more information.