Image and Video Optimization

Why you should optimize your images

In simple terms, optimizing images means balancing image quality with file size: in other words, saving images to as small file size as possible, while still displaying your beautiful images you’ve worked hard to create. This is important for keeping your site’s page load times fast for people on any device with any speed of internet connection. The bottom line: if your site loads slowly, people will leave, so optimizing images can really make a difference to keeping your visitors on your site while providing them with a great brand experience.

An overview of image optimization

These are the general steps for optimizing images:

Finding Image Dimensions

The first step is to find the dimensions of the image you’re creating, length and width: for instance, 1200px x 600px. If this is a new image, your web designer or developer can help you find the right dimensions. If you’re replacing an image and don’t know the dimensions, there are a few ways to find them.

Browser Extension

A simple browser extension can look into your site’s HTML for you and pull up image dimensions. If your site displays a different image on mobile devices, you can use the Google Chrome browser’s inspect tool to display the mobile experience and get the dimensions there.

Understanding File Types

Next, find the right file type for your specific use. We often see sites using a format that’s unnecessarily large or just not the best choice for the placement, such as a PNG in place of a JPG. Here’s how to know what’s best for your use:

Still images

JPG – a compressed image format with no transparency. When in doubt, make a JPG!
PNG – a non-compressed image format with transparency. Only use this when your image needs a transparent background.

Animation/Video

GIF – a compressed image format with transparency. Generally used for small things like icons and animation (animated GIFs*).
MP4 – a widely used video format. Although it’s a compressed format, it often creates huge file sizes. This site is great for compressing video while retaining quality: https://www.videosmaller.com/

*Note on animated GIFs: this file format is often not needed on websites, because embedded MP4s are now widely supported and are replacing it. Embedded mp4s can give much higher quality with much smaller file size than GIFs. Ask your developer for more info!

Illustrations/Graphics

SVG – scalable vector graphic. Used for logos, illustrations, and anything else made with vector graphics. In general, SVGs are preferable because they scale, which makes them naturally responsive for all screen sizes so that they always look crisp.
PNG – often used for things like logos and graphics, too, since they’re often transparent – this is just a different way to put them online. Since PNGs are not scalable, they may not look as crisp as SVGs.
GIF – sometimes used for very small graphics, like favicons (the tiny icon in your browser tab), where limiting the number of colors saved in the graphic can help reduce file sizes while still looking great.