Her Realm

Image Use

Images can be a helpful tool when used on the internet but they can quickly go from helpful or horrendous, especially when it comes to many or too little images. Hopefully, by reading this guide, you will develop a better understanding of the purpose of image use and how to best use them.

Uses

Images serve two main purposes in web design: decoration and function. Some images exist only to be visually appealing whereas others serve a purpose such as exposition, emphasis, demonstration and format. Generally, most images fall into one category, although they may be overlap when a functional image is also visually stimulating.

One common image type is that of the layout image or header. These images often exist for more aesthetic reasons than functional. Layout images vary in size and appearance. A header image made be a smaller rectangle which takes up only small portion of the top of the page or a layout image may take up the entire page and all the content and navigation fits “into” the image. It’s also not uncommon to see smaller horizontal footer images which end the page and provide a space for critical information. However, while layout and header images may be mostly for decoration they can help to define space and format the page as well as providing clues to the functionality of the page.

Images can also be used for more functional reasons such as to illustrate or explain something which is not as easily explain with text with a photo or diagram. For example, a tutorial about how to achieve a certain effect with a graphics program often requires an image to help the visitor understand or a graph or chart helps to explain the mathematics of a situation or statistic.

Images can also break up large chunks of text and make viewing easier. Adding an image of your family to a page about your family may help to pique the visitor’s interest even more and add a little depth to your content but it also helps to break up larger chunks of text so that a page can be read more easily and with less strain on the eyes. In this way, an image is serving as both decorative and functional.

Images can also be used to highlight or emphasize titles and headings, lists and dividers on a web page, which are all functional but become more visually appealing with the use of an image. Navigational links and lists, as well as sidebars, can be organized with simple image usage. Again, these, usually smaller, images add visual appeal but help to emphasize certain parts of a web page and break up chunks of text. In some cases, an entire element, such as navigation, may be replaced with images.

Small images are often used to draw attention or highlight to links to other websites and pages. Small images may be used for links to the “Next” or “Previous” pages on your site to emphasize or highlight these links. Also, standard sized buttons and banners are common on websites to link back to other sites. Since buttons are so small, it’s not uncommon to see “button walls” which are pages containing many link buttons which resemble brick walls and are generally very neat.

Many websites, especially personal sites, use non-necessary images to highlight or add visual appeal to certain aspects of their website. These include, but are not limited to:

Cliques, listings and webrings

Require a link back, often times using a small image or button referred to as a “code”

Fansigns

gifts or awards for a webmaster.

Online tests and quizzes

Commonly display results in image format for visitors to display on their page.

Messages

Images can be used to relay that a site is under construction, on hiatus or experiencing some difficulty as well as to welcome a visitor to the page or direct a visitor elsewhere

Entertainment

Pictures of yourself, your family, your pets and your friends all show a little about your life and help the visitor to become better acquainted with you.

Avatars/Representation

Websites use avatars or icons which are user pictures meant to represent a person and show that a particular element (such as a news or blog post) is associated with (written) that user..

Galleries

Often, one will find that websites will display a variety of images showcased in galleries. A gallery is like a photo album on the web, the sole purpose of which is to showcase images. These may be personal pictures, favourite collected images,or portfolios. Portfolios have the same function online as they do offline – to display work – although how and what they showcase is slightly different. Often, artists, photographers, designers, models et cetera will have galleries as portfolios so that visitors and potential clients and business associates can view the quality of work.

Galleries may be made with plain HTML and may be a seamless part of the website a visitor is on or may be managed with any number of gallery scripts or scripts altered to display galleries. Furthermore, galleries may be on a separate site; there are many sites for artists and models to display their work.

The information which is a gallery provides will vary from site to site. Some galleries may contain images only and others will contain minimal information (such as the file name or title of the image) whereas others will contain man details: file size, file name, download counter, image dimensions, file type, medium/equipment used (if art/photographer), credits, models, make-up artists, so on and so forth.

Because galleries contain many images, they may be slow loading. This causes both bandwidth drain of your host and of the visitor’s internet connection. To remedy this, one can use thumbnails. A thumbnail is a smaller, usually cropped, image which generally shows a preview of the whole image but is significantly smaller in dimensions and file size. Thumbnails are a good idea to use with any image on the internet, not just in galleries, so that the whole image does not have to load if the visitor does not wish to see it. Thumbnails also help to save server resources because the browser does not automatically load the larger image files. Additionally, in an area where one large image may be shown, you may be able to show 5 thumbnails, depending on the size.

HTML allows one to use pseudo-thumbnails, by setting the height or width of an image, which may seem convenient but really defeats the purpose of a thumbnails because the whole image still needs to load which costs the same resources as simply showing the whole image. To use a true thumbnail, the image must be edited (cropped and/or resized) in a graphics program and saved as a separate image as the original.

Format

When using image, one should keep in mind several considerations such as image format, size and direct linking. Although images can be extremely helpful if one misuses them, they can actually deter someone from visiting a website or distract them from the focus of a website.

Image format may not be something which you give a lot of thought, initially but learning about the strengths and weaknesses of the different formats may save you a lot of hassle. Read below for information about the most common image formats: jpg, gif, bmp, and png.

jpg

images are more compressed than other file types (bmp) and, as such, use less space and bandwidth. however, jpg images may have poor colour and quality if not optimized but work well for photos with optimization. jpg images can be compressed greatly so which reduces quality but lowers file size

gif

images are also more compressed than some file types. gif images can support both transparency and animation but may be the best file type to choose for photographs. quality can vary and gifs may not reach the higher level of quality of jpgs

bmp

a simple graphics format associated with Microsoft and, as such, is the default format for MSPaint. This format is usually not compressed and is therefore much larger in size than JPG or GIF file types and less ideal for use on the internet

png

an image format which can be quite large if not correctly compressed. the png format supports some transparency, compression and colour data greater than the gif format but is not as widely supported. png images may be a better choice for digital art than jpg although the jpg format is specifically designer for photos and photo-like images

Direct Linking

When using images, an issue arises known as direct linking or hotlinking. Direct linking is displaying an image at a location (web page or website) from another location (webpage or website). Because the image is still located at the original website (or server), the bandwidth which is used to display the image at the second website is that of the original server. Therefore, even though the image is displayed on a different site, the original website will have to pay the price in resources. Because webmasters generally have to pay for their resources, this can have a high monetary cost for the owner of the original website. Sites on free hosts which may have a bandwidth or data transfer limit may experience a temporary shut down because of hotlinking.

Hotlinking is known as a form of theft because it uses someone else’s bandwidth and, ultimately, they must pay the monetary cost. It is not considered acceptable among communities on the internet although it is still a common practice. When using an image, it is polite to ask if you may direct link or to save the image to your own server so that displaying the image uses your resource and not those of someone else. Often times, webmasters will request that you do this or will store the image on a third server to protect their bandwidth.

If you are unable to store an image on your own server, you may find a free image host which does allow direct linking. To view a list of free image hosts, click here.