Monday, 16 May 2016

Images 101 for Bloggers

Images 101 for Bloggers


This guide isn't about taking photographs - we've all seen my dubious skill in that department! 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.

HTML for IMAGES
For more HTML help, check out my Basic HTML for Bloggers post.

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:

Marianna in a bouncy chair

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.)

*Note: Digital photographs have embedded metadata - information about when it was taken, what device was used, and sometimes even where it was taken. If you have privacy concerns you might want to strip this metadata before you upload the file. For more info, check out this great post from Technorms.*


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.)


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.

Optimal sizes for social media images


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.

light at the end of the tunnel
Example of an embedded image.

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:


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.








For more like this, please click the image below:
Blogging Guides




50 comments:

  1. This is such a useful post, particularly the stuff about optimum sizing for images! Thanks for sharing :)

    Anoushka Probyn - A London Fashion Blog

    ReplyDelete
    Replies
    1. Thank you! I'm psyched you found it useful :)

      Delete
  2. This is such a great post. Some really helpful tips!

    xx

    ReplyDelete
  3. Oh wow, so much amazing information here, thank you! I must admit, images are something I am still slowly learning about. I find Picmonkey brilliant for editing, but there are so many tips here I'd never considered. x

    ReplyDelete
  4. Super useful post! Thanks for providing the list of sites where you can obtain images. And explaining more about copyright. I've been researching this topic lately and it can be hard to find information. :-/

    ReplyDelete
    Replies
    1. It's such a minefield, isn't it? When you throw in all the variations across the world, it's a nightmare! x

      Delete
  5. I am going to bookmark your post it is so useful that I know I will be referring back to it time and time again, thank you xx

    ReplyDelete
  6. Really useful post. I have bookmarked it! #truthabout

    ReplyDelete
  7. I found this so useful especially the tech part. I've saved this post for reference x

    ReplyDelete
  8. Hi, very informative article.
    Please also check out https://www.goodfreephotos.com for thousands of unique public domain photos, all high-resolution and free to use for any purpose. We update with 20+ photos each week. Appreciate it if you could add us to your list of sites.

    ReplyDelete
    Replies
    1. Thanks for letting me know - I've added it in. :)

      Delete
  9. Wow, so much useful info here - thanks for sharing! I'll be back! #thetruthabout

    ReplyDelete
  10. This is really useful, thank you - especially the list of free image sites. I haven't heard of all of themx #KCACOLS

    ReplyDelete
  11. Some very handy information here for everyone. Thanks for sharing #KCACOLS

    ReplyDelete
  12. This is really helpful. I am wanting to improve my images and this post will definitely help me to do that.
    #KCACOLS

    ReplyDelete
  13. I'm saving this to read later when I have more time to go through all of your advice! Great post #KCACOLS

    ReplyDelete
  14. Ah, thanks for this. I'm always looking for good photo sites for when the ones I have just won't do!

    ReplyDelete
    Replies
    1. I end up trawling through loads of them usually, looking for the 'right' image!

      Delete
  15. Hi Jessica!! Thanks for sharing this helpful post with my NO RULES Weekend Blog Hop! I have chosen this post as one of my Monday Special Features.

    If you'd like to take a look here's the link:
    http://lifeasweknowitbypaula.blogspot.com/2016/05/monday-special-features-12.html

    Have a great week :)

    ReplyDelete
    Replies
    1. Thank you so much! I'm so glad it's been proving so useful for people. :)

      Delete
  16. Such great information here! Really useful. I've bookmarked this so I can come back and read it again and again :)

    Laura xx
    Thanks so much for linking up at #KCACOLS. Hope you come back again next Sunday :)

    ReplyDelete
  17. very very helpful! thanks for sharing :) I also love Canva #KCACOLS

    ReplyDelete
    Replies
    1. Canva has made a huge difference to my life!

      Delete
  18. wow you are so knowledgeable! I had no idea that you could host images on a separate site, I really need to look into this.Thanks for sharing x #KCACOLS

    ReplyDelete
  19. I literally had no idea about most of this. I knew there were optimal images sizes for different things but no idea what they were. Soon i am going to start putting into practise what I learning from you! thanks so much xx #kcacols

    ReplyDelete
  20. I have saved this post s it's very useful! Thanks for this! xx

    #KCACOLS

    ReplyDelete
  21. Wow, such a detailed, useful post! I love taking my own photos for my blog, but that list of places to go for images is really handy for future reference! x #KCACOLS

    ReplyDelete
    Replies
    1. I try to take my own, but sometimes I just think, I'm not even going to attempt it! :)

      Delete
  22. Thank so much for all of the very helpful information. I have recently been introduced to Canva and love it as I am not very savy with these kinds of things. Looking forward to learning more from you. #KCACOLS

    ReplyDelete
  23. Hello Jessica,
    thanks for this great post with so many tips!
    many greetings to you
    Uwe

    ReplyDelete
  24. Great post! I've been struggling with where to find free images to use without getting into trouble so this has been a big help! Thank you x

    ReplyDelete
  25. This is FANTASTIC Jess! Especially the extensive list of where to find stock photos, it's something I often struggle to find heading to pixabay too often. #blogstorm

    ReplyDelete
    Replies
    1. Thank you so much! It really means a lot :3

      Delete

I love to hear from you, so please don't be shy!

newerPageTitle olderPageTitle Home