The Help Centers

Help, News and other information for success in life on and off the web.

The Help Centers header image 2

Image sizes and other tips. For REAL this time!

January 15th, 2008 · No Comments

Paintshop ProImages, yes those things that speak a  thousand words.  So often are pictures are misused, abused stolen, or worse used  as after Christmas party blackmail.    But there are a few tips on using images can make your site work a LOT better.
Read More Below...

  • First off  DON’T STEAL.   You may get away with it but DON’T STEAL them.  You can always look for Creative Commons licensed materials.  You can even search for them on Flickr.  I could go into more detail on how to get images legally and politely for your website. But I’ll leave that for another day.
  • Don’t use a third party to host your images or hotlink unless you are SURE you have  permission and they are reliable.  Hotlinked images can be banned easily leaving you with a missing image or worse an image saying that this image is blocked due to bandwidth restrictions.  I’ve seen this happen on many a page. The worst is when it’s a background image.
  • Resize properly,  in HTML the height and width properties are often used to resize the image to fit.  While this works and is an easy fix most browsers do a HORRENDOUS job rendering the image.  I once had a client who’s webpage took about 1 minute to load.  I took a look and the overall page size was 1.2MB I found an image that was displayed at 100×100 pixels.  The REAL image size was 1028×1024.  Not ONLY did the image look bad it was slowing the page down, and burning through bandwidth.    You can use  a program like irFanView(free),  Paint.Net(free), Paint Shop Pro Photo X2  or many other programs.  Resize the image to what you want to display it at.  THEN use the height and width attributes to simply make the page seem a bit snappier when loading.   Don’t be afraid to create several versions of the same image to meet your different sizes.
  • Start with a large high quality image don’t start with the small 16 color and expect to resize it and increase the colors and get a great image.  Try an work from the LARGEST POSSIBLE MOST COLORFUL LEAST COMPRESSED image.  This way you’re working from a good copy.  Thing of the old cassette tapes.  When you made a copy the copy didn’t sound as good as the original and as you copied the copies they sounded worse and worse no matter how good the tape you were copying onto was.   Start clean to finish clean!
  • Use the right format.  There are 3 primary formats for images on the web.  GIF, JPEG(or JPG’s) and PNG.  PNG support in Internet Explorer is iffy so concentrate on using GIF’s and JPEG’s.  The rule of thumb is that when using photos use JPEG’s and for simple images that don’t use a LOT of colors use GIF.   There are a few more things to this but that simple rule of thumb should work.

While this isn’t an exhaustive group of tips.  It SHOULD help you get started on what to do when placing images on your website and avoid looking too amateurish.

Tags: Web Development

You Comment I follow!

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.