Prepare fit-for-purpose assets
Use a source with enough resolution for the largest intended display, then create appropriately sized variants. Avoid sending a desktop hero image to a narrow mobile layout when a smaller crop or source can work.
Choose formats based on content and audience. JPEG and WebP are common photo choices; PNG and lossless options suit crisp graphics. Verify the result in the interface where it will appear, including transparency and crop behavior.
Connect images to page performance
The first large image in the visible viewport can affect perceived loading and metrics such as Largest Contentful Paint. Give important images dimensions to reduce layout shifts, prioritize only the actual hero image, and lazy-load suitable offscreen images.
Image compression for the web is one part of a broader workflow. An online image optimizer can prepare a one-off file, while a site also needs responsive image sizes, correct HTML, caching and a suitable loading strategy. Measure real pages with field data and performance tools after deploying changes.
Frequently asked questions
Should every image be WebP?
No. Choose based on visual content, compatibility, transparency needs and measured output size.