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.
If you’re fairly up-to-speed with the basics of using images online, skip to the end of the article where I cover my Rules of Thumb (Basic Rules).
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.
A pixel is the standard unit for measuring screen elements, including digital images. Need more details, wikipedia to the rescue.
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)
Each of these different file types have their strengths and weaknesses, of which we’ll cover further down.
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.
There are a number of ways to do this including some nifty browser tools like this one for Chrome. Page Ruler Chrome Extension
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.
WARNING: Doubling the dimensions of your images this way, effectively quadruples the size of your image. This means bigger files. This means slower page speeds.
4. Decide on your dimensions
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).
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.
Tiny PNG is great free website for compressing images.
There are also a few good free and premium WordPress plugins that compress your images for you as you upload them to your media library.
I said earlier that different file types should serve different purposes. I’m now going to cover the 4 image file types you’re going to encounter most often online and the pro’s and con’s of each.
- Great for photos
- Can be easily compressed
- File size can be big
- Not so nice for “clean edged” graphics like icons
- Can’t have transparent sections
- Clarity (visual quality) is limited by the dimensions of the image
Use for: Photos
- Great for “clean edged” graphics like icons and logos
- Can be compressed
- You can have transparent sections in the image
- If the image is “busy” like a photo, the file size can be very big.
- Clarity (visual quality) is limited by the dimensions of the image
Use for: Graphics like icons and logos
- Everyone loves a good moving image meme. 🙂
- File size can be biiiiig.
Use for: Moving images
- .svg is a vector format which means that the image can be scaled up or down to any size and it won’t (should not) lose its quality.
- Perfect for icons and logos with clean edges and few colours.
- For simple images (graphics) file size can be very small.
- For images with too many edges or colours, file sizes can get big quickly.
- WordPress doesn’t allow the upload of .svg files by default. You will need to install a plugin to allow it.
Use for: Simple vector appropriate graphics.
My Rules of Thumb (Basic Rules to follow)
Knowing all this is nice, but sometimes you just need some basic rules or guidelines to follow. These are mine:
- The smaller the file the better. If you can reduce the size of the file without losing clarity, do it.
- Avoid AT ALL COSTS having images on your page over 200kb.
- You never really need an image bigger than 1920px wide. 1280px is usually fine.
- Use .jpg (.jpeg) files for photos
- Use .png for graphics
- Use .svg for icons and logos
- Use .gif for memes 😛
As I said at the start, this guide will probably grow and evolve, but as it is right now, I hope it helps. 🙂
Got any other points you think should be included? Let me know in the comments below.