Close
Close

An Introduction to Using Images on Blogs


The following post was submitted by Duncan Riley from the Blog Herald, Weblog Empire and b5media. I asked Duncan to explore the topic of using Images on Blogs. I think you’ll agree that his article below is a very comprehensive exploration of the topic which I hope you will find helpful .

Any good blogger will tell you that images and imagery are vitally important in the development and rise of any good blog, but they are often also quite often the most frustrating, annoying and time consuming aspect of any blogs life as well. None the less its important that you know about them

Types of Images

For ease of use I’ll categorize images on your blog into two categories: design imagery and content imagery. Naturally design imagery incorporates any images you may wish to use in the design of your blog, be that in the header, sidebar or footer. Comment imagery is photos and images you post as part of, or exclusively as a post to your blog. It’s important to understand the differences between the two because although we will be covering a lot of common ground in dealing with both types of images, there are also some separate consideration as well.

Toolbox

Some new blogging tools (such as Performancing for Firefox) allow you to drag and drop images you see on websites and other blogs into your posts, however they serve this image from the source, and that’s generally considered very poor form by most bloggers. You are going to need to be able to save, copy and edit any images you want to use. To do this I would recommend that you consider using Image Manipulation software to give you the freedom to do as you please to your images.

Free vs Paid

Personally I use Adobe Photoshop for all my image editing needs, however, particularly when you are starting out, it would be not dissimilar to learning to drive on a brand new Ferrari. Photoshop is the industry standard image manipulation tool in professional business and is available on Mac and PC, but it’s not a cheap option. Personally I don’t use the latest version of Photoshop because I’m happy with the slightly older version I use as it does everything I could ever want it to (and a whole lot more). You can pick up older versions Photoshop at places like eBay second hand if you can’t afford to buy an new copy off the shelf.

Other commercial programs that are available include Corel Draw and Paint Shop Pro.

If you don’t want to spend money on image editing software though I’d highly recommend downloading The Gimp, which is available for PC, Mac and Linux. It’s a fully fledged Open Source (free) image software package that many claim is as powerful as Photoshop.

Posting Images to your blog

How you post images to your blog is dependent on what blogging platform you use. Most free and paid blogging platforms and hosts these days provide image hosting as part of the package. What you will need to consider though is how much bandwidth/ or traffic your blogging package will provide, and also how the size of the images affects the loading speed of your blog. This is also another reason to have image editing software because programs such as Photoshop allow you to minimize image file size as well. Alternatively you can use a free, 3rd party image host, which will minimize any potential bandwidth/ usage charges or limitations you may have with your blog.

Each individual blogging package is different in regards to how you upload your image to your blog, and many now have built in features to allow you to get the image into your post fairly easily, however behind any WYSIWIG (what you see is what you get) interface, the code is nearly always the same.

<img src=http://www.yourdomain.com/yourblog/image.jpg>

It never hurts to know how the coding works, because understanding it gives you more freedom in editing your image as well.

The html tags work like this:

< > opens and closes the statement in the code

Img src literally means Image on the screen, although it’s important to note that its src nor scr, it’s a common mistake that I still occasionally make today

= is telling the code that the image to the screen equals

“http://……image.jpg” is the image.

That’s the very basic form of image code, and more advanced form is:

<img src=”http://www.yourblog.com/wp-content/image.jpg” width=”400″ height=”201″ alt=”image” align=”right”/>

Some blogging platforms will use code similar to this, others will only utilize the simple version of the code, but no matter what blogging platform you are using, you can use this code to place an image.

width=”400″ height=”201″ tells the browser in which the page is to load the size of the image to load. There is probably some web standards type reason why this is important…just don’t ask me what it is.

alt=”image” The alt tag is very important because it allows readers who are visually impaired or blind to know what the image you’ve posted is about. Only recently Target in the United States has been sued because they don’t use alt tags on their website, on the basis that it discriminates against the visually impaired.

Align=”right” is the attribute to tell the browser where it should place the image, and allows text to wrap around it. If you don’t use an alt tag, the image will appear in the center of your post, and all text will follow under it. Giving it an align=”left” or align=”right” tag, particularly if you are using an image that is complementing your post, as opposed to being a center piece, allows the text to flow at the same height as the image to the right, or left of it respectively.

Copyright issues

Copyright tends to vary from country to country, but in most English common law based societies, the concept of Fair Use or Fair Dealing generally applies to the use of copyright protected images on your site. Basically using an image as an extract/ compliment to a post would normally be considered fair use. Using it as part of your blogs design however would not. Follow the links to the Wikipedia articles for more information on these legal concepts.

Images from commercial sites should always be deemed copyrighted unless it is clearly indicated otherwise, and you should generally consider not using them, unless you are clear on legal concepts of fair use.

There is also another rule in the blogosphere with images, and that’s if you take an image from another blog you provide attribution for that image in the form of a link back to the blog (either within or at the end of the post) attributing the image to that blog.

It’s hard to give a definitive answer on copyright, but I would give this advice: if in doubt, don’t post it.

Where to get copyright free images

The very short answer is Google. Searches such as “copyright free images” and “free stock photos” offer a range of sites you can use, some free, some requiring registration or a small joining fee.

In the past I’ve used services such as Freefoto and Stock Exchange which have a wide variety of images you can use on your blog, both within posts and as part of a sites design.

Free Images Hosts.

Ask 10 bloggers about free image hosts and you are likely to get 10 different answers because there is a huge range of free image hosts out there. Essentially instead of uploading your images to your blog, you upload your images to the free image host and they provide you with the code you need to paste into your post to display the images. Image Host Advisory is the image host directory recommended by Fark and is a good starting point if you are looking for a decent image host as they rank the sites and provide an overview of the various features and limitations.

There is a warning I must give with free image hosts. Although there are a number of free image hosts who have been on the net along time, a lot of these types of services come and go regularly. They may also have time limits on hosting your image, or bandwidth limits as well. They are great to start out with but remember that you run the risk of losing your images from your posts over time, which might not mean much now but will mean a lot in 6 or 12 months time when visitors coming to your blog from search engines such as Google are visiting older posts, and are presented with missing images.

What services are there to help bloggers with images?

There are a number of ways you can make your image experience more enjoyable when blogging.

Forums: if you need help in dealing with images, check out the user forums of your blog provider or host, for example the user forums at WordPress.org are a great resource of information. You can search for people who have had similar problems to you in the past, or you can even post a question.

Support: if you are using a paid blogging service such as TypePad, services such as these market themselves on the basis of their customer support, and since you are paying for it, use it! Email through your questions to their support email address. The may not help directly but they might be able to point you in the right direction so you can find the information you required elsewhere at that service.

Blogs and Bloggers: chances are if you are having a particular problem with images, some one has had it before. Using search services such as Google and Technorati to see if you can find people who have had similar problems, or even solutions to your problems.

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Jim Logan says:

    Great information! About 6 months ago I started adding a picture to every post I publish. I believe it has added to the reader experience and enhanced my site.

    I use Gimp and istockphoto.com.

    A downside to using photos is time. It sometimes takes as long to find a photo to accompany a post as it took to write the post itself :-)

  2. PXLated says:

    Image manipulation software…might want to check out either iPhoto (Mac) or Picassa (Windows) as they are free. Not nearly as full-featured as the ones mentioned but might just meet your needs.

  3. Neil says:

    Darren,

    I have always been a fan of Photoshop for editing purposes, but as a beginning user I was never able to take full advantage of it’s powerful features. I can see how this would cause problems for novice bloggers.

    A very powerful tool that I have recently discovered is Macromedia Fireworks, part of Studio 8. It is somewhat similar to Photoshop but not as powerful and intimidating. It seems to do very well with both layout graphics and general image editing. I would recommend it to any bloggers who are looking for more than Picassa or iPhoto can offer, but not looking to make the jump yet to Photoshop.

    Also, if you are familiar with Dreamweaver, Fireworks integrates perfectly allowing you to move images back and forth seemlessly… I liked that feature a lot, especially as I am now learning how to edit and create CSS …

    I hope this helps some of the readers out there…

    Cheers,
    Neil M.
    Editor
    FilmSchoolRejects.com

  4. Adding height and width attributes helps the browser to layout the page properly before the images are loaded. Otherwise the browser doesn’t know how much space the images will take and you’ll see the page layout change a few times while the images are loaded.

  5. Oh, and the align attribute is deprecated. CSS styles should be used instead. I normally add an inline style attribute to my images to float them to the right ot left:

  6. Julian says:

    src means source, not screen

  7. David says:

    Yeah, I use

    style=”float: left; padding: 5px;” for my images to align then and add a little whitespace around them.

  8. Rob Sanheim says:

    I’m not sure if the Gimp is really the right tool for someone new to blogging and just starting out with html and image posting. Maybe paintshop pro or Ifranview?

  9. Rob – Gimp is free and that might have been the reason for the suggestion.

  10. The Cheat says:

    What about images from services like AP? What is the proper etiquettefor handling them?

  11. Duncan says:

    A couple of comments:
    The Gimp was used because it is free.

    Ianiv, I’m surprised about the CSS/ align stuff because align works a treat for me, and honestly for a new blogger starting out, the last thing they should be worrying about is CSS code in a post.

    Niel
    haven’t used Fireworks for probably 2-3 years. I find Photoshop better at image editing but having said this I haven’t tried later versions of Fireworks. Fireworks is good for one thing though that Photoshop isn’t, and that’s animated gifs.

    Jim

    A downside to using photos is time. It sometimes takes as long to find a photo to accompany a post as it took to write the post itself :-)

    you couldn’t be more right :-)

  12. Kevin says:

    A good free image hosting is Imageshack.us.

    I use them a lot, and they even genrate the code for you to copy and paste into your web page.

  13. I used imageshack. Fortunately Blogger hosts images now.

  14. Peter Cooper says:

    Blog tools like ecto need to be the places that deal with this. ecto has reasonable capabilities in uploading and letting you resize the images, but it’d be cool to go a little further with it.

  15. AK says:

    The question of Fair Use and copyright protection is fairly complicated, but it boils down to this: If you’re using a small portion of the source material (like an image), you’re not taking any business away from the source, or you’re using it for the purposes of satire or study, you’re probably okay. A good layman’s review of the laws can be found at Stanford University Libraries. Images may seem more complicated than text, but they fall under the same laws.

  16. It is embarassing for an artist to admit but when I began working with digital images Photoshop imaging software was either just not intuitive enough a match for me or way too complex for a painter/designer’s brain – or at least this one.
    On the other hand, my 20 & 30 year old daughters, neither of whom draw or paint work with Photoshop without any problem, and both say they actually find it very intuitive.
    I on the other hand am working with Paintshop Pro and it is capable of doing everything I need it to do as far as providing small art for my blogs or larger images of my paintings and other design work.
    So if readers do find Photoshop or another utility boggling, I encourage them not to feel frustrated. You’ve just got a bad match. Luckily you can find many free downloads and I’d advise trying other tools until one is found that matches the way their brain functions.

  17. Mike Power says:

    I’m a Mac user so these apps will only be useful to a few, however I’m sure there are similiar small apps out there for Windows users. They do a small number of jobs easily and well. Most bloggers just want the basic manipulation tools and they want to be able to use them quickly and without a big learning curve. I use PhotoEdit, PicturePlay, EasyCrop, EasyFrame, ComicLife and other stand-alone apps. But I’ve recently found a web-based Web 2.0 site which is absolutely brilliant and allows anyone to manipulate images without needing any software. It will do 95% of what most neebies will want and nothing to learn! Try it at pxn8

  18. QuesoKid says:

    Great post. I particularly appreciated the discussion of copyright. That was exactly the information I was looking for. Thanks a bunch!

  19. binoculars says:

    Wonderful post. Keep them coming.

  20. jr says:

    my buddy’s site has been shut down by the web host for using an image of a cop that murdered an innocent man in New York City recently [Sean Bell] they agreed to take the image off after the guy wrote demanding money and complaining but the host still has the site offline…are they threading too far here?

    beyond wanting his image removed the photographer wrote to say he also disagrees with the sites political message…what do you guys think?
    check it out here http://propagandapress.wordpress.com/

  21. SpicePuppy says:

    It looks like other readers beat me to my comments. Yes, src refers to the source (filename) of the image, and width and height attributes help the browser lay out the page.

    Back in the mid 90s, if you had an image and didn’t specify the width and height, no text below the image could be displayed until the image had been completely loaded, which could take a while. By specifying the dimensions, the browser could set aside space for the image so it could display all the text right away and then load the image. Even though the total time required to load the whole page was the same, it gave the appearance of loading faster because at least all the text was displayed quickly.

    It’s not so critical to use width and height today, but it’s still a good practice. You can also specify a width and height different from the actual width and height as a shortcut for resizing the image. However, increasing the size in this manner may degrade the quality, and decreasing the size would result in a bigger file size than necessary.

  22. Hello,

    And what about using products photos on website where you have Adsense ads, is it illegal ?

    For example on luxurylaunches, luxist, or bornrich ?!

    I guess they don’t have any right on these photos ?! Why doesn’t Google Adsense complain ?

    Thanks.

  23. I never knew that posting images as part of your post is considered “fair game”. I will definitely start doing this on my office trends type blog.

    The part I disagree with for gaining legal information is Wikipedia. Anyone can write anything on this site and can alter it as they wish. One site that I use on a regular basis is http://www.allexperts.com.

    This site has quite a bit of volunteers that truly and sincerely (hopefully most of the time) provide real answers to your questions. The best part of it is that it’s all free.

    Thanks,

    Richard Rinyai
    http://www.theprofessionalassistant.net

  24. LW says:

    Here’s an AWESOME alternative for any blogger running Mac;

    Photoshop, Gimp etc are all quite “heavy” and annoying to use for a small image-related task. The little program ImageWell will be sufficient most of the time;

    http://www.tuaw.com/2007/07/09/imagewell-receives-big-update/

    get it.

Trackbacks

  1. [...] An Introduction to Using Images on Blogs [...]

  2. [...] An Introduction to Using Images on Blogs The following post was submitted by Duncan Riley from the Blog Herald, Weblog Empire and b5media. I asked Duncan to … http://problogger.net/archives/2006/02/21/an-introduction-to-using-images-on-blogs/ [...]