WordPress image formats across the page and the Core Web Vitals

Sites with SVG images page image format mix have a good LCP most often: 75%, against 76% of all WordPress sites. Sites with other image formats image formats have it least often, at 72%.

PNG images is the most used: 86.7% of WordPress sites. SVG images is 63.8% of WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between SVG images and other image formats sits in time to first byte (TTFB): 1005 ms median for SVG images against 1060 ms for other image formats. Overall median field LCP is 1.8s for SVG images (TTFB 1005 ms, load delay 300 ms, load duration 128 ms, render delay 223 ms) versus 1.9s for other image formats.

Vue sets the page image format mix to SVG images on 90% of its sites, and 75% of Vue sites have a good LCP, against 76% of all sites. jQuery sets the page image format mix to PNG images on 87% of its sites, and 75% of jQuery sites have a good LCP.

FrameworkPage image format mix on its sitesGood LCP

WordPress sites with page image format mix 63,231 sitesPNG images 87%JPEG images 86%SVG vector graphics 64%WebP images 39%GIF images / beacons 34%Other image formats 19%76%

Alpine 380 sitesSVG vector graphics 87%PNG images 82%JPEG images 81%WebP images 57%GIF images / beacons 38%Other image formats 34%82%

jQuery 60,268 sitesPNG images 87%JPEG images 86%SVG vector graphics 64%WebP images 39%GIF images / beacons 34%Other image formats 20%75%

Vue 4,842 sitesSVG vector graphics 90%PNG images 88%JPEG images 85%WebP images 45%GIF images / beacons 27%Other image formats 14%75%

React 2,233 sitesJPEG images 87%PNG images 86%SVG vector graphics 73%WebP images 49%GIF images / beacons 39%Other image formats 25%66%

PNG images JPEG images SVG vector graphics WebP images GIF images / beacons Other image formats AVIF images

Does the framework explain the page image format mix difference?

On jQuery, 75% of sites with SVG images page image format mix have a good LCP, against 74% of jQuery sites with PNG images. Within jQuery, sites with SVG images and PNG images have a good LCP about equally often. On Vue, 75% of sites with SVG images page image format mix have a good LCP, against 74% of Vue sites with PNG images. Within Vue, sites with SVG images and PNG images have a good LCP about equally often.

How AVIF and WebP across the page cut transfer weight and free bandwidth for LCP

Even when the LCP element itself is optimized, legacy PNG and JPEG assets elsewhere in the viewport compete for bandwidth on the same connection. Across 1,775 sites (2.8%) serving AVIF images, 73% pass field LCP (1.8s median). WebP is present on 39.0% of sites (74% good LCP), whereas legacy PNG (86.7%, 75% good LCP) and JPEG (85.8%, 75% good LCP) remain on four out of five pages.