Using images on your website

The thing to remember about using images on your website is that any image you use should be there to enhance your visitor's experience. Too many times we see images that are too large in file size, dodgy quality or just plain bad photos. If you're going to use photos make sure they're good quality – not happy snaps. It really makes a difference.

The most important point to remember is that the content management tools on your website will have a limited set of tools for handling images. When you upload images they may be automatically re-sized and you may have the option of creating a thumbnail (crop) of your images. This is quite common practice and avoids some the problems discussed further on when we talk about 'picture ratio'.

Images can only be 'manipulated' on the web to a certain degree and with limited success. That is why there is a whole host of image manipulation software out there to help you get the best image possible. Some of them are free and not well known like http://www.gimp.org/ and some of them are well known and very expensive like Photoshop which is available from http://www.adobe.com.

These applications will allow you to re-size images, rotate images, change the colour of images, save as different file types and a whole host of other tasks that you wouldn't be able to do through a normal web content management system.

OK, so here are some tips on making sure you use the right types of images on your website.

File size

Remember, the larger the file size the longer it will take for a browser to download, and the longer your visitors will have to wait before they can see the image. Files for the web should be around 100Kb at the most. An exception to this is if you have photos that need to be large to show the quality or workmanship of a particular product (like an antique or a piece of woodwork, carving or painting).

Don't be fooled into thinking that you can simply download a photo from your digital camera or scanner and add this to your site. Most cameras will produce a photo of around 5-6Mb in size. You will need to use photo manipulation software like Adobe Photoshop or Adobe Fireworks to compress the image and change the layout or composition to make it suitable for the web.

Note: Some content management systems allow you to reduce the size of images in their WYSIWYG (What You See Is What You Get) editors. Usually this does not change the file size, only the image size.

Picture ratio

When uploading a picture to your website you should consider where your image is going to be used. Depending on the design of your site it maybe that you have a design requiring portrait images to make the design work or visa-versa.

This can cause a problem if you sometimes have a an image of the wrong orientation that you wish to upload to your website.

In order to show images at the correct size and scale wrong size images are sometimes squeezed or squashed to fit in the correct space but this distorts the image and is not aesthetically pleasing.

Another alternative is to add a border or frame to your image which will make it the right size and orientation. While this does not distort the image by squashing or squeezing it – this process can result in the image being smaller than it needs to be and therefore some detail maybe lost.

Finally, we can crop the image. This involves selecting a part of the image that is the right size and orientation.

To demonstrate this we can use the following image as an example:-


If we apply each of the common methods for displaying an image at a fixed size on a web page then these are the results that we would get.


emediates file upload tool will attempt to resize your image to the best possible size and present you with an option to crop the image so that the aspect ratio remains the same. This means you do not get a squashed image or one with an unsightly border but an image with a section of the original displayed at all times.

Image size

The image size is the size of the image on screen. This is typically measured in pixels.

As a rule of thumb, photos should be no bigger than 200 x 200 pixels. Please note this is only a general guideline and not a hard and fast rule. There are always exceptions.

Here at emediates, when our design team present you with a proof of your website that is when we are suggesting what size we think we should display images on your website. Often our designs are such that we show uses a thumbnail and then build in functionality which 'pops up' a full sized version of the original.

Below is an example of how a thumbnail image seen first can expand into the original full sized image in the second screen grab.

Note how we even keep the aspect ratio of the picture! While the thumbnail is a portrait section, the original is landscape.

Quality of images

It always amazes me how many people consider themselves to be great photographers. I bet if you asked them what thought needs to go into taking a great photo, many people wouldn't know the things you need to take into consideration. If you're going to take your own photos for your website, I highly recommend going to a few photography websites and brushing up on some photography skills.

If you're going to use stock photography, there are some great paid and free sites available on the net. One of the sites that we use here at emediates is www.istockphotos.com


Image file extensions and how to use them correctly

The file extension is the type of file your images are saved as. For example if you get an image called familyphoto.jpg then the file extension of this image is .jpg There are a few different file extensions when it comes to images on the web. Some of the more common file extensions you will come across are:-

  • gif

  • jpg or jpeg

  • png

  • bitmap or bmp

  • eps

  • psd

  • tiff


Here's a rundown of each file extension and what they mean:-


GIF

GIF stands for 'Graphical Interface Format'. This type of format is best used for computer-generated images like logos and graphics.

JPEG

JPEG stands for 'Joint Photographic Experts Group'. This format is best used for photos on the web. Do not use this format for logos or graphical images as they will turn out pixelated and look really ordinary.

PNG

Stands for 'Portable Networks Graphic'. Not many people use pngs on websites, however they are very useful if you need an image with a transparent background.

BITMAP

Saving your image as a bitmap means that you will save the image as a series of dots or pixels. Jpeg and Gif formats are more common.

EPS

The EPS format is used mainly for print work. If you have an eps file you will need to convert it to a jpeg or gif for use on the web.

PSD

The psd format is a Photoshop file extension. If you have a PSD file you will need to convert it to a jpeg or gif for use on the web.

TIFF

The tiff format usually makes your images a higher resolution, so this file format is not great for the web.

So here are some helpful tips and hints for using the correct type of images on your website. If you have any questions, send an email to graham@emediates.co.uk