5

How to make web-ready images for your blog

Camera for web-ready images

© Paul Reynolds, My Camera, via Flickr

Have you ever been impatient waiting for an image to appear on a blog or website?

It takes ages to download, with layers gradually becoming visible as it materialises down the screen.

This is because this image isn't web-ready.

What do you mean by web-ready images?

The process of viewing images on a screen is different than printing them on paper.

This is because web-ready images should be created for colours that use light, namely red, green and blue.

And they need to be adapted for a computer screen that uses less dots per inch, also called resolution. Web-ready images should be from 72 to 96 dpi (dots per inch), the number of pixels going across the image.

This is different from printing images, which use ink colours (cyan, magenta, yellow and black) and need to have a high resolution of at least 300 dpi.

Why are so many images not suitable for blogs?

A lot of people take images with their smartphones or tablets. This is because it is so easy to do, and these devices are so readily to hand.

But – the majority of these digital cameras are set at too high a resolution. Even proper fancy digital cameras take pictures at a very high resolution.

And a high resolution makes the images either too pixel heavy to download properly, or too large a file to fit within the blog's text space.

And too large a file, those that are MB rather than KB, will quickly eat up your downloading space requirements on your blog.

And if you're blog is image based, this could be a big deal!

Why doesn't everybody using the web have trouble with their images?

This is because not everybody has the time, inclination or facilities to hand to be always creating web-ready images every time they use them on the web.

So the majority of applications, programmes and platforms people use on social media have special coding whirring behind the scenes to make every image web-ready automatically.

For example, if you upload your latest pictures into Facebook directly from your smartphone, you know they will be instantly OK and you will be able to see them perfectly.

What you don't know is that Facebook's clever programming has worked hard on your pictures to make instant web-ready images that won't break anything or cause problems in downloading or viewing them.

But your blog probably doesn't have those facilities, or if it has, they aren't as powerful as what Facebook uses.

How do I make my pictures into web-ready images?

You need to have access to some suitable applications to help you.

I use Photoshop, but if you don't have this, I know that other programmes or websites such as Paint, Canva, Photobucket, PicMonkey and many more can fix your images for you.

And the principle is essentially the same. They can reduce the resolution down to the correct level. This in turn will reduce the file sizes, thus saving your blog's uploading space.

And ideally you should make your web-ready images the correct size for your blog's viewing space, so it doesn't 'go over' the theme's design.

Some blogs will be able to cope with this, and will adjust the image accordingly to fit (especially if their themes are mobile-friendly, meaning they can adjust to a smaller screen size found on hand-held devices).

How wide should the images be?

You will need to find out the width of the text space is in your blog, so you can make your web-ready image the correct size.

What I would do is take a screen shot of my blog as an image:

Screen shot of my blog

ready to upload into Photoshop (or whatever programme or website you've chosen).

Once Photoshop is up and running, look at the top menu to find 'File' and select 'Open' from the drop down menu:

Photoshop File Open

Find the screen-short image on your computer:

Find screen shot of my blog

Select it and click on 'Open':

Open button

And the image will now show and be ready to edit in Photoshop.

Next find the crop tool in your tool bar:

Crop tool in Photoshop

And use it to cut out the size of the text area (by dragging it over the area you want to crop):

Crop out the text space in Photoshop

Then (still keeping with the cropped image) go up to find 'Image' and then select 'Image Size' from the drop down menu:

Image Size in Photoshop ready for web-ready images

And you will see this menu that shows you how many pixels your text space width is (and also that it is 72 dpi, which is a good thing):

Image size menu

And now you know the optimum width your web-ready images need to be, which in this case is a maximum of 720 pixels.

Now optimise your chosen image

Select the image you want to put onto your blog post and place it somewhere you can find it easily on your computer, such as the Desktop.

Then go back to Photoshop (or whatever programme or website you have chosen to use), find 'File' and select 'Open' from the drop down menu:

Photoshop File Open

Find your image on your computer:

Find the image

Select it and click on 'Open':

Open button

And your picture will now show on the screen and be ready to edit in Photoshop.

After lunch on Boxing Day

Go up to 'Image' at the top of the page and select 'Image Size' from the drop down menu:

Image size menu

This will bring up the 'Image Size' menu:

Original size of image

Now you type in your preferred amount of pixels in the width field (I prefer to enter 680 pixels):

Correct size of image

And check the Resolution is 72.

When you're happy with this, click the blue 'OK' button.

Now give your web-ready image a relevant and recognisable name.

Go up to 'File' and select 'Save As' from the drop down menu:

Select Save As

Think of a good name and select the image's destination after it's saved:

Give the image a name

And now you've prepared your web-ready image to be placed into your post.

Now place your web-ready images into your post

If you're thinking "I can do that!" then that's fabulous, but I want to tell you a few extra bits that will improve your picture even more for your post.

Go through the normal procedures of placing your cursor in preferred place within the text field of your blog:

Place the cursor in the preferred position

And then clicking on the 'Add Media' button above the editing icons:

Add Media button

You'll then see the 'Insert Media' page, showing all the images you previously uploaded. However, I want you to click on the 'Upload Files' tab:

Select Upload Files

And you'll see the 'Select Files' button in the middle. Click on it:

Click the Select Files button 2

This will take you to your computer so you can search for your web-ready images you carefully saved ready for your blog post.

Find the image in question, select it and click on 'Open':

Selecting picture from computer

And your image will instantly start to upload:

Image uploading

When it has finished you will see your image as a thumb-nail:

Image finished uploading

And the tick means this image is selected within the image gallery.

Now if you look to the right, you will see a sidebar full of details about the image:

Sidebar for image

And I want to tell you which bits you should concentrate on.

First, you need to fill in the 'Alt Text' field.

Alt tags, or alternative text tags, are how the search engines are able to find your image. They are programmed only to read text, and therefore images are invisible.

To make your web-ready images visible to search engines, you need to add text behind them. Which is the alt tag.

Therefore what you say should be a valuable description of the image that would not only mean something to the search engines (containing necessary keywords, for example), but also to partially-sighted web-users who rely on special programmes in their computers that tell them what's on the screen.

It is the alt tags behind the pictures these programmes use to describe the pictures.

Web-ready images without alt tags are both invisible and silent.

Therefore fill in your 'Alt Text' field with something meaningful:

Fill in the Alt Text field

The next section is how the image will display in your post.

As you can see, I have set the alignment to 'None', as this picture will take up the whole width and won't need any text to be wrapped around it:

Check Attachment Display Settings

This image isn't supposed to link to anything. The default links to the 'Media File', which means each image has its own page with its own web-address allocated to it. I have set this to 'None'.

And also make sure your image's size is set to 'Full Size' before you click on the green 'Insert into post' button below:

Insert into post button

Which places your image safely into your post.

If you think filling in that sidebar is a lot of work, believe me it gets easier. I had to do it for all the images in this post!

Also, check out this post that tells you another way how to resize your web-ready images once they're already been placed in your blog post – just in case you've got your resizing wrong!

There you have it – how to create web-ready images and suitably place them into your blog post. Let me know how you get on in the comment box below.

The following two tabs change content below.
Alice Elliott writes the Beginner Bloggers blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She specialises in simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Why not also visit her award winning Fairy Blog Mother blog to learn some more.

Latest posts by Alice Elliott (see all)

Sharing is caring

Did you enjoy reading this post?

If you would like to be the first to know about my other exciting blogging events and activities, as well as reading a cool infographic created especially for you, sign up here:

Would you like more comments on your blog posts?
x