Using images on your website.

So you have a website you want to design for a client, and using know where to start, images, videos, what style type, music and many other options, in this series of blog posts I'm going to go over some of the techniques that I use, along with some of the sites i use for reference when assembling a website.

Im absolutely no professional but i figured if i could save you some time, and make the design process a bit easier it would be helpful, so let's not rip me apart and critique me till my flesh burns, be nice......

I guess a good place to start is photos, where do you find photos that you can use on your website, what size should the images be, and what are some good techniques for using photos. Let's start with some great sites to get free to use pictures, I've listed a couple here for your browsing pleasure, remember alot of photos you see online are not yours to do with as you please.

Here are a few places you can find photos to use on your website:

I was told about this site from a friend of mine, I haven't used it much but they seem to have a plethora of images can use on your site.

Getty Images

Flickr is a great place for pictures their earache engine will allow you to select common license pictures which are free pictures you can use edit or whatever. I use this site exclusively for my free pictures.

Flickr - select common license in this form.

Once we have selected a picture or two for our site, we need to think about sizes, some images can be quite large, and take considerable time to download, you need to think about your viewers and the different ways they will be viewing your site, for instance someone might be viewing your site from home on a computer that's connected to a fast Internet connection, but on the other hand you may have someone using a cell phone to view your site and be limited by bandwidth.

Here are some tips to make sure your images are not weighing your pages down:
DPI
Make sure you create your images at no more than 72 dpi (dots per inch). Higher dpi won't improve quality much and it will make the image file size much larger, slowing their load time. Photos taken with a digital camera are often 300 dpi. Make sure to compress any digital photos before trying to use them on a web page.

Resizing
Never resize your images in the html code (by changing the width and height tags that tell browsers how to display your images). If you make the photos look bigger than they really are, the image quality will be very poor. If you force them to be smaller than they are, the filesize will remain larger than necessary and the image will load slower than it should.

Instead of resizing images in the html code with height and width attributes, use an image-editing program like Adobe Photoshop or Macromedia Fireworks to physically resize your photos (and also compress them for file size).

JPG or GIF
Generally it is best to use JPG format for photographic images, although if a photo has large areas of a solid color, the file size may be reduced by saving it as a GIF.

That should get you started on placing images in your website, on my next blog post in this series i will be video in your website and some great tips and tricks you can use to add video to your online masterpiece.

Peace....