How to display images

Images can easily add life to your website or blog and underline your brand identity. Let’s look at some image display options to make your website stand out. To use great pictures will always make a good first impression to your visitors before they even start reading your content.

What images should you use?

Don’t steal. Don’t use images you’ve seen somebody else use, don’t copy images from other websites or Social Media Accounts. First of all it’s illegal and the owners of the images can sew you, and you might have to pay fines – it’s also simply not a nice move to steal somebody’s original work without even giving them credit.

While you can already take pretty impressive photos with mobile phones, or your camera, often, especially when we’re starting out, we don’t have the capacity to take all the pictures we need ourselves.

There are many sources on the internet from which you can get remarkable photos for free or for a small amount of money – use them!

Unsplash and Pexels are two of my favourite ones. You have to know though, that while these photos are free to use for you – they are also free to use for everybody else. Which means you might find them on other people’s websites as well.

If you need a picture in a prominent place on your website, I would opt for a paid service – while you don’t have exclusive rights here either, you can still be sure that these images are used less than those that are for free.

I use Stocksy here for my website.

Especially if you are using free photos, try to credit the author. It’s not mandatory according to the terms of use but by law you are required to do so, at least in Germany, I think in the whole European Union.

What sizes should you images be?

A rule of thumb is that all images on one page shouldn’t be bigger than 1 MB in order for your page to load fast enough. The size of an image file does not solely depend on the pixel size of the image, but also it’s quality.

For display options: if your image should be full screen it should be around 1800px in width to be shown in a good quality on all screens and can be 800ox – 1000px for smaller images. 200 – 300 KB is usually a good image size.

When you download images they are usually much bigger – so are the ones you take yourself most likely. But you can easily change that with any image editing software (such as Preview which comes with a mac, for example).

Image Display Options with Divi

Divi allows you to display your images in many different ways. One would be as a single image that can be arranged with other images or with text.


Full-Size image – one column
2 full-size images – in two columns
3 full-size images – in three columns
You can also add text, headlines or other elements above and below or instead of an image. The great thing is, that when you arrange a couple of images or other modules next to each other on your computer, they will automatically appear underneath each other on smaller devices such as mobile phones or tablets.
Another option, which you can see below, is the built-in Divi Gallery you have an option here to display the images with or without a title.
And you can display it as a grid, as you can see above, or as a slider.

Of course, you can also use images as a background in the different sections or in regular sliders. I will show all of these options and how to set them up in the Video Tutorial in Lesson 9 of WEB DESIGN FOR CHANGE.

One more thing – you can also embed image galleries from other places, which is what I usually do. You save storage page on your website and also have a much nicer way to organize your galleries directly on FLICKR for example. Once your gallery is set up, you can simply copy the embed code and insert it into a text frame, like in the example below.

Hillerse first days

If you’d like some help with your Images or website in general, send me a message. Or join WEB DESIGN FOR CHANGE to learn all about  your image display options and how to create your website.