5 things every online image needs

If you have a website or blog, sometimes you just have to accept that the images you use are the only factor that earmarks your post for success - or ignominy. The wrong online image can be wrong in so many ways, and sometimes, the problems with an image are doing damage to your blog, website or brand. 

In this article, 5 things every online image needs, we're going to take a look at 5 things you need to check before you put any image online, what can go wrong, and what you can do, quickly and easily, to remedy them.

Essential #1: an image that grabs you by the...eyeballs

The internet is a crowded place, and before we get around to talking about the need to optimize online images, we need to talk about the need to make sure your first image in a post (and the others too, but to a lesser extent) is really eye-catching. Many blogging platforms and themes (the one you're reading, for example), use a large, full-width image in the display. This image is called the hero image and is a. very big, and b. used in places other than your blog post - the summary, on certain 3rd party platforms and in certain circumstances when sharing your post online. 

Jeannie Shapiro



This image can make or break your article or page, so choose very, very carefully. Take time time to look for the perfect candidate, brainstorm about other approaches you might take, and hunt around for an image that fits perfectly in the space. If you're stuck, look at other web pages talking about a similar subject, and see if you can gain any inspiration from them.

Essential #2: a clear path for use

Once more, before wasting any time polishing and perfecting your image, you need to make sure that someone's not going to come hammering on your door, demanding you take it down. How do you make sure that copyright concerns aren't going to ruin the perfect image? Easy! Make sure you image fulfils one of the following requirements:

1. It's your image (taken by you)

2. It's your image (purchased from a photographer or stock site)

3. You've asked for and been given permission to use it

4. It's a royalty-free or has a license for commercial use 

Reputable sites make it easy to find copyright info - ideal is "commercial use allowed"

Concerning point number 4, any image on any image website worth its salt will state the information clearly: Unsplash, Creative Commons and Flickr, for example, make it really easy to see. Downloading images from Instagram, Facebook and Google Image search are not recommended, not least because the license information is almost NEVER available! 

Essential #3:  A point for existing

Images are great for filling in a bit of white space, but if that's the only reason that you're adding them to your blog post or website - STOP! Only add images to your web pages if they add real value - illustrating a point, providing information, or giving an example. When you read point #4, you'll see how important is it to prepare your image with at least the SEO basics, but that's very difficult when the image is just decoration. What's more, if your blog post is filled with filler, and the next one in the list is packed with meaty info, sooner or later, you'll see the results in your Google ranking. 

Essential #4: a nod to the basics of SEO

Optimizing images, specifically, is very easy, so no one, whether SEO pro or nervous nellie, should even think about leaving it out. Apart from checking the physical attributes of the image (#5, below), the next most useful thing you can do for SEO for pictures is ensuring you fill in all the image attribution fields, as you can see below. Depending on what platform you use, the fields will be different, but almost all the options you'll have access to will be available if you choose to "edit" the image.  

In Barcelona, on April 4th, 2018, I'll be holding a hands-on workshop for beginners that deals with all aspects of SEO. Join us!

If you're new to SEO and feel like you could do with a hand, I've written an article just for you. If you're getting to grips with SEO and want some pointers with your keywords, check this out!

Finola Howard



Since many of you are on Wordpress, that's the option I've used below. Watch how I navigate to the image section and then edit the options available to me. 

Adding SEO friendly details to an image on Wordpress. The imaginary keyword is "decorative lights", which I pulled out of the air!

Essential #5: the appropriate size

It's hard to pick the "worst" mistake on this list, but one of the problems that I see causing the biggest and most immediate problem on websites resides here, in the realm of the size of the images people are uploading to their website. So many bloggers and business owners have no idea what size their images are - let alone how big they actually should be. If you use images on a regular basis, one the best things you can learn is how to find the size (file size) and dimensions (width and height) of the images you are using. You can then compare them to the very simple benchmarks I give below, and you'll never have a problem again. 

One point: many online services go to great lengths to optimize images for you, enlarging wimpy images and cutting the monsters down to size. While that's great on an infrequent basis, it's not infallible, not equally effective on different sites, and can't work miracles on the real outliers. Most pertinently of all, however, the image services on your website or blog cannot perform the same miracles, and unless you pay attention (or are lucky), images that are too small will look cheap and distorted, and images that are too big will slow your site and/pages down to a snail's pace - and we all know how much Google dislikes that!


Step 1: find out the size of images

If you can't find this info on the web page you download the image from, once you've downloaded it onto your computer, open up file explorer and navigate to the file. If it doesn't already display file size, look here on PC to enable it.

On Mac, the file size is displayed by default. 

Anything bigger than 100KB is too big unless it's a large image that is supposed to take up a great deal of the page (like the image at the top of this post). In that case, make sure it's no larger than 500KB. It's a very rough measure, but should stand you in good stead - it does for me. If your image ever migrates into MB or, god help us, GB, it is way, way, WAY too big!

Yikes - a monster! File size is 1.6 MB, and dimensions (explained below) are 4242 x 2828!

Step 2: Find out the dimensions of the file

On the website you download from, the dimensions should be in the same place as the size was.

On your Mac, click on the image in question, and you'll see the information displayed under the preview of the image. 

On PC, it's the same principle, but you may have to modify the details pane to show "dimensions". You can see how to do this here

It's a blunt instrument, but in my experience, anything less than 500x in one direction will be too small, and anything larger than 2000x in any direction is approaching too big, BUT...

Good quality images, whether you download them or take them yourself, are usually much, much bigger than this. There's nothing wrong with them, per se, they're just too unwieldy to use online without some editing. If you have no other information to use to make a decision about what the size should be, try 1200 x 800. It works for me 90% of the time.

My image is NOT the correct size!

Ok, so you have a lovely image, but it's huge like my surfer above. If you have Photoshop, use it and follow this tutorial to chop it down to size. Once you've done it a few times, you'll be able to do it with your eyes closed. Remember to save for web.

If you don't have Photoshop, there are lots of online tools that can do the same job. My go-to tool at the moment is Landscape by Sprout Social. If one of the presets doesn't suit (for Twitter, Facebook, etc.), use the Custom tool to save to 1200 x 800 or your dimensions of choice. It's worth mentioning that you need to input the dimensions in reverse for some reason, i.e. 800 x 1200. 

Also, bear in mind that tweaking the dimensions of the file will have an impact on file size (making it smaller usually makes the file size smaller and vice versa). 

Summing up: these steps will - and should - become second nature!

If you want the best results from your online images, make sure you follow these 5 steps every time you add an image online. As you practice, it will become second nature, and you'll reap the rewards from the moment you put them online. There are many other tricks and tips you can learn about online images, including protecting YOUR images online, using images on social media, storing and managing images, using photos you take yourself online, and further editing techniques in my online mini-course, Online Images 101, which goes online in November 2017. 

Further information:

Blogging basics: Adding and editing a new post on your WordPress blog

Blogging basics: Wordpress post settings for beginners

How freelancers find great images

How to optimize images for SEO

14 Image Optimization Tips You Need to Know

Image SEO: optimizing images for search engines

Download for use at home!