How to optimize images and fonts
Next.js comes with automatic image and font optimizations for better performance and user experience. This page will guide you through how to start using them.
Handling static assets
You can store static files, like images and fonts, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).
Optmizing images
The Next.js <Image> component extends the HTML <img> element to provide:
- Size optimization: Automatically serving correctly sized images for each device, using modern image formats like WebP and AVIF.
- Visual stability: Preventing layout shift automatically when images are loading.
- Faster page loads: Only loading images when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
- Asset flexibility: Resizing images on-demand, even images stored on remote servers.
To start using <Image>, import it from next/image and render it within your component.
import Image from 'next/image'
export default function Page() {
return <Image src="" alt="" />
}The src property can be a local or remote image.
Local images
To use a local image, import your .jpg, .png, or .webp image files from your public folder.
import Image from 'next/image'
import profilePic from './me.png'
export default function Page() {
return (
<Image
src={profilePic}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
)
}Next.js will automatically determine the intrinsic width and height of your image based on the imported file. These values are used to determine the image ratio and prevent Cumulative Layout Shift while your image is loading.
Remote images
To use a remote image, you can provide a URL string for the src property.
import Image from 'next/image'
export default function Page() {
return (
<Image
src="https://s3.amazonaws.com/my-bucket/profile.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}Since Next.js does not have access to remote files during the build process, you'll need to provide the width, height and optional blurDataURL props manually. The width and height attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. But width and height do not determine the rendered size of the image file.
Then, to safely allow images from remote servers, you need to define a list of supported URL patterns in next.config.js. Be as specific as possible to prevent malicious usage. For example, the following configuration will only allow images from a specific AWS S3 bucket:
import { NextConfig } from 'next'
const config: NextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
port: '',
pathname: '/my-bucket/**',
search: '',
},
],
},
}
export default configLearn more about Image Optimization in the API Reference.
Optimizing fonts
The next/font module automatically optimizes your fonts and removes external network requests for improved privacy and performance.
It includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with no layout shift.
To start using next/font, import it from next/font/local or next/font/google (depending on whether you're using a Google or local font), call it as a function with the appropriate options, and set the className of the element you want to apply the font to.
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}Google fonts
You can automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment. No requests are sent to Google by the browser.
To start using a Google Font, import it from next/font/google as a function.
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
)
}We recommend using variable fonts for the best performance and flexibility. But if you can't use a variable font, you will need to specify a weight:
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}Local fonts
To use a local font, import next/font/local and specify the src of your local font file in the public folder.
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}If you want to use multiple files for a single font family, src can be an array:
const roboto = localFont({
src: [
{
path: './Roboto-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Roboto-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Roboto-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Roboto-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
],
})Learn more about Font Optimization in the API Reference.
Next Steps
Was this helpful?