The following excerpt is taken from Optimizing WordPress for Web Core Vitals. You can read the introduction to the guide here.
Back in the good old days of the Internet, there were only two types of images, JPG (pronounced jay-peg) and GIF (which I pronounce with a “j” sound, although controversy continues to rage between the “g” and “j” camps). JPGs are great for photos, GIFs are great for animations or images that contain text. The third “legacy” option, PNG (pronounced “ping”), is like a supercharged version of a GIF with better transparency and higher quality for similar file size.
Google says you can just throw all your JPGs, GIFs and PNGs in a dusty corner next to your DVD player and 14.4 modem because there are new and improved “next-gen” image formats in town.
The first is SVG, which means Scalable Vector Graphics. An SVG is not really an image file, but a textual map of the exact vector dimensions and colors you want to display on the site. (If you’ve used Photoshop or similar tools, a GIF is raster, while an SVG is vector.) This means it loads way faster, produces a crisper image, and can be resized more easily than a PNG or GIF.
Google loves SVGs, so you should use a modern design tool (or one of the many converters you can find on the web) to turn your logo and any other PNGs or GIFs into SVG files wherever possible.
The new photo format is WebP, which is intended to provide high quality with lower file size than the JPG. It’s quite time-consuming to convert all your JPGs to WebP, but it’s a necessity to get your Core Web Vitals scores to where they need to be. We use a tool called Imagify, which is both a WordPress plugin and a web interface where you can upload JPGs and download them as WebPs.
The irony here is that you’ll spend a lot of time converting images and your site won’t look any different to the naked eye. But it will load faster and score much higher on Google’s Core Web Vitals measurements.
