←  All terms
B
Performance

Image Optimization

Image optimization reduces file size and loading time while preserving the quality needed for the intended use.

Image optimization reduces file size and loading time while preserving the quality needed for the intended use. Optimization becomes meaningful when real-user data, repeatable lab tests, and an explicit performance budget are used together. The concept is closely related to Lazy Loading and Largest Contentful Paint.

Read more

Lazy Loading

Largest Contentful Paint

CDN

Website Performance

FAQ

Image Optimization

Should image optimization be automated or done manually?
Automation pays off with many images and several editors, because format, size, and compression stay consistent. Manual refinement remains sensible for key visuals where quality weighs more. A performance budget defines which file sizes are acceptable. Both approaches can be combined in a single workflow.
What typical mistakes happen in image optimization?
Common mistakes are oversized originals shrunk with CSS, missing responsive image sizes, and compression so strong that it creates artifacts. Missing width and height attributes cause layout shifts and hurt CLS. A simple check compares the delivered image size with the displayed size.
Which images should be excluded from lazy loading during image optimization?
Images in the initial viewport, especially the LCP element, should load immediately. Lazy loading would otherwise delay them and worsen LCP. It makes sense for images further down the page that only become relevant when scrolling. As a rule of thumb, visible on load means load immediately.
How does image optimization affect Largest Contentful Paint?
When the largest visible element is an image, its load time directly determines LCP. Smaller files, fitting dimensions, and early loading of the hero image improve the value. An LCP of 2.5 seconds or less counts as good, measured at the 75th percentile of field data.
Which image format is best suited for websites?
For photos, modern formats such as WebP or AVIF are usually much smaller than JPEG at comparable quality. SVG suits logos and icons because it scales without loss. The choice depends on the motif and browser support, and a fallback may be necessary.