Image & Font Optimisation in React
Use next/image or lazy-loaded with correct dimensions, formats (AVIF/WebP), and font-display.
Image & Font Optimisation in React is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Images Are Critical
Images are typically the largest resources on a page. Unoptimized images cause poor LCP, slow page loads, and high bandwidth costs — especially on mobile.
Next.js Image Component
next/image automatically optimizes images: lazy loading by default, responsive srcSet, modern formats (WebP/AVIF), and correct dimensions to prevent CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>Lazy Loading in Plain React
Add loading='lazy' to native <img> elements. The browser defers loading off-screen images until they scroll near the viewport.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />Modern Image Formats
Serve WebP or AVIF instead of JPEG/PNG. AVIF is 50% smaller than JPEG at the same quality. Use a <picture> element for format negotiation with fallbacks.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>Responsive Images with srcSet
Provide multiple sizes so the browser picks the appropriate resolution for the screen, avoiding downloading a 2000px image for a 400px mobile screen.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>Blurhash / Skeleton Placeholders
Show a blurred placeholder while the image loads to prevent layout shift and improve perceived performance.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>Font Loading Strategy
Fonts block rendering. Use font-display: swap to show a fallback font while the custom font loads, reducing FOIT (Flash of Invisible Text).
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}Next.js Font Optimization
next/font loads Google Fonts at build time, self-hosts them, and applies font-display: optional to eliminate CLS from font swaps.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}Subsetting Fonts
Load only the character subsets you need. A full Unicode font can be 1MB+; a Latin subset is typically 30–80KB.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Preloading Critical Fonts
Preload fonts used above the fold so they load in parallel with HTML parsing, reducing render-blocking time.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN and Caching
Serve images and fonts from a CDN with long cache TTLs (Cache-Control: max-age=31536000, immutable). Content-hash filenames ensure fresh files bypass the cache.
Quick Check
What does font-display: swap do for web fonts?
Recap
Use next/image for automatic optimization, or native loading='lazy' + srcSet for plain React. Serve AVIF/WebP with <picture> fallbacks. Apply font-display: swap for web fonts, use next/font to self-host Google Fonts, and preload critical resources above the fold.
Frequently asked questions
Is the “Image & Font Optimisation in React” lesson free?
Yes — the full text of “Image & Font Optimisation in React” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Image & Font Optimisation in React”?
Use next/image or lazy-loaded with correct dimensions, formats (AVIF/WebP), and font-display. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Image & Font Optimisation in React” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Measuring Core Web Vitals in React Apps
- Bundle Analysis & Code Splitting Strategy
- Image & Font Optimisation in React
- Reducing INP: Event Handler Optimisation