How do SVG and image format choices affect performance?

Short answer: Pick the format by content type: SVG for logos and icons, AVIF or WebP for photos. The wrong format ships unnecessary bytes and delays LCP; images placed without dimensions add CLS on top.

Practical rules

• SVG is vector-based and stays sharp at every resolution; minify with SVGO and inline critical icons. Very complex artwork can make SVG larger than raster, so measure before deciding.
• Serve photos as AVIF and WebP through the picture element, with a JPEG fallback for older browsers.
• When you need transparency, try WebP before PNG.
• Set width and height on every img tag; unsized images are the most common CLS source.
• Prioritize the LCP image with fetchpriority, lazy-load below the fold, and send device-appropriate sizes via srcset.

Manage the impact by measurement, not instinct: start with Lighthouse image audits and validate against the LCP and CLS distributions in CrUX field data. Google's thresholds are public: LCP under 2.5 seconds and CLS under 0.1 count as good.