This image is 1920×1080 – full  HD image but it’s 6x the size of the next one. Do we need to cater to 4K monitor owners? It’s quite a big download @ 227KB.

The images on this page are all different sizes but have the same aspect ratio so will look identical as long as they span the column width.

Only 46KB and it looks identical to the one above on my 27″ display. But on an iPad it could look a bit rough. Resize your browser window to see if it will work on a smaller screen.

1200×675 Not a bad compromise – It is a little oversized for two column layout on a desktop display but should look nice on an iPad and span a single column, also it’s not a huge file.

For any image that is wide enough to fill the column, its height will always be the aspect ratio (0.562 in this case) x the column width.

This is so small at 300px wide it cannot fill the column – might look okay on a small phone but because it doesn’t span the column width it looks shorter.

The text in this column, will define the height of the row rather than the image defining the height.

So there’s no science to choosing the correct image size – we have to find a happy medium – compromising between file size, quality, and resolution.

Just pick a width you think will work reasonably well on the page for most customers …and be quick to load! For 16×9 format images how about 1066×600 pixels?

In Divi the breakpoints for changing the layout are:

0px – 479px for mobile
480 – 980px for tablets
981px and above for desktops