Image optimisation with SSG
#App Router, with output: export. How to use Image tag and optimise images with SSG
stone holly
civic sapphireBOT
Hi @stone holly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Image optimization with Static Site Generation (SSG) in Next.js can be achieved using the next/image component. This component extends the HTML <img> element with features for automatic image optimization, including size optimization, visual stability, faster page loads, and asset flexibility.
When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast while improving your page load performance and Core Web Vitals. This is done with zero-configuration when using next/image.
For static exports, you can use next/image by defining a custom image loader in next.config.js. For example, you can optimize images with a service like Cloudinary:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
images: {
loader: 'custom',
loaderFile: './my-loader.ts',
},
}
module.exports = nextConfig
This custom loader will define how to fetch images from a remote source. For example, the following loader will construct the URL for Cloudinary:
export default function cloudinaryLoader({
src,
width,
quality,
}: {
src: string
width: number
quality?: number
}) {
const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
return `<https://res.cloudinary.com/demo/image/upload/${params.join(>
','
)}${src}`
}
You can then use next/image in your application, defining relative paths to the image in Cloudinary:
import Image from 'next/image'
export default function Page() {
return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}
For more information, you can refer to the Next.js documentation on Image Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/images) and the Vercel documentation on Image Optimization (https://vercel.com/docs/frameworks/nextjs).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
Sorry @stone holly, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
stone holly
@civic sapphire Will that download the optimised image, so it can be pre-optimised when the app is deployed?
civic sapphireBOT
Let me check the knowledge base for you. One moment! :books:
When you deploy your Next.js application to Vercel, the images are not pre-optimized and downloaded during the build process. Instead, Vercel optimizes your images on-demand, as users request them. This approach ensures that your build times remain fast, and only the images that users actually view are processed.
The optimized images are then served from the Vercel Edge Network, which ensures fast delivery to users around the world. The src prop you provided in your code is dynamically replaced with an optimized image URL. For example, in Next.js, the format would be /_next/image?url={link/to/my/image}&w=3840&q=75.
If you're using a custom loader like the Cloudinary example, the loader function constructs the URL for fetching the optimized image from the remote source (Cloudinary in this case). The optimized image is not downloaded and stored in your application, but is served directly from the remote source.
For more details, you can refer to the Vercel documentation on Image Optimization (https://vercel.com/docs/image-optimization) and the Next.js documentation on Image Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/images).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
stone holly
@civic sapphire How would I go about to download the optimised images?
civic sapphireBOT
Let me check the knowledge base for you. One moment! :books:
The information provided in the extracts does not include specific instructions on how to download optimized images. The next/image component and Vercel's Image Optimization service are designed to serve optimized images on-demand directly to the client, not to provide a way to download and save the optimized images.
If you want to download optimized images, you might need to use a third-party image optimization service that provides this feature, such as Cloudinary or imgix. These services usually provide URLs for optimized images, which you can then download manually or using a script.