Images 101 for Bloggers

This guide isn't about taking photographs - we've all seen my dubious skill in that department! (Though if you are looking for info on that, check out Photographer Touch's guide to photography for beginners.) Instead, it will look at how to optimise images for your blog and various social media networks.

On Your Blog

Generally speaking, the most important image in your post will be your 'pinnable image'. This usually goes at the top of the post and is the one that draws readers in, and gets shared on social media. Pinterest likes vertical images - the optimum size being 736 x 1104 pixels - and high resolution, so that is what we aim for.

You don't need expensive photo editing software to 'pimp' your feature images either. PicMonkey is an online photo editing tool offering tons of options, from basic cropping and resizing, right through to fancy touch ups and funky filters. Another must try is Canva, an online graphic design tool which enables anyone to easily create professional looking designs for free.

Once you have your image, you need to host it. You might upload it directly to your blog, or you can host it on a third party website like imgur, imgsafe or imageshack. To display the image on your blog you will be using HTML - even if the blog's interface is doing it for you.


The most used aspects of the above will probably be the size attributes. You can specify the size of your image in pixels or, and this is advisable to make your blog look better in mobile view, you can use relative sizing. For example, using width="50%" will make your image fill half your blog panel, no matter what device it's viewed on. The general consensus with images is that bigger is better, so go for width="100%". If you find the large sizes are slowing down your page loading time, you can use an online tool like tinypng to compress the file. (Check out this really handy post from Magic Picture for more compression tools.)

Also, make sure you are adding in alt tags. They're not just there for screen readers, they serve as SEO (search engine optimisation) keywords and become the title of the image when you share to Pinterest, etc. You might want to rename the image itself for similar reasons; you can stick in your blog name, for instance, and be sure everyone who right clicks and saves the picture knows where it came from. Because, while you can add your blog name into the image itself (as I've done above), it can easily be cropped / blurred out, etc.

You can use various pieces of code to protect your images - e.g. class="nopin" in your image HTML will prevent people from pinning to Pinterest, or javascript to disable the ability to right click and save. Beware, though, that there is always a workaround, and if somebody really wants the image, they'll be able to get it. One way to find out is via a reverse image search tool like TinEye. Realistically though, the only way to be 100% confident your image won't be taken and reused elsewhere is not to upload it to the internet.

Let's Get Technical

There are a number of different file formats in use for digital images. The three you're most likely to come across are:

JPEG: (AKA .jpg) Named for the group which developed the standard, the Joint Photographic Experts Group, back in 1992. Many digital cameras save in this format as default, and it's popular on the web as the quality remains relatively high though the file size is very small, enabling faster load times. For lots more information and trivia, visit the JPEG website.

GIF: Graphics Interchange Format has been around since 1987, and uses only an 8-bit colour palette. The file size is small and not great quality. But. GIF is still cool because it allows you to create short animations in a reasonable file size. There are lots of different online tools which will help you do this, like giphy and giffingtool. Here's one I just made with giphy:


PNG: The new kid on the block, having been established in 1996, PNG stands for Portable Network Graphics. PNG files tend to be bigger than JPEG, but they are less likely to lose quality when resized, and support transparency. (You can cut out any image you like and put it on a transparent background with free online tools like CutMyPic.)

On Your Social Media

Facebook: The problem with sharing to Facebook is that it often pulls whatever image it feels like from your blog, rather than one which actually relates to your post. To fix this, edit the template of your blog to include xmlns:og='http://ogp.me/ns#' in your top HTML tag - you'll see similar xmlns: code for google. Once that's done, paste the following above the </head> tag, switching out BLOG LOGO URL for the relevant link. (If Facebook can't pull an image from the post, it'll then share your blog logo instead.)

<b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <b:else/> <meta content='BLOG LOGO URL' property='og:image'/> </b:if>
Pinterest: This network is one of the big reasons why you're putting so much effort into images. It has the potential to drive huge amounts of traffic, so the brighter and more eye catching the better. For more information on making the most of Pinterest, check out my guide on How To Grow Your Blog With Pinterest.

Twitter: Even everyone's favourite micro-blogging network is getting more visual these days. Using Twitter cards will pull more detail when you share your blog posts, and a number of them will take your post's first image too. Learn more about them HERE.

Can't Photograph, Won't Photograph

All this talk of images can bring us camera challenged types out in a cold sweat. I can point and click, for sure, but the end result tends to look far from spectacular. Fiddling about on PicMonkey will only take them so far. The problem is that most images on the web are copyright protected - and if the copyright holder asks you to take the image down, you must, and they still have the right to sue you for it. (I'm planning on writing more extensively on copyright issues for bloggers in the future but, suffice to say, UK law doesn't have as generous allowance for fair use as its USA counterpart.)

You can get around this by embedding images from Flickr, Instagram, DeviantArt, etc. The websites will provide embed code for you, usually in the 'share' section, if the uploader is happy for people to do that. You can do the same with Getty Images, which is a particularly good source of pictures of celebrities and current events.

But what happens when you want to modify images?

You can buy images, from stock image websites or direct from source, but this can quickly add up. Luckily, the web is bursting with free to use images, providing you know where to look for them:

Images with expired copyright. In the UK copyright usually extends 70 years past the date of someone's death, so that means there are plenty of usable photographs and illustrations out there. A good starting point is the million plus images on The British Library's Flickr account. New Old Stock is a fab resource for vintage photos too.

Images with relinquished copyright. If you're a generous soul, you can donate your images to the world by using a CC0 (Creative Commons Zero) license. (There are a range of Creative Commons licenses, with some requiring attribution or only non-commercial use, so make sure the image is CC0.) Here are 25+ of my favourite sources of free stock photography, mostly small indie collections, to get you started:

• Creative Market. (Sign up to the newsletter and get free stuff every Monday.)
• Cupcake.
• Death to Stock. (Sign up and get sent 10 pics a month.)
• DesignersPics.
• EyeEm.
• Free Nature Stock.
• Freestocks.
• Get Refe.
• Good Free Photos.
• Gratisography.
• ISO Republic.
• Jay Mantri.
• JD Designs.
• Kaboom Pics.
• Life of Pix.
• Little Visuals.
• MMT Stock.
• Moveast.
• Negative Space.
• Pexels
• Picjumbo.
• Picography.
• Raumrot.
• Skitterphoto.
• Snapwire Snaps.
• StockSnap
• Startup Stock Photos.
• StockVault.
• The Light Painters Loft.
• Travel Coffee Book.
• Unsplash.

Another option is to search images marked CC0 on Flickr. I've got a dedicated Flickr album for photos I've taken or been given copyright of (this includes photos of landscapes, bikes, and myself taken by my dad) and relinquished under CCO. For even more resources, check out Wikipedia's awesome list.