Images, video and fonts
The heaviest files on most pages. How to pick formats, size images, and load video and fonts without slowing the first view.
Images, video and fonts are usually the largest files on a page, and the image at the top is very often the Largest Contentful Paint. Getting these right is the fastest way to a faster page on most sites. The guides in this topic go from the biggest wins (the right size and format for each image) to the details (how to tell the browser which image matters most, and how to stop fonts from shifting the layout).
For images, work in this order. Image optimization for speed gives the whole plan. Then choose the format, send the right size, set width and height and lazy-load only what is below the first screen. The image attributes cheat sheet puts it on one page, and image SEO and speed covers search.
For other media, read about video, animated GIFs and SVG.
For fonts, start with web fonts and speed, then fixing font layout shift. To see what real sites do, read web fonts in 2025.
Guides in this topic 12 guides
- Image optimization for speed: size, format, loading
Images are usually the heaviest part of a page. How to size them, pick WebP or AVIF, lazy-load below the fold and load the main image first.
- Web fonts and speed: how to load them faster
How web fonts slow a page down and how to fix it: fewer files, WOFF2, subsetting, the right font-display value, early loading and matched fallbacks.
- Lazy loading: when it helps and when it hurts
Lazy loading delays images and embeds until they are needed. How to use native lazy loading safely, what never to lazy-load, and the mistakes to avoid.
- Set image width and height to stop layout shift
Why every image needs width and height attributes, how browsers turn them into reserved space, and how to fix images without them in a CMS or a builder.
- Responsive images: srcset, sizes and picture explained
How srcset, sizes and the picture element let each device download the right image, how to write sizes correctly, and the mistakes that waste bytes.
- WebP vs AVIF vs JPEG vs PNG: which image format to use
What each image format is good for, how much smaller WebP and AVIF are, which browsers support them, and how to serve them with a safe fallback.
- Fix layout shift caused by web fonts
Text that jumps when a web font loads. How to confirm fonts are the cause, work out fallback font overrides, and choose font-display so the swap moves nothing.
- Replace animated GIFs with video
Why animated GIFs are so large, how Lighthouse flags them, how to turn one into MP4 and WebM with FFmpeg, and the video markup that acts like a GIF.
- Video on your website without slowing it down
How to add video without hurting speed: where to host it, how to encode it small, how to load it late with a poster or facade, and what to check.
- SVG for speed: icons, logos and illustrations
When SVG is the lightest choice, four ways to put it on a page, how to shrink files with SVGO, how to use a sprite, and the mistakes that make SVG heavy.
- Image SEO and speed: file names, alt text and sizes
How to name, describe and size images so people, screen readers and search engines can use them without slowing the page: file names, alt text and checks.
- Web fonts in 2025: what real sites do
How websites load fonts in 2025: how many use them, where they come from, which formats win, how big the files are and which font-display value is most common.
Start here
Free website audit
Live Google data for any public page: mobile and desktop.
Mobile + desktop · Lighthouse lab test · Real-user Chrome data when Google has it
Rather have this done for you? Speed optimization · Book a call