How to Optimize Images for Your Website: A Practical Guide

Images are often a major part of page transfer and can also affect discovery, decoding, layout, and Largest Contentful Paint. Optimization can produce meaningful gains, but no fixed saving or ranking result applies to every page. Here is a workflow you can measure step by step.

Why Image Optimization Matters More Than Ever

The HTTP Archive page-weight report shows that images remain a material part of many pages, although current medians change over time. Largest Contentful Paint (LCP) measures when the largest eligible content element in the viewport is rendered; that element is often, but not always, an image.

Google’s published LCP thresholds classify up to 2.5 seconds as good and above 4 seconds as poor, evaluated at the 75th percentile of visits. Image work may move a page between thresholds when the LCP resource is the bottleneck, but it cannot by itself guarantee a Core Web Vitals pass or a search position.

Step 1: Pick the Right Format

Format choice can strongly affect size and capability. The comparison below is qualitative because benchmark results depend on the source, encoder, settings, and quality target:

WebP is a useful default candidate for many sites, not a universal answer. If your pipeline and audience support AVIF, test it as an earlier <source> with WebP or JPEG fallback. You can convert JPG to WebP or convert to AVIF with Vizua; the selected file is processed in the browser and is not sent to our image-processing server.

For a deeper comparison, see our WebP vs AVIF analysis and our lossy vs lossless compression explainer.

Step 2: Resize to Actual Display Dimensions

A 4000 × 3000 pixel photo displayed at 800 × 600 contains far more source pixels than that rendered slot needs. A responsive high-density display may need a larger candidate, but shipping the camera original usually adds unnecessary transfer and decode work.

The principle is to offer candidates near the rendered size and density. Use srcset and sizes so the browser can choose, and account for layout width, device pixel ratio, quality, zoom, and art direction rather than hardcoding one “Retina” multiplier.

Example starting dimensions to adapt to your layout:

• Full-width hero: start from the largest rendered slot, then generate candidates for relevant densities and breakpoints
• Blog content image: match the content column and any wider responsive state
• Thumbnail: generate a candidate near each rendered card size instead of reusing the hero
• Avatar: account for the displayed circle or square, device density, and any profile-detail view

Use Vizua’s image resizer to create appropriate candidates before compression. The saving depends on the original and target pixel count; measure the generated files.

Step 3: Compress with the Right Quality Setting

Once you have chosen a format and resized, tune its encoder. Quality scales are nonlinear and are not standardized across encoders or formats. A lower value usually trades more information for fewer bytes in a lossy encoder, but the size and visual change must be measured on the actual output.

Recommended quality settings:

• JPEG: 75–85 can be a conservative starting range for photos. Encoder scales differ, so inspect the output.
• WebP: 75–80 is a starting range, not a guaranteed equivalent to a JPEG value.
• AVIF: 60–75 may be a starting range in some tools; quality scales and encoder behavior differ.
• PNG: Try stronger lossless compression first. Palette quantization to at most 256 entries can save more, but it is a lossy color reduction and needs inspection.

Vizua’s JPEG compressor lets you adjust quality and review the output. For a detailed method, see compressing images without losing quality.

Step 4: Deliver Images Efficiently

Good compression is only half the story. How you deliver images to the browser matters just as much for performance.

Set explicit dimensions

Give each <img> an accurate intrinsic width and height, or reserve its intended slot with a deliberate layout rule. This lets the browser establish the aspect ratio early. It reduces image-related layout movement, although fonts, injected content, animations, and incorrect responsive styling can still affect Cumulative Layout Shift (CLS).

Lazy-load below-the-fold images

Consider loading="lazy" for images sufficiently outside the initial viewport. Do not use it mechanically for the likely LCP image or other content needed immediately. Browser heuristics, carousels, print, rapid scrolling, and hidden responsive layouts make testing necessary.

Prioritize your hero image

Do not lazy-load the likely LCP image. Consider fetchpriority="high" when that resource genuinely deserves early bandwidth, and ensure it is discoverable in the initial HTML. Do not assign high priority broadly; confirm the effect in a trace and in field data.

Use responsive images

The srcset and sizes attributes give the browser candidates and describe the expected slot. It then considers factors such as viewport, density, cache, and implementation behavior. Ensure sizes matches the real layout; a wrong value can make the browser choose an unnecessarily large or small candidate.

Step 5: Audit and Measure Regularly

Optimization is not a one-time task. Every new image you add is a chance for regression.

• PageSpeed Insights: Run Google's PageSpeed Insights on representative pages. Review field and lab LCP separately, then inspect current image-delivery diagnostics rather than depending on an audit label that may change.
• DevTools Network tab: Sort requests by size and inspect large images in context. Ask whether dimensions, format, compression, caching, and priority match their role instead of enforcing one universal KB limit.
• Automate: Add image optimization to your build pipeline so oversized images are caught before they go live.

Quick Checklist

• Generate and compare suitable JPEG, WebP, AVIF, PNG, or SVG variants
• Resize images to actual display dimensions — no wider than needed
• Start with conservative encoder settings, then compare bytes and visible output; do not equate quality numbers across formats
• Reserve an accurate slot for each <img>, normally with intrinsic width and height
• Consider fetchpriority="high" for the likely LCP image, then measure
• Lazy-load suitable offscreen images; test scrolling and layout behavior
• Use srcset/sizes for responsive delivery
• Set performance budgets from your page, audience, and field data
• Remove unnecessary private metadata, but preserve color profiles or other data the workflow actually needs — see our EXIF data and privacy guide
• Audit regularly with PageSpeed Insights

Frequently Asked Questions