Guide to images for EUI blogs

Choosing the best images for your blog isn’t just about sourcing ones that look good. We also need to think about how they’ll fit with blog design. This means thinking about image orientation, image size and and aspect ratio.
 

1. Image orientation

It is important to assess how images will fit with your blog design. To do this, we need to understand the impact of image size and aspect ratio on blog design.

Firstly, images always fall into one of two categories: landscape and portrait – this is known as the orientation.

1

Once we understand the orientation of an image, it’s time to think about its size and shape.

Put simply:
Landscape images will be wider than they are tall, portrait images will be taller than they are wide.

 

 

2. What’s image size?

Let’s start with image size. This is simply the dimensions of your image.

You need to think about the space you have on your web page and how much of that you want taken up by an image.

The three images below show different dimensions of an image. When talking in terms of web design, images are always measured in pixels – the individual squares of colour that make up an image.

2

3

4

The above images are all exactly the same shape, just different dimensions.

And while you can take a large sized image and make it smaller – you can’t take a small size image and make it bigger. If you do, the individual pixels will become visible and the image will lose its quality or pixelated.

So think about an image’s use before settling on its size.

Put simply:
Image size refers to the dimensions (width and height) of a digital image, measured in pixels (px). It determines how big or small the image is on a page.

3. What is aspect ratio?

While you consider the size of the photo – also think about its shape.

This is where aspect ratio comes in.

The aspect ratio of an image describes the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, as in 16:9.

Formula to find aspect ratio:
Aspect Ratio = Width / Height

 

All three of those images above are the same aspect ratio, 3:2, meaning the height of the image is one third less than the width.

By changing the aspect ratio, you can change the image’s shape.

Here are some examples of an image with the same width, but a changing aspect ratio.

5

6

7

4. Blog’s header image

A good header image is wide, but not too tall – there isn’t much point in the header taking up the whole of the screen and the reader having to scroll down before they can see anything else.

The below image gives an idea of the orientation (landscape), shape (short and wide), aspect ratio (3:1) for a good header picture.

8

I’ve had to use a 800 x 267px picture here so it fits within this blog post.

For a full width header it has to be 1920 x 640px.

Live example of full width header image

Put simply:
For header images the recommended size is 1920 x 640px (3:1 aspect ratio).

 

Caution!
Blog’s header images must be at least 1920px wide.

 

Warning!
No vertical oriented (portrait) images allowed.

5. Post’s featured image

Whilst many bloggers concentrate on the content and title, a lot overlook or forget about the featured image.

Every post needs one, as that helps to attract people to click on and read more.

The featured image is the one that will get seen the most. That is the one being displayed on top of your title on your blog and included on social media.

A good featured image has a landscape orientation and must fill the page width.

The below image gives an idea of the orientation (landscape), shape (wider than it’s tall), aspect ratio (3:2).

9

The post featured image must be at least 860px wide to fill the content width.

The accepted aspect ratios are 3:2 or 4:3.

Put simply:
For post featured image the minimum size is 860 x 573px (3:2 aspect ratio).
A 4:3 aspect ratio is also accepted, in this case the minimum size is 860 x 645px.

 

Warning!
No vertical oriented (portrait) images allowed.

 

Caution!
Post’s featured image must be at least 860px wide.

 

 

6. Image suitability

Having considered how size and aspect ratio will impact your web design – it’s time to make sure the image you want to use suitably shows off the subject.

It’s important to remember scaling images up will lose quality.

It’s extremely hard to increase a 200 x 200px picture to 400 x 400px and keep the quality. That’s because it will become pixelated.

Here’s an example of an image of an apple at 100 x 100px that is then increased to 600 x 600px. You can see the bigger picture is fuzzy.

12

13

Put simply:
As a general rule of thumb, make a larger image smaller, not the other way around.
Choose images that have a width equal to or greater than the minimum specified.

 

Secondly, not every image is going to be the right shape for your requirements. Sometimes you’ll be able to change the aspect ratio to make the picture work for the size and shape you have chosen without compromising the subject – but sometimes that just won’t be possible.

Here’s an example of a suitable image choice:

14

15

The aspect ratio for each of these images is different (3:1, 3:2). Crucially though, the subject is fully included in all the pictures. It doesn’t matter what ratio the picture is at, the swimmer can still clearly be seen.

The image even works for the ‘wide but short’ shape that is ideal for a website header as seen below in the 4:1 frame:

16

And below is an example of an unsuitable image. Trying to fit this portrait image into a landscape shape is not going work.

17

18

(Of course if you needed a portrait image then it may be perfect.)

At this point you have to weigh up whether the image in its original aspect ratio will work on your site.

Can you just adjust the size and still incorporate this image?

If the answer’s ‘no’, you’ll have to consider whether the shape or the subject is more important and what you’re willing to change.

Overall, balance is the key. Ensure your images are the right size for how eye catching you want them to be – and how much of a statement you want them to make.

Think about how the shape works in relation to the rest of the content on your site.

And consider if the image you want to use can be successfully changed to fit to the size and aspect ratio you need.

Put simply:
Use images that can fit the size and aspect ratio you need. Do not use (or try to adapt) portrait images where you need landscape ones and viceversa.

7 Header image

Visit Flickr.com, insert keywords in the search box and filter results with Creative Commons license.

19

A suitable header image:

  • Must have landscape
  • Must be at least 1920px
  • Since you need to crop the image to a 3:1 ratio, try to figure out by eye if the subject fits in a wider than tall frame. If not, choose another image.

Once the image fits the above requirements, download the version nearest to 1920px width. There’s no need to download the biggest size available, anything above 1920px width is fine.

20

21

Upload the image to your blog’s media library. Once the upload is completed click on the “Edit” link on the right.

22

In the next screen, click on the “Edit Image” button.

23

Here you can crop the image maintaining a given aspect ratio.

Insert the aspect ratio value in the highlighted field. Since it’s an header image the recommended aspect ratio is 3:1.

Make sure you select “All sizes except thumbnail” in the thumbnail settings box. Thumbnails are square (aspect ratio 1:1) and we do not want them to be otherwise.

24

Now that you’ve set the aspect ratio, move your cursor on the image preview and holding the shift key 26 pressed, click and drag to draw a selection.

Holding the shift key will guarantee that the 3:1 ratio is maintained.

27

You can adjust the selection by click and drag the handles (remember to hold shift key to maintain proportions) or move it around to fit the subjet in the frame. Once you’re satisfied with it, to crop the image click the first button from the above toolbar.

28

Then click the “Save” button below.

29

Do not forget to add the image Alternative text (fundamental for accessibility) then click the “Update” button.

30

8 Post featured image

Visit Flickr.com, insert keywords in the search box and filter results with Creative Commons license.

31

A suitable post featured image:

  • Must have landscape orientation
  • Must be at least 860px wide
  • The accepted aspect ratios are 3:2 or 4:3, which are the most common.

If the image fits the above requirements, download the version nearest to 860px width. There’s no need to download the biggest size available, anything above 860px width is fine.

32

33

Upload the image to your blog’s media library. Once the upload is completed click on the “Edit” link on the right.

34

In the next screen, click on the “Edit Image” button.

35

Since the image dimensions are far greater than necessary (2048 x 1365px while we need 860 x 645px), you may want to resize it. This will make the image lighter and page load faster.

36

In the “Scale Image” box insert the width (860) and the height will be automatically calculated based on the aspect ratio.

Again make sure you select “All sizes except thumbnail” in the thumbnail settings box. Thumbnails are square (aspect ratio 1:1) and we do not want them to be otherwise.

Then click on the “Scale” button.

As you can see the image aspect ratio is 3:2 (860 x 573px), so in this case there’s no need to crop.

If you need also to crop, follow the Header image instructions, just remember to change the aspect ratio from 3:1 to 3:2 or 4:3.

9. EUI Blogs images cheatsheet

blogs-images-cheatsheet