Visit my Blogg lifeofegg.blogspot


Follow me on Twitter

"Everything should be made as simple as possible, but not one bit simpler." Albert Einstein (1879 - 1955)

Using Images in Web Design


Right let's get one thing straight from the start. "Graphic Design" and "Web Design" are two completely different things. You do not need to be a graphic designer to create a good website nor do you need the latest graphic software. Web design is about learning and using code and other tools that assist you in putting your code together. Graphic design is about creating and manipulating images. If you have some graphic design skills then great, your websites will have the benefit of being more apealing to the eye, but if you dont then not to worry as there are some simple ways to create images and get them ready to add to your web content.

In this section I will detail some of the fundamental basics you need to know as a web designer to get images ready for the web and give you a few tips on how to create images with readily available software.


Different types of graphic files

There are two fundamental graphic types you should use in web design:

JPEG - These image types are generally used for sizeable photo's or detailed illustrations with shading or complex colours. These file types can support millions of different colours.

GIF - These image types are the sort of thing you will see used in clip art for example. They are best used for small illustrations or pictures. These file types can support up to 256 colours and will load quickly on a web browser.


Image file sizes

When adding images to your web pages you need to be careful with there actual file sizes. If your file size is too large your page will take a long time to load. A general guide for your file size is a resolution of 72 DPI (dots per inch).


Creating & editing images with readily available software

The fundamental basics of being able to create and edit images for the web is to make sure they are of the correct image size and file size and also of the correct format as previously detailed.

Examples of free/readily available software you can use is as follows:

Microsoft Paint - This comes as a standard accessory on a Windows PC and is useful for cropping images and for saving them in the correct file types as detailed above. I use Paint for pasting screen shots in and then cropping the bit I want etc.

Picasa - This is free software provided by Google that you can download to your PC. It allows you to organize, edit, view and share photo's with people on Google. It's great for altering your image and file sizes and also for adding some different effects to your images.


The do's and dont's of using images from the web

When using images on the web it's always nice to be able to use your own if you can. Using other peoples images from the web can result in copyright issues so you need to be careful what you use if you do. There are however many images you can use on the internet, you just need to check the websites you get them from for any terms & conditions. You can type "Free images" into your browser to get a list of sites you can use. You can also do an "Image search" via your browser (select the images tab on your browser window) and and then change the "Usage rights" in the advanced search section.


Inserting images into your web content

When using images in your web pages you need to ensure that they are saved in the same folder as your web document/HTML file otherwise they wont work. I create a folder for my HTML docs then save another folder in that for my images.

When inserting images with HTML you need to use the <img> tag. This is a standalone tag and does not need a closing tag. Within this tag you need to add what the picture cource is you want to insert and will look like something this; <img src="filename.jpg"> for example. You can also add further HTML syntax in your <img> tag to edit your image and adjust it's size and position on your page and add borders to it etc.