Using Images On Your Website or Blog

By Charly Leetham On November 18th, 2008 in Blogging /
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
my first digital camera

Image by Patrick Q via Flickr

In todays Stretch Your Mind And Body Blog Talk Radio show, Connie and I discussed using images on your blog and website.

With the technology available for digital cameras now, the quality and size of images that we are downloading to our computer are amazing.  I know that from my digital camera, the images are 600 dpi (dots per inch) and about 2500 pixels wide.  To put that in perspective, 2500 pixels wide is approx. 17 cm.  That is one, very large photo.

If you were to display an image that size on your blog or website – you would more than likely only see a portion of the corner of the photo on your screen!  Not to mention how long it would take to load.

As a result, it is often necessary to resize images to be ‘web friendly’.

The standard computer monitor displays 72 dpi and will generally display an image 640 px wide by 480 px high nicely.  Anything larger may prove problematic.

Let me share some terminology.

DPI or Dots Per Inch – Imagine a piece of paper that is 1 inch wide.  In that 1 inch, there are 72 dots which can be any color (including white).  What picture is shown on that piece of paper depends on which dots are what color, but there will only ever be 72 dots per inch of paper.  This is known as 72 dpi.  If, in that same 1 inch piece, there are 600 dots – this is known as 600 dpi.  Of course, 600 dpi will give a much better picture than 72 dpi.

Pixel – one of those dots, can also be called a Pixel.

The higher the dpi, the larger the file size. The larger the physical image, the larger the file size.

This is simply because the information to ‘make’ that image display has been saved digitally.

The issue becomes that when you are using images on a website or blog, you don’t need the higher resolution of 300 or 600 dpi and the image should be something less than 640 px by 480 px to ensure it will all show on the screen and allow text to display as well.

As a result, it is often necessary to resize the image.  The question is how.  In todays show, I shared three ways to do this:

  1. Microsoft Office Picture Manager – will allow you to resize and compress an image very easily
  2. Adobe Photoshop – may be overkill and prove to expensive, but if you’re doing lots of image manipulation it is a great tool
  3. GIMP – a free open source image manipulation package that offers many of the same functions Photoshop does (see http://gimp.org)
  4. Online Image Resizers – cool tools online.  I recently tested http://www.ezresize.com/ with great success

Connie also mentioned that the software that comes with your Digital Camera may have image manipulation capabilities – so these are well worth checking out.

Connie also asked about ’situating’ an image in a paragraph so that the text wrapped around the image.  This is generally quite easy to do – instead of trying to describe this though I’m going to recommend that you view the video at my How To Videos Central free membership – it will be much easier.  This video also shows you how to use GIMP to resize an image.  You will need to register to view the video – but it is completely free.

View: How To Format An Image To Be Web Friendly

Reblog this post [with Zemanta]
Add to Onlywire |   |  Email This Post Email This Post  | Print This Post Print This Post  |  Subscribe to It!

Leave a Reply