Image Optimization Strategies for Core Web Vitals: WebP, SVG, and Compression Techniques

According to HTTP Archive data, images constitute over 60% of total HTTP bandwidth requested by web browsers. Unoptimized, uncompressed images are the single largest contributor to poor page performance, inflated Largest Contentful Paint (LCP) times, and layout instability.

Google's Core Web Vitals measure user experience across three core metrics. Largest Contentful Paint (LCP) measures the render speed of the largest visual block, typically a hero banner image, and should occur under 2.5 seconds. Cumulative Layout Shift (CLS) measures visual stability — images rendered without explicit aspect-ratio or width/height attributes trigger sudden layout jumps as they load, creating a frustrating jittery experience. Interaction to Next Paint (INP) measures responsiveness, and large network image downloads degrade browser main thread availability, making the page feel sluggish.

For e-commerce sites, a 100ms delay in LCP has been correlated with a 1.11% reduction in session-based conversion rates. For content publishers, Google uses Core Web Vitals as a direct ranking signal, meaning unoptimized images can push your pages lower in search results regardless of content quality.

Selecting the ideal image file format for each asset type drastically cuts network payload sizes without sacrificing visual quality.

WebP — Developed by Google and based on the VP8 video codec, WebP provides both lossy and lossless compression that is 25-34% smaller than equivalent-quality JPEG. It supports transparency (alpha channel) unlike JPEG, making it a universal replacement for both JPEG and PNG in most scenarios. Browser support exceeds 97% globally.

AVIF — Based on the AV1 video codec developed by the Alliance for Open Media, AVIF delivers up to 50% size reductions over JPEG with superior colour retention, particularly in high-contrast gradients and areas with fine detail. It supports HDR, wide colour gamut, and film grain synthesis. Browser support is growing rapidly but is not yet as universal as WebP.

SVG (Scalable Vector Graphics) — XML-based vector graphics ideal for logos, icons, illustrations, and diagrams. SVGs scale infinitely to any screen resolution without raster pixellation, and their text-based format means they can be inlined in HTML, styled with CSS, and animated with JavaScript. A well-optimized SVG icon may be under 500 bytes compared to a 15KB PNG equivalent.

PNG — Best reserved for screenshots, technical diagrams, or images requiring pixel-perfect transparency with no lossy artefacts. PNG files are typically 5-10x larger than WebP equivalents for photographic content.

JPEG — Still viable for photographic content where legacy browser support is required, but should be considered a fallback behind WebP and AVIF in modern picture element source sets.

SVGs exported from design software like Figma, Adobe Illustrator, or Sketch often contain substantial bloat: unnecessary metadata, editor comments, hidden layers, redundant path coordinates with excessive decimal precision, embedded fonts, and unused gradient definitions. A typical Figma export may be 4-10x larger than necessary.

SVG optimization removes this bloat while preserving perfect visual rendering. Key optimisation techniques include removing editor metadata and comments, collapsing redundant group elements, converting shapes to more efficient path representations, reducing coordinate decimal precision (typically 1-2 decimal places is sufficient for web display), removing unused definitions and hidden elements, and minifying XML whitespace.

For icon systems, inline SVGs (embedded directly in HTML) eliminate HTTP requests entirely and allow CSS styling of individual paths. Combined with aggressive optimisation, a complete icon set of 50 icons may add less than 15KB to your page weight — compared to loading a 200KB icon font or making 50 individual image requests.

Serving a single high-resolution image to all devices wastes bandwidth on mobile connections and slows rendering. Responsive image loading serves appropriately sized images based on the user's viewport width and device pixel ratio.

The HTML srcset attribute combined with the sizes attribute allows browsers to intelligently select the optimal image resolution. For example, serving a 400px wide image to mobile users instead of a 2000px desktop image can reduce payload by 90% for that asset.

Lazy loading defers the download of below-the-fold images until the user scrolls near them. Native browser lazy loading via the loading="lazy" attribute requires no JavaScript and is supported by all modern browsers. This dramatically reduces initial page load time by downloading only the images visible in the viewport.

However, the hero image (your LCP element) should never be lazy loaded. Apply loading="eager" and fetchpriority="high" to your above-the-fold hero image to signal the browser to download it with maximum priority. Preloading the hero image via a <link rel="preload"> tag in the document head further reduces LCP by starting the download before the browser discovers the image in the HTML.