Best Image Formats for Website Speed/Load Optimization

Ray Cheselka

You’d think adding an image to a website would be as simple as finding the image, uploading it, and making it the right size and placement.

But there’s much more too it. Images play a big role in how fast a website loads.

Image Formats/extensions, Compression, and sizing can all play a role.

Been wondering about this yourself? We did the research and are happy to provide key information and recommendations in this post.

Check on your website’s speed, here: Google PageSpeed Insights

Thanks for reading!

Image Formats

JPG/JPEG

Joint Photographic Experts Group
Primary Use: High-Quality Images-Photography
Compressable, but lossy. Will lose quality as you compress

PNG

Portable Network Graphics
Primary Use: High-Quality Digital Images-Website Photos
Compressable, lossless. No/negligible loss of quality

APNG

Animated Portable Network Graphics
Primary Use: Digital Images/Animated Images
Compressable, lossless. No/negligible loss of quality

GIF

Graphics Interchange Format
Primary Use: Digital Images/Animated Images-APNG created as an improvement
Compressable, lossless. No/negligible loss of quality

WEBP

Web Picture
Primary Use: Online Images-Speed/load of websites and the internet in general
Compressable, lossless. No/negligible loss of quality-smaller file sizes than all of the above

AVIF

AV1 Image File
Primary Use: Open-Image file that is more efficient than JPEG and PNG, with more features
Compressable, lossless. Arguably the best-competing with WebP

SVG

Scalable Vector Graphics
Primary Use: Icons, Charts, Graphics on websites
Compressable, lossless. No/negligible loss of quality

We recommend: There is a lot of talk out there that AVIF is what we’ll see the most of in the future. We’re getting versed in both AVIF/WEBP comparisons. The only cons at the moment are a lack of compatibility with browsers, and issues generating dynamically, but those will likely be resolved in time. If you want to keep it simple, JPEG/PNG are fine. Just make sure you compress and size down as much as possible.

Compression

You can compress files online, oftentimes for free. Just search “compress image files” in Google and you’ll see a variety of options to explore.

If you have a WordPress site, HubSpot has a great list of WordPress Image Optimization Plugins.

Sizing (Pixels)

When loading a website page, if there is an image is too large the site will have to size it down.

Sizing your images appropriately can significantly improve the speed and load of pages.

Always avoid huge images and try to losslessly compress.

Other Image Optimization Considerations

Images can also be beneficial for SEO purposes. When naming them and giving them ALT text, consider what someone might be searching to find these images. Appearing more in image searches can benefit your website’s visibility as a whole.