Scroll to top
en

Guide to Image & Video Optimization for your Website


Lisa Pepin - January 31, 2020 - 0 comments

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:

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:

  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.

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.

If you know some HTML

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 <img> 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.

Image optimization: If you see an “intrinsic” size, go with that

If you don’t know HTML

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.

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.

How to Compress Images

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:

For JPG, PNG, GIF formats

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.

For MP4 files

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.

For SVGs

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

File Size Guidelines

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.

IMAGES

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

VIDEO

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

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.

Post a Comment

Your email address will not be published. Required fields are marked *