Tuesday, May 11, 2010

Good practice on adding images to Blogs

Rocktime runs a number of social media campaigns for our clients. With the tech media reporting that blog readership is increasing, supported by our own observations that blogs are a good way to drive traffic to our client websites, we are increasingly advising our customers to set up their own corporate or brand blogs.

Another advantage of creating a blog is to improve Search Engine Optimisation (SEO) results:, back in June 2008 Hitwise reported that on average 27% of a blogs page views come as referrals from a horizontal search engine, as blogs get cached in search results.

Generally we run the blogs in-house on behalf of the client using a ‘hand holding’ approach for a period of 3 – 6 months. We begin by creating blog post plans around topical subjects and then, when there is an in-house resource, ease the client slowly into taking on the blog themselves.

After speaking with bloggers (via social media networking) we understand that a problem area which blocks their posting is adding images to their blogs. They ask questions on how to correctly upload images, where to source images, the legal implications involved in using a copyrighted image which is not their own and how to crop and resize. They are also concerned about file sizes, based on Google’s recent Algo update.

In an attempt to help the majority of bloggers and our blogging clients thanks to Foz our Creative Developer, we have created this Q&A blog post outlining a good practice guide to adding images to websites.

To kick things off we would firstly like to recommend Paint.Net for non-designers for those who may find Photoshop to be too complicated. Paint.Net is a free image editor which is more advanced than Microsoft Paintbrush and has all the essentials for your image editing. Basic features include crop, rotate, resize images, adjust colours, adjust file size and create collages; there are a variety of other useful tools within Paint.Net, but we will let you discover these as your confidence in using the image editor grows. For now we will focus on the basics on using Paint Net.

An alternative option is the snipping tool software available within Microsoft Office (Windows Vista, Ultimate) which allows the user to crop images straight from the screen and save to clipboard. Within the snipping tool softeware are also a few simple tools available under options, allowing you to email image, add a border etc.

There are a number of image libraries available, Rocktime recommend iStock Photo for low cost but great quality images. Should you need extra advice on finding and using then give us a call.

Foz (Web Designer) answers your questions on online images

Q: I have downloaded Paint.Net. What do I do now?

A: You need to open up a copy of the image within the software. If you’ve saved a copy to your computer go FILE > OPEN and browse to open the image from it’s saved location.
If you’ve found an image online that you want to use, make a mental note to check copyright issues (which we will examine later), then:

1. Right click to copy it. Click File New (this will open a blank image the same size as the image you have stored in your clipboard)

2. Paste it into the white background

3. It is good practice to size the image for your blog so:

Always make sure that ‘Maintain aspect ratio’ box is ticked to ensure that your image doesn’t get stretched or squashed (it will generally be clicked on default and appears under highlighted By Absolute Size)

Q: How can I create a square image to fit into social networks?

Ask Rocktime to produce one for you or use the Paint Net crop tool (box with dashes) and pick out a square by dragging the box and keeping eye on bottom left hand corner, which highlights the dimensions of the image. When the two dimension measurements are equal you then have a perfect square.

Go to your image – Crop to selection then you can resize your square to the size as specified by the social network. If your image started off life as a photograph then save as a JPG; if it is a graphic or text image then save as a PNG. Do not worry about the other compression formats.
When you save as a file type it will then give you a preview box of the quality of the image and show the file size. You can reduce file size by reducing the quality - sometimes by reducing the image quality by just 10% the file size can be cut by more than half!

Q: What would you class as a high file size? I noted a few social networks say an uploaded image can’t be larger than a certain size?

A: The main consideration is what the total file size of the page will be. If you have a really sharp image that’s very large the chances are that the file size is going to be pretty big. If this is the only image on the page this shouldn’t normally be a problem for most connection speeds. If however you have lots and lots of large images you page could end up taking a while to load... and your readers may get bored waiting. But, as a rule of thumb, anything under 100KB should be fine.

Q: I use Blogger and it automatically re-sizes my images. Do I need to bother with above?

A: Blogger automatically re-sizes images to a 400px width to reduce the strain on their servers, so you don’t need to worry about resizing your images.

Q: How else can I use this free image software?

A: You can also make adjustments to your image using the relevant drop down on the Paint.Net navigation bar. You can play around making images black and white, have a go at getting rid of spots with the airbrush or try making a cloudy photograph look like it was taken on a sunny day. A list of tutorials that will help to build your skills is here

Q: I want to add an HTML badge to Facebook Fan page. How do I work out the width?

This is pretty easy using Paint.net. Go to the Fan Page, copy the whole page using “Alt and Print Screen” and paste this into your Paint.Net new window. Then, while using the crop tool, keep an eye on the box in left hand corner - notice the dimensions change as you drag the box around the page. Once you have cropped an area you will see the size. If you have any problems ask Rocktime for help.

Q: Where can I source images for my blog?

Google image Search and Flickr are popular and easy ways to source images – but be wary of infringing copyright. If you are uncertain as to what you can use, royalty-free images can be sourced from many websites: we recommended iStockphoto.com as a good place to start.

Q: What copyright rules should I be aware of?

For the purposes of copyright images are considered under the term Artistic works. These can be: photographs - charts - diagrams - maps - graphs - cartoons - decorative graphics - illustrations - building plans - sculptures - drawings - paintings - logos - engravings - sketches - blueprints - moving images (films and TV broadcasts) If you have images or photographs which you would like to put on the internet you must check that permission has been given for them to be published in this way. If you are not the rights-owner and you do not know that the artist/photographer has been dead for 70 years then you will need explicit permission to publish. If the photograph contains images of people, you must also check under privacy law that they are unidentifiable or that their permission was given for their image to be used. Images of children of 18 or under cannot be used in the UK unless you have parental permission, or the image has been obtained from a commercial image which will have obtained the relevant images.
If you have any further questions on using images on blogs or on your website feel free to contact us via this blog post – we’d love to hear more of your own observations, problems, hints or tips.

If you would like to talk to us about running your own corporate blog or personal blog then we would love to hear from you talk to Rocktime Sales.

Author: Paul Forsdick


Post a Comment