6 Basic Uses for Images and Graphics

Generally speaking, we think of having images and graphics on a website or blog as a good way to make it more attractive. However, images can be used in other ways to enhance your pages and highlight certain elements. 

1. Image or Graphic Logo

The obvious use for an image is for the logo – or ‘brand’ – for that website or blog. You want to have an image that is always associated with your website and your business. You can use different variations and sizes of that ‘branded’ image, but you want to maintain the continuity of your ‘brand’ by using the same colors, fonts, and having one singular image that the visitor will always associate with your website.

2. Background Images 

Click here to see a tiled tableYou can create a wide variety of background images using graphics to draw attention. These backgrounds can be used on pages, as table backgrounds, or even in specific parts of a table, i.e., row or column. Since background images tile, the background will be covered with as many images as needed to fill the space. This means you only need to upload 1 relatively small file that when ’tiled’ will fill in the whole area .

Example: You have a background image that is 150 pixels x 150 pixels. You want to use it in a table that is 600 pixels x 300 pixels in size. On viewing the table, the background would display the image in a configuration of 4 columns x 2 rows – thus filling in the whole table area neatly.  [ Click on the image to see how a tiled image would display in a table 600300 pixels in size.  ] 

3. Image Maps

 This allows you to take any image – and by using the ‘image map’ code within the HTML page – link from portions of the image to any other page or website simply by clicking on the image’s ‘mapped’ sections. This is a useful tool if you want to use a map, storefront-style image or navigation bar for creating hyperlinks. 

Example:  The ‘clean’ navigation bar would be the image the viewer would see.  The ‘highlighted’ navigation bar shows the areas of the image that would be ‘mapped’ and clickable as links.



4. Single Hyperlink

Images can be displayed as a button or other unique graphic to be used as a link rather than a word or phrase. Having a graphic makes for a more attractive page and helps the visitor locate the link more quickly. While you probably wouldn’t want to use a graphic link in mid-sentence, they are particularly effective for forms or conversion pages.



5. Shim Pixel

 A  transparent shim pixel is most commonly thought of as being used for inserting blank space into HTML pages. For example, you may want more blank space to separate text or pictures; maybe you may want to move something to the end of the line to draw attention to it. Using pixel shims is one way to accomplish this.

To use pixel shims you create an image 1 pixel x 1 pixel in size and save it as a transparent image. Then when you want to insert blank space, you simply insert the transparent pixel image and assign the size of ’empty space’ you want. Since the shim is only 1 x 1, it will virtually be unseen if left at that size, however, when you assign different height and width parameters – it will take up that area and still remain invisible.


6. Animations

 Use animated graphics or images to showcase different aspects of one image, rotate banners, or create a ‘flashing’ effect with alternating colors of text or backgrounds. Animations can be an effective way to show more images in a limited space. However, if an animation is to be used for hyperlinking, you can only use one link per completed animation. You will not be able to link each individual picture to separate pages or websites. In order to link individual images, you will need to use a JAVA script.

Learning how to use graphic and image isn’t difficult and can be a lot of fun.  Our graphics program of choice is Paint Shop Pro 7 . . .  available through the Amazon link – Software Category.  PSP  has everything you need to create excellent graphics, it is easy to use and is very affordable . . . so get creative!

Comments are closed.