By Mehdi HassanWhy does image optimization for web matter so much?
Image optimization for web matters because images and video are usually the heaviest things on a marketing page, and the hero image is often the element Google uses to measure Largest Contentful Paint. Get the hero wrong and the page feels slow no matter how clean the code is.
Images affect all three Core Web Vitals. A large hero delays LCP. An image without dimensions pushes text down as it loads, which counts as layout shift. A heavy carousel or video decoding on the main thread can make taps feel slow. Most guides cover only the export settings. In our experience the bigger wins come earlier, when the designer decides what the image is, how it's cropped and whether it needs to move at all.
What should designers decide before exporting images?
Designers should decide the purpose, crop and count of every image before export, because those choices set the file weight more than any compression setting. A crisp, well-cropped product shot at the right size beats a full-bleed stock photo squeezed through an optimizer.
- Art-direct per breakpoint. A wide desktop hero rarely works cropped down to a phone. Design a separate mobile crop that keeps the subject large, and the developer can serve it with the picture element.
- Use fewer, better images. Three images that prove something (the product, the team, the result) do more than ten decorative ones.
- Prefer real UI over mockups. A product screenshot exported as a clean, flat image compresses far better than a 3D device render with shadows and reflections. Our guide to what your hero should show covers the content choice.
- Use SVG for logos, icons and simple illustrations. They stay sharp at any size and are often tiny.
- Design with fixed aspect ratios. Locking each slot to a ratio makes layout shift easy to prevent in the build.
These choices also carry the brand. Translating an identity into imagery rules (crop style, color treatment, what is never shown) is part of turning a brand identity into a website.
Which image formats should you use: WebP, AVIF, JPEG, PNG or SVG?
Use AVIF or WebP for photos and screenshots, SVG for logos and icons, and keep JPEG or PNG only as fallbacks. All current major browsers support WebP and AVIF, and most image services and frameworks can serve them automatically from one master file.
Format | Best for | Watch out for |
|---|---|---|
AVIF | Photos and gradients at small file sizes | Slower to encode; check quality on fine text |
WebP | Photos, screenshots, images with transparency | Slightly larger than AVIF in many cases |
JPEG | Fallback for photos | No transparency; larger than modern formats |
PNG | Fallback for screenshots with sharp edges or transparency | Very large for photos |
SVG | Logos, icons, simple illustrations | Complex illustrations can get heavy; strip editor metadata |
MP4 or WebM video | Animated content instead of GIF | Needs a poster and controls if it carries meaning |
Never use animated GIFs for product demos. A short muted video is far lighter and sharper. If you're choosing between video, Lottie and coded animation, see animated product demos: GIF, video, Lottie or code.
How do you implement responsive images in the build?
You implement responsive images by giving the browser several widths of each image with srcset, telling it how wide the image will display with sizes, and letting it pick. That way a phone downloads a phone-sized file and a large screen gets a sharp one.
Export one high-quality master
Upload a single large master per image to your CMS or image service. Let the platform generate the smaller widths and modern formats rather than exporting dozens of files by hand.
Set srcset and sizes
Offer a handful of widths and write a sizes attribute that matches the real layout, for example full width on mobile and half width on desktop. A wrong sizes value is the most common reason phones still download huge files.
Set width and height
Give every image its intrinsic width and height, or a CSS aspect ratio, so the browser reserves space before the file arrives.
Prioritize the hero
Load the hero image eagerly with high fetch priority, and never lazy-load it. Our guide to improving LCP explains why this single change often matters most.
Lazy-load the rest
Use native lazy loading for every image below the fold, so the browser fetches them as the visitor scrolls.
Check the result on a phone
Open DevTools, throttle to a mobile profile and confirm which file each image actually downloaded. The Network tab tells the truth that a design file can't.
How do Framer, Webflow and Next.js handle image optimization?
All three platforms optimize images for you to a degree, but each leaves different decisions to you. The platform converts and resizes; you still choose the crop, the count and which image is the hero.
Framer and Webflow both resize and convert uploaded images and serve them from a CDN, so your job is mostly upload quality, alt text, avoiding oversized backgrounds and checking that the hero isn't lazy-loaded. In Next.js, the next/image component generates srcset, modern formats and lazy loading, and you mark the hero with the priority setting. Our guide to next/image, fonts and scripts covers the details, and the platform-specific Core Web Vitals fixes cover what each builder lets you change.
How do you optimize background and hero video?
You optimize hero video by keeping it short, muted, silent-track-free and compressed, with a poster image that shows immediately. The poster is what visitors see first, so design it as carefully as a hero image.
Pros
- Shows the product moving, which a still image can't
- Short muted loops can be smaller than people expect when compressed well
- A good poster means the first paint is just an image
Cons
- Adds weight on mobile data, where many visitors are
- Autoplaying motion can be a problem for visitors sensitive to it
- Often hides the headline behind busy footage
- Third-party video players add heavy scripts
Our rules for hero video: strip the audio track, keep the loop short, serve MP4 and WebM, set a poster, and show only the poster to visitors who prefer reduced motion (a WCAG-friendly default covered in our guide to website accessibility compliance). For a demo with sound, use a poster with a play button and load the player on click.
Hypothetical example: fixing a SaaS hero
For example, suppose a SaaS homepage uses a full-bleed 3D render of a laptop as its hero, exported as a large PNG, with lazy loading applied by the template. On a phone the image is cropped so tightly the product UI isn't visible.
The design fix is a flat product screenshot with a separate mobile crop that keeps the key panel readable. The build fix is a picture element serving AVIF and WebP at several widths, explicit dimensions, eager loading and high priority. Same message, a lighter page, and a hero that actually shows the product on mobile.
What else should an image checklist include?
A complete image checklist also covers alt text, caching and the images nobody remembers, such as social cards and CMS uploads. These don't always affect speed, but they affect accessibility, sharing and how the site ages.
- Alt text that describes the content and purpose, and empty alt for purely decorative images.
- Long cache lifetimes for images, with new file names when an image changes.
- CMS upload rules so editors can't publish oversized originals as inline images.
- Open Graph images sized for social cards, so links look right when shared.
- No text baked into images where real text would work: it can't be read by search engines or translated.
