Inserting and Formatting Images

Sourcing and formatting images can end up being one of the most time consuming parts of completing a blog post. Sourcing images is covered below – but assuming you have an image, here’s how to go about formatting it and getting it into your post:

Image Size and Format

All images should either be GIF, PNG or JPG images.

It’s worth sizing and saving your image beforehand in an image editor – not essential, but it saves a lot of hassle later on.

Full width images without a caption should be 700 pixels wide. Aim for them to be no more than 400 pixels high

Full width images with a caption should be 680 pixels wide, and less than 400 pixels high

Scale half-width images accordingly (350 pixels wide for no caption, 340 pixels wide with caption)

Inserting images

First, click the “Add Media” button above the editor:

Add image 1

This gives you the option of adding an image from previously uploaded images:

Add image 2

…or to drag and drop an image into the media browser from your computer:

Add image 3

To edit an image once it’s been inserted, hold the cursor over the image and select the image icon:

Add image 4

This brings up the image editor. Most fields are self explanatory. Two are particularly important:

Add image 5

Title: This text appears when the cursor hovers over the image. If you are posting an image without a caption, make sure you enter image credits here!

Caption: Only enter text here if you want to add a caption to your image

You can resize your image by dragging on the corners once you have inserted it in your post. But do not do this if it has a caption – the formatting can get really messed up!

[Back to the style guide]