Speed Optimizing Images & Videos for Divi: 2020 Best Practices

Overview

This is a guide to best practices of using images and videos on the web, specifically with the Divi theme. The purpose of this guide is to help you reach a balance between IQ (image quality) and speed (file size).

I’ve come across countless websites that didn’t understand this balance, and the result is a poor user experience. By optimizing your Divi site for speed, you can reduce file size by 98%!

This guide has two components:

1. The informational content and explanations (located on this page)
2. Live examples showcasing these techniques and results (hosted on our Divi microsite)

Comparing JPG vs PNG vs SVG Files

In the example below, I took a simple graphic and saved it as 3 different file types. 

JPG – Use for Most Images

JPG (or JPEG) images are the most common image file type on the web. They strike a good balance between file size and quality. Think of JPG as the default file format to use with Divi. You’ll only use a different image file format in a handful of circumstances.

PNG – Use Sparingly, for Transparency

PNG files are a much higher-quality format than JPG. They look better, but take up a LOT more space. You’ll want to use PNG as sparingly as possible. 

Unlike JPG files, PNGs support transparency. That means you can cut out the background of a person, product, or other object and superimpose it over a background on your website.  This effect is cool but will take up a ton of space, so I avoid it when possible.

PNGs are also a good choice for graphics created in Photoshop or Illustrator, as they will be cleaner and sharper than a JPG. If you have access to a graphic that was created in Adobe Illustrator (different from Photoshop), then you can use an SVG to be ever sharper and take up less space. 

SVG – Use for Logos & Vector Graphics

This is a completely different type of image file. JPG and PNG are both ‘raster’ formats, meaning they store information in a fixed number of pixels. If you enlarge a raster image it’ll get blurry.

An SVG file is a ‘vector’ format, meaning it stores information in a series of shapes and points on a grid. This format will only work with computer-generated graphics, like logos and graphics produced in Adobe Illustrator. This format is one of my favorites because the image quality is razor sharp – it couldn’t get any better. You can test this by pinching/zooming on the SVG graphic below.

SVGs work by using your internet browser to draw out the image using shapes and colors. The result is a perfectly clear image (at any size) and a fairly small file size.

SVGs don’t work ‘out of the box’ with Divi. You’ll need to install a plugin like Safe SVG or SVG Support in order to upload SVGs to WordPress. This is because SVGs can contain malicious code that could harm your site, so be careful!

SVGs can also be inlined, meaning you can embed the code directly without uploading a file. This is a neat feature because it reduces HTTP requests, however it takes up the same amount of space by simply adding that to the HTML. 

Sizing Images by Column Width

Divi’s default row width is 1080px. This means if you have an image (in an image module) in a 1-column row, the max width it can be is 1080px. Anything larger will usually be overkill and lead to wasted pixels and file size, resulting in a slower load time. 

This screenshot illustrates the sizes your images will be depending on the Divi column layout you choose. Upon an initial look, you may be tempted to resize your images to match these dimensions. I urge you not to do that! While these sizes are accurate for desktop, we have tablet and mobile to consider. That’s where things get complicated. 

Sizing Images by Column Width

Divi’s default row width is 1080px. This means if you have an image (in an image module) in a 1-column row, the max width it can be is 1080px. Anything larger will usually be overkill and lead to wasted pixels and file size, resulting in a slower load time. 

This screenshot illustrates the sizes your images will be depending on the Divi column layout you choose. Upon an initial look, you may be tempted to resize your images to match these dimensions. I urge you not to do that! While these sizes are accurate for desktop, we have tablet and mobile to consider. That’s where things get complicated. 

A ¼ column Image on Desktop will become a 1 column Image on Tablet and Mobile

That’s right. Let’s say you use an image that’s 225px wide. In a ¼ column on desktop, this will look fine. However once you get to tablet size on Divi (screen width < 980px), this image will then become full-width. On a tablet that’s 980px wide, that image will become 784px wide. This resizing applies to every column that Divi can produce.

Image Sizes for Mobile & Tablet on Divi

Since there aren’t any standard widths for screen sizes on tablet and mobile devices, the width of your images will vary greatly. On the lower end of the spectrum is the iPhone 5, where your images will show at 256px. An iPad’s viewport is 768px, which will display images at 614px. These values are arbitrary really, considering there are so many different devices and viewports. Divi doesn’t have settings to properly size images for all device combinations. 

Image Sizes for Retina and High Pixel Density Screens

Besides varying screen sizes, most modern devices contain high pixel density screens. This means that while the viewport may be 320px, there’s actually 2x as many pixels as a normal device. This means that images will look blurry at that size. You’ll need to serve an image that is 2x – 4x more pixels to look sharp on HiDPI devices. 

Full Width Images & Full Width Background Images

These are images sized to 100% of the browser viewport width. For desktop devices, these will range from 1200px (small laptop) up to 3840px (4k monitor). Mobile devices will display images much smaller.

When deciding on a width, think about your audience and how most of them will be viewing your images. Also consider how clear the image needs to be. If it’s getting a color overlay treatment, we can get away with a lower quality image. I usually size full-width background images between 1600px and 2560px wide.

Compressing Images with Divi

Where resizing refers to changing the pixel dimensions of an image, compression refers to reducing the amount of information in the image. Image compression is important for all websites, not just Divi. There’s many methods of compressing images. We can also control the intensity of compression. The more compressed an image is, the lower the quality will be and thus, the smaller the file will be.

By supercompressing images, I reduced the (previously 1.8MB) set of images by 61% (down to 0.7MB).

WordPress Default Compression

When you upload an image to the WordPress media library, it will be automatically compressed at 82%. Note this only applies to JPG images – WordPress does not compress PNGs or SVGs. This default compression is better than nothing at all, but it’s really not aggressive enough.

Compressing Images in Photoshop

If you have access to Adobe Photoshop, you can compress images before uploading to WordPress. This is useful if you want to crop and resize your images using one tool. It also gives you the ability to preview the image size at different compression levels. If you’re using Photoshop, I suggest using the Save for Web menu and choosing 50%. Note that Photoshop can only compress JPG images also – it can’t compress PNGs by default.

By converting images to WebP, I reduced the (previously 0.7MB) set of images by 28% (down to 0.5MB). 

Best Practices for Using Videos in Divi

Video streaming accounts for 60% of global internet traffic. That tells us two things:

1. Videos are popular
2. Videos take up a lot of space

That immediately tells us that we should be using video in Divi sites, but we have to be very careful of how we use it. 

Storing Videos on Divi: Self Hosted vs YouTube / Vimeo

There’s two basic methods to serving videos on a Divi site.

1. Self-hosting: Uploading a video to the media library, storing and serving from your server
2. 3rd-party hosting: YouTube, Vimeo, etc.

For 99% of videos, you should use a 3rd party service like YouTube or Vimeo. This is because they offer a video CDN (content delivery network). These websites specialize in serving video, and as a result they are really good at it!

Most videos take up hundreds of megabytes, or even gigabytes depending on length, quality, and resolution. It’s not practical to serve these files from your server.

When you serve a video from YouTube or Vimeo, they don’t make you download the entire video at once before playing. They essentially ‘lazy load’ the video by only serving you a few seconds at a time. Also the video isn’t loaded until you click the play button, which means your site can load much faster.

Using YouTube or Vimeo for a Full Width Video Background on Divi

This is one of the most asked questions with Divi. Unfortunately Divi does not support using a 3rd party video as a video background. A web developer in Australia came up with a clever workaround for this. 

Optimizing a Video Background in Divi

I only recommend uploading videos to your server and self-hosting them when you need a full-width video background. Self-hosting videos can make your site very slow, especially when you’re not optimizing them. With that said, let’s take a look at how to do it properly. 

How Much Can You Save?

I took a 20-second video shot on my iPhone. The original file was 120MB! First I opened it with Adobe Premiere exported it for YouTube at 1080p, resulting in a file size of 42MB. Aggressive compression and resizing with Handbrake reduced it further down to 8MB. Then I cropped the top and bottom off the video, resulting in a file size of 2.3MB. I suggest targeting background videos to be under 5MB. 

Video File Formats for Divi

Divi has fields for two video file types: MP4 and WebM. You should upload your video in both formats. MP4 has been around for a while and is supported by most browsers, while WebM is a newer format, not supported by everything, but offers better compression for videos. Once you have an MP4 file, you can use this tool to convert it to a WebM. 

Limit Videos to Under 30 Seconds

Video length is key to reducing file size. Cutting a 60 second video down to 30 seconds will usually save 50% of file size. Most people won’t watch the entire background video anyway, so cutting the length down is a no-brainer.

Compress the Video

Video compression has the same impact as image compression, but can be far more complex. Many video compression techniques work by analyzing adjacent frames to identify similarities, thus reusing the same information and saving on space. Compressing a video can easily save 90% of it’s file size. 

Reduce the Video Dimensions

I usually reduce the video width to ~1400px. Anything in the range of 1280px to 1920px will work. Reducing this width can greatly reduce the file size of your video. 

Crop the Video

This is an uncommon practice, but it makes perfect sense.  We crop images all the time. Why not videos? Often times for background videos, they will only take up a small sliver of the screen. In the case, we can crop the video to a custom aspect ratio to further reduce file size. I reduced a video by ~40% file size by cropping the video height for this Hawaii Eye Doctor.

Tools for Cropping, Resizing & Compressing Video for Divi

Video can be time consuming and expensive to work with. Without getting into the weeds, I usually use a free program called Handbrake to prepare videos for Divi. This will allow you to crop, resize, and compress your video. 

Remove Audio

Audio doesn’t belong in background videos because they are autoplayed. Nobody likes autoplay audio on websites. Removing this track from the video will also reduce file size.

Optimizing YouTube / Vimeo Videos

By default, YouTube will load ~0.7MB of external scripts and 13 additional HTTP requests just to initialize the video player when the page loads. While this is preferable to loading the entire video on page load, it’s not ideal. This can easily double the load time for a Divi page.

Using a Plugin to Lazy Load YouTube / Vimeo Videos

As we covered earlier, lazy loading is the practice of loading content only when the user needs it. This can also apply to videos by replacing the video with a thumbnail and a fake play button. When the user clicks on the button, it will then load the video. This is a clever technique that can massively speed up your page. I was able to reduce page size by 0.62MB compared to loading a standard YouTube video. 

You can lazy load 3rd party videos using a free plugin: https://wordpress.org/plugins/lazy-load-for-videos/

Don’t use a Divi Video Thumbnail with YouTube  / Vimeo

In a Divi Video module, there’s an option toward the bottom under the Overlay tab to generate a thumbnail from the video. Instead of loading the entire video on page load, it just loads this image. The video loads when the user clicks the play button. This works great for self-hosted videos, as the video isn’t loaded until you click the play button.

With YouTube  / Vimeo videos however, Divi still loads all of the YouTube code in addition to the new thumbnail it generates. This leads to an even slower load time vs not using this feature.

Why Does all of This Matter?

‘Print-Quality’ Images Do Not Belong on the Web

Some sites have razor sharp images that look incredible, however it takes 5+ seconds to load each page (on a good connection). When your images are too large (file type, dimensions, file size), the user can’t notice or appreciate the quality of those images. They do however notice how long it takes to load, and will often bounce when they’ve had enough. Additionally Google has been increasingly favoring speed optimized websites. 

Size Images & Videos Appropriately

The point is, image quality is really important. You need to achieve a balance between looking good and loading fast. Hopefully this guide will help you accomplish that.

If you have any questions about optimizing images or videos for Divi and WordPress, you can reach me here: shane@clarity-online.com