Skip to content

A podcast for those who design, develop and run websites.

Boagworld is the personal website of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast along with Marcus (pop star) Lillington on all things relating to building and running websites.

Latest shows

127. Context
In this week's show we discuss taking context into consideration when designing websites and we answer your questions about video for an elderly audience and the most influential books in the industry. 
126. Scaling
In this weeks show we learn lessons from the botched iPhone launch here in the UK. We chat to Jeff Veen about the designer / developer relationship and Marcus talks about adding jingles to your website.
125. Copy
In this weeks show we discuss how to give personality to your site copy and we talk with Elliot Jay Stocks about going freelance.
124. HTML 5
In this weeks show we explore how to create better online surveys and Lachlan Hunt joins us to discuss HTML5
123. Plight
In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

or view all shows

Have your say

Leave a message for the show...

Buy my book: The website owners manual. A book for all those involved in designing, developing or running websites on a daily basis.

Design 101: Imagery

Published on: December 3, 2005 by Paul Boag

Whether you are a developer or a website owner, sooner or later you will have to deal with imagery. Even if a designer has set the style for your site, the chances are you will have to work with content related imagery. This post makes a few suggestions about how to use imagery to enhance your existing site rather than undermine it.

Adobe Photoshop if you can lay your hands on a copy). All you need to learn is how to resize an image and then how to save it compressed for the web so that the file size is as small as possible.

There are two images types, which get used most of the time online; gifs and jpegs. Gifs tend to be good for flat blocks of colours such as logos or illustrations while jpegs are better for photographs. Whichever format you use, make sure you keep that file size down!

Anything to add?

So that about wraps it up. What has your experience of working with imagery online been? Do you have any tips to pass on or questions to ask? If so post them here.

Comments

Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email

  • Post by Nora Brown on December 3, 2005 2:32 AM

    Paul and others -
    I was wondering if you could refer me to a few sources for reasonably priced stock photography for the web. Of course I loathe the whole idea entirely, so if it was stock photography that didn't look like stock photography, that'd be great.

  • Post by jyoseph on December 3, 2005 5:28 AM

    Great write-up, Paul. Great practical advice that should be easy for anyone to follow.

    Good advice on limiting file sizes as well. I'm guilty of not compressing my images enough on my photoblog. I figure for this purpose it's ok to leave them a bit large. But for the sake of developing for someone else, page speed is most important.

    One thing I've seen; People using a 600px by 600px image and then resize the image using the width and height attribute (width="300px" height="300px"). It would be better, like you said, to resize the image in an image editor and upload the 300px image to the server. (instead of serving up a 600px image and resizing in the browser). It's novice mistake and not too common, but worth mentioning I guess. (I only mention it because I did it when I first started coding) :P

    Here is a decent link for those who may not be familiar with the "save for web" function in Photoshop.

    Save for Web - Article from Adobe.com

    Cheers!

  • Post by jyoseph on December 3, 2005 5:33 AM

    And actually, this tutorial would be better. I didn't realize that the adobe site didn't give an in-depth tutorial using an image as an example

  • Post by Paul Boag on December 3, 2005 10:37 AM

    Hi Nora,
    my personal favourite is www.alamy.co.uk. They have the biggest collection of imagery I have found and the prices are very reasonable. Also for some reason I find these less "stock like" than many of the sites around.

  • Post by Paul Boag on December 3, 2005 10:39 AM

    Hi Jyoseph,
    this is an excellent tutorial on image compression! Thanks for sharing.

  • Post by Nemanja on December 3, 2005 4:13 PM

    www.alamy.co.uk is very nice site, I was and still use www.istockphoto.com you can find nice looking photos at great price.

    Nice article Poul...

  • Post by Ed on December 15, 2005 12:02 AM

    What do you make of the free Stock.XCHNG stock photography site?

  • Post by Ed on February 25, 2006 9:46 PM

    At colrpickr you can click on a colour, and it shows you lots of photos from Flickr that have that colour in them. You could check the licence of the photos to see if you could use them on your site to fit in with your colour scheme!

Leave a comment

Additional Information

Supporting boagworld

Boagworld only exists thanks to the kind support of the following people. Check them out.

Speaking and writing

Supported by feed.informer.com