Using Images with Divi – The Ultimate Guide

Getting images right for your Divi website can be tricky. You have to consider things like dimensions (pixels), file size (kb) and file type (.jpg, .png etc). Get it right, and you page will look great and your site visitors will love you. Get it wrong and say goodbye to your page speed and any sort of decent user experience.

This post, which will probably be updated overtime, should give you a really good overview of how to approach the use of images on your website.

The Lingo

This may all make total sense to you. Or it may just make your head swim. So for the sake of levelling the playing field, let’s go over a few key terms.

Pixel
A pixel is the standard unit for measuring screen elements, including digital images. Need more details, wikipedia to the rescue.

File Size
When we say file size, we are talking about how big your file is. Or how much space it takes up on your computer or server. File sizes are measured in units called bytes, and with images we’re typically talking in kilobytes (1,000 bytes). More info.

File Type (File Format)
In the world of computers, there are hundreds (probably thousands) of different file types. With images, for the web at least, we typically only work with a few. These include, but not exclusively:

.jpg (.jpeg)

.png

.gif

.svg

Each of these different file types have their strengths and weaknesses, of which we’ll cover further down.

Image Dimensions

How big should I make my images? This is kind of a “it depends” one. For instance. If you want an image to stretch full screen across your whole page, you’ll need a bigger image. However, if it’s just an image you want to use, for example, in a Divi Blurb Module, you can use a smaller one.

So the first step is….

1. Identify the space you want the image to display.

Simple enough. I.e. “I want the image to be the background of the full-page header”.

The next step is…

2. Identify the dimensions of the space you want the image to occupy.

This ones a little bit trickier when you’re just starting out, but it gets easier once you’re used to it. The easiest way is to upload a placeholder image to your image space. When you now preview the page, you’ll see the space that the image is occupying. You can then identify the dimensions in Pixels of that space.

It allows you to drag a box over the image and see its dimensions in pixels.

3. Decide whether you want the image to be optimised for Retina (4k) screens.

Firstly, what on earth is Retina? Retina, or what are sometimes called 4k or Ultra HD, are basically really high definition screens. You can almost not make out individual pixels when you’re looking at them. What this means is that if your website displays an image at a normal resolution on a Retina screen, it will look blurry, or “pixelated” in comparison to other elements on the screen.

Is this a big deal? Maybe. Depends on your website and audience.

Should you optimise your images for Retina? Up to you. The upside is your visitors will see clearer images. The downside is that the image file-sizes are much bigger, which can lead to a decrease in page-speed.

So how do you optimise for Retina?

There are many ways, and many plugins that can help with this, but the general rule-of-thumb is double it.If your image space is 500px by 300px then make your image 1000px by 600px. If it’s 100px by 200px then make your image 200px by 400px.

So basically once you’ve measured the pixel dimensions, and decided on whether you want to double them for Retina screens, you have the dimensions you need. You’ll need to use some sort of image editing software or website to set or re-size your image. It’s good to know that you can mostly resize an image down (smaller) without losing quality, but it’s very difficult to resize an image up (bigger).

File Size

This is a big one. Image file size is probably the biggest contributor to a page’s speed being good or bad. Why? Because every image you have on a page needs to be downloaded by your visitor to their browser. The good news is it’s also one of the easiest things you can change to improve your page speed. The basic rule is:

“Get your file size as small as possible while retaining the image quality level you need.”

1. Get Your Dimensions Right

Knowing what dimensions you need the image to be, as we discussed above, is your first step in getting this right. If you produce an image bigger than what you need it to be, then you’re obviously going to have a file size that is too big.

2. Choose the Right File Type

Different file types deliver the image data to your browser in different ways. Some are more efficient for some things than others. Also, some file types can actually be compressed. We’re going to cover file types later on, but needless to say, choose the right file type for the type of image it is.

3. If you can, compress the image!

There are a number of plugins and tools that let you compress different types of image files. What these tools effectively do is reduce the quantity of data (ultimately that’s what a digital image is) required to display the image. Not all file types can be compressed, but you can often get big wins by compressing .jpg (.jpeg) and .png files.

If you use a photo or image editing tool, you can often choose quality settings when exporting.