speed-icon

Speed Optimizing Images & Videos for Divi: 2020 Best Practices

Improving UX & SEO by Balancing Speed with Image Quality

By Shane Griffiths
Published May 27, 2020
Table of Contents show

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)

Throughout this guide I will include relevant links to the Divi microsite so you can better understand these techniques and principles. These links will be styled like the link below:

Key Takeaways

Follow these best practices when working with images and videos on Divi:

  • Use JPGs for nearly every image
  • Use PNGs when you need transparency
  • Use SVGs for logos and other vector artwork
  • Resize your images (dimensions) to:
    • ~1600px wide for full-width background images
    • 1080px wide for 1-column images
    • ~800px wide for smaller images
  • Use an aggressive image compression plugin
  • Serve WebP images to browsers that support them
  • Lazy load images
  • Host most videos on YouTube or Vimeo
  • Keep self-hosted background videos under 5MB
  • Lazy load videos

Results

Since images and videos are typically the heaviest elements on a web page, optimizing them will have a huge impact on overall performance of the page. In a series of tests, I was able to achieve the following:

  • Image size reduction: 98%
  • Self-hosted video size reduction: 98.1%
  • YouTube video size reduction: 93%

In practice, this will immediately lead to a reduction in bounce rate and typically an increase in pages per session. This is one of the first steps I do when optimizing a WordPress site for SEO.  

Optimizing Images for Divi

The data shown in this guide was compiled using 9 sample images from Unsplash. This chart shows the file sizes of all 9 images throughout 4 stages of optimization. I achieved a total image file size reduction of 98% by following a 4-step process:

  1. Autoresize
  2. Manually resize
  3. Supercompress
  4. Convert to WebP

Images are found on most pages, so there’s a lot of potential to improve performance by focusing on images. The 3 main properties of images that influence file size are:

  1. File Type
  2. Dimensions
  3. Compression
  • Full Size Images – 25 MB 100% 100%
  • Auto Resized Images – 4.2 MB 16.8% 16.8%
  • Manually Resized Images – 1.8 MB 7.2% 7.2%
  • Supercompressed Images – 0.7 MB 2.8% 2.8%
  • WebP Images – 0.5 MB 2% 2%

Image File Types to Use with Divi

While there’s dozens of file types available, there’s only a handful you’ll likely use with Divi. I’m going to focus on the 3 image file types that I use with Divi:

  • JPG
  • PNG
  • SVG

See a live example of Image File Types:

  • PNG – 47 KB 100% 100%
  • JPG – 29 KB 62% 62%
  • SVG – 15 KB 32% 32%

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 png svg

Image File Type Feature Comparison

Size small large smallest
Quality good better best
Features Size: Quality Ratio Supports Transparency Supports Transparency
When to Use Most images Small images with transparency Vector graphics, logos

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.

healthcare-and-medical

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. 

How to Size Images (Dimensions & Pixels) for Divi

Image dimensions can be a difficult concept to master in the web. There are a lot of variables that determine what image size (in pixels) you should use for a particular purpose. Divi then has its own set of considerations to pay attention to. 

When you size an image, you’ll want to think about how that image will be displayed on your site. If it’s going to be a big full-width hero image, you’ll want it to be larger than an image used in a ¼ column. The question we’re trying to address is ‘how much larger’. 

WordPress Automatically Resizes Images

As of WordPress 4.3, images larger than 2560px are automatically resized to 2560px. This is a great feature because it prevents you (or clients) from accidentally uploading 20 megapixel images.  In the example below, you can see that WordPress reduced the set of 9 images by 87% automatically.

See a live example of 9 stock images after being automatically resized by WordPress:

Divi’s Responsive Image Feature

In August 2019, Divi introduced responsive image sizing using the native SRCSET feature built into modern browsers. SRCSET is a way of telling the browser, ‘hey I have multiple sizes of this image, choose the one closest in size to your device’s viewport’. SRCSET is a great feature and can (mostly) fix the issue of sizing images automatically. 

Divi now automatically creates multiple thumbnails for each image you upload. The default sizes for images are:

  • 2560px
  • 1280px
  • 980px
  • 480px

Divi also has additional sizes for Gallery modules, Projects, and Blog posts.  

While this is a great feature, it doesn’t work all the time in Divi. Beyond that, we’re limited to 4 different sizes that have quite a bit of variation among them. I mean, 1280px -> 2560px is a huge gap! 

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. 

See a live example of Divi Column Sizes:

Chart of Column Widths in Pixels for Divi Theme

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. 

Suggested Image Sizes for Divi Image Modules

All factors considered, I suggest using the following widths for Divi images:

  • 1 column images = 1280px
  • All other images = 800px

This will ensure that your image will look pretty good on all devices. Sometimes they will be larger than needed, but not enough to cause a speed issue. By manually resizing images, I reduced the (previously 4.2MB) set of images by 57% (down to 1.8MB).

See a live example of 9 stock images after being manually resized:

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

See a live example of 9 stock images after being supercompressed:

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.

Compressing Images Using Free Web Apps

There are hundreds of free online image compressors you can use. These will be better than the WordPress compression algorithm. Here’s a few of my favorites:

Most free tools have limitations:

  • Can’t compress all file types
  • Can’t bulk-compress images
  • Limit to upload file size

To get around these limits, consider using a plugin to compress your images automatically.

WordPress Image Compression Plugins

Plugins are a great tool for image compression. They save you a lot of time vs doing it manually, and act as a safeguard in case you forget to compress an image. Here are a few of my favorite image compression plugins:

When choosing an image compression plugin, you may need to purchase a premium version to unlock all the features. Some plugins still limit the file size they will compress. Some plugins don’t compress PNGs. Not all plugins compress thumbnail files as well.

Reducing Image Size by Serving WebP Images

What are WebP images? Google developed a new image file format called WebP in 2010. It’s goal was to further reduce the size of JPG and PNG images by using a different compression technique. WebP images are at least 25% smaller than JPG on average. WebP also supports transparency, offering a 3x smaller file size than PNG files. This sounds great, but is it practical? 

WebP images are currently supported by Google Chrome, Mozilla Firefox, Microsoft Edge, and a handful of lesser known browsers. At the time of writing this, Apple’s Safari browser doesn’t support WebP images. In practice, 77% of internet users can view WebP images. That caveat means that we can’t use WebP images all the time. However that doesn’t prevent us from using them most of the time. 

Divi supports WebP images, and most plugins are Divi friendly. There are multiple WordPress plugins that allow us to generate and serve WebP images only to browsers that support them. For browsers that don’t (Safari), a fallback JPG or PNG will be served. Here are my favorite plugins for generating (and serving) WebP images:

See a live example of 9 stock images after being converted to WebP:

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

Reducing Image Size by Lazy Loading Images in Divi

A quick and effective way to reduce image size is to lazy load images. If you make a page in Divi that has 20 images, but you can only see the first 2 ‘above the fold’ when you load a page, why should we have to load all 20 images at once? That’s where lazy loading comes in. 

Lazy loading only loads the images that you can see. Additional images will be loaded sequentially as you scroll down the page. If you have 20 images but only 2 are visible, lazy loading will save you 90% by delaying the loading of those additional images. 

Here are my favorite plugins for lazy loading images in WordPress:

Note: As of WordPress 5.4, lazy loading is about to be built into the core. 

clarity-lazy-loading

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. 

  • Original Video – 120 MB 100% 100%
  • Slightly Compressed Video – 42 MB 35% 35%
  • Supercompressed & Resized Video – 5 MB 4% 4%
  • Supercompressed, Cropped, & Resized – 2.3 MB 1.9% 1.9%

See a live example of a slightly compressed Self-Hosted Video Background:

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. 

See a live example of a supercompressed and resized Self-Hosted Video Background:

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.

See a live example of a cropped Video Background:

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.

See a live example of a regular YouTube video loading:

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/

See a live example of a lazyloaded YouTube video:

  • Regular YouTube Video – 0.69 MB 84% 84%
  • Lazyloaded YouTube Video – 0.06 MB 7% 7%
  • YouTube Video w/ Divi Thumbnail – 0.83 MB 100% 100%

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.

See a live example of a YouTube video using a Divi Thumbnail:

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: [email protected]

Shane Griffiths

Shane Griffiths is a Seattle-based SEO and WordPress expert. He is the co-founder of Clarity Online, an SEO and WordPress development agency. By building or rebuilding websites for SEO from the beginning, Clarity helps clients rank and generate leads faster with less investment. Clarity uses a collaborative, data-driven approach to problem solving to achieve quick wins aligned with long-term strategy.