Guide to Image & Video Optimization for your Website

You’ve likely heard the phrase “image optimization” before. You may know it’s helpful for making sure your site loads quickly. You may even have seen image size come up as an issue in your site speed reports. But how do you actually optimize all your media and know you’ve found the right file size? Here’s our guide:

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.

These are the general steps for optimizing images:

1. Find the image dimensions of the image you’re replacing.
2. Resize the replacement image to those dimensions.
3. Choose the right file format for your use.
4. Save for web at about 60-85% quality.

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.

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.

In Chrome, right-click on the image you want to replace and go down to “Inspect.”

Hover over the code in the Elements inspector, and you’ll see image dimensions come up. You may need to navigate to the

tag, or navigate through the Styles/Computed panels to see a background image, etc.

Note: if you see an “intrinsic” size, go with that. That means the image has been scaled down for the specific placement or use that you’re inspecting, likely mobile or tablet size, but its original is likely used for another purpose.

Right-click and save the image. Then open its properties to view its length and width. This may not work for every image depending on how the site is built.

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:

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.

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!

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.

The last, and most important, step of optimizing images is saving them at the smallest possible file size, or compressing them, while retaining quality. Here’s a general guide to how I optimize images:

In Photoshop/Illustrator/XD, Save for Web at about 60-85% quality. This tends to give a good balance of quality with compression.

For mobile devices, export at 2x (double the dimensions) for mobile devices to also cover larger tablet image placements. Programs like Adobe XD that are made for designing websites give you this option out of the box, but you’ll need to calculate it yourself in other programs like Photoshop or Illustrator. Just be sure not to upsize images that have been created at smaller dimensions.

Animated GIFs can be difficult to save at small file sizes with decent quality, because they’re combining multiple images into one. Consider using an mp4 instead.

Upload a high quality video to videosmaller.com. Believe it or not, we’ve found this tool provides better compression quality and smaller file sizes than Adobe Media Encoder or other tools. It can also help you scale down the dimensions of your video if needed.

There’s generally no need to compress SVGs. By its scalable nature, this is already a very small file format.

How do you know when a file is compressed enough? Here are some guidelines for the file sizes to aim for. Your actual sizes may differ by up to 30% or so: use this as general guidelines.

2000 x 2000px: about 180kb

1500 x 1500px: about 150kb

1000 x 1000px: about 80kb

750 x 750px: about 60kb

400 x 400px: about 40kb

200 x 200 px: about 20kb

If you’re looping video for a background, hosting it for a PDP gallery autoplay video, etc, it’s important to first of all keep your video as short as possible. We recommend length no longer than 12 seconds.

File size: up to 1mb, preferably no bigger than 400kb where possible.

Webp is a next generation file format that provides similar benefits to PNG’s like transparency, but is up to 26% smaller. The issue with webp is that a lot of older browsers don’t support it. However, many CDN’s like Cloudflare will automatically do this conversion for you on the browsers that support it if you have the Polish feature enabled.

Technical Note: If you’re a developer and want to add webp images to your site you can in a backwards compatible way. See Mozilla’s Dev Docs for this.