Web Design
Introduction to Web Design
Web Page Layout
Page Width and Height
Navigation and Usability
Choosing a Color Scheme
Fonts and Font Sizes
Creating a Logo
Images and Icons
Using Templates
Testing in Multiple Browsers
Frequently Asked Questions
Further Information

How to Add Images and Icons to Your Website

Sites that are purely text-based can look bland and uninteresting. So, you should consider using some pictures and/or icons to spice your site up a little.

Deciding what's right for your site is a matter of personal opinion. One common error though is to overdo things. If you think of some of the most successful and visually-appealing sites, they do use graphics, but do so sparingly. So, if you're not sure, the best advice is to err on the side of caution, and keep your design clean and simple.

Copyright Issues

If you look around on the internet, you'll find an almost endless supply of images and icons. The problem is you might not have the right to use them on your website. Whoever created the icon or image owns the copyright to it, so you can't just take an image you like and use it.

In many cases, you'll find images and icons described as “free”. If you look at the fine print in the terms and conditions though, it often clarifies that they're only free for personal or non-commercial use.

So what constitutes commercial use? Unfortunately, there isn't a clear, simple and universally-agreed definition. We don't have a legal background, and are purely offering our own opinion here, but if you apply common sense then it would seem that if you run a website that hosts ads, or one that sells or promotes a product, service, organisation or individual, then that could be construed as being a commercial use, because you or someone else is making, or at least attempting to make, money from your site. If that's the case, then you would not have the right to use icons or images provided for "non-commercial use" without contacting and obtaining the permission of the copyright owner.

While you might well get away with using graphics that you don't have rights to, it's best not to take a chance. So, you should always read the terms and conditions carefully to see what restrictions there are on usage. This can be tedious, and the wording can be difficult to interpret, but it does help to ensure that you'll avoid problems in the future.

Finding Free Pictures

any of your own collection of digital photographs, or any images that you create yourself using image editing software, is obviously free. Beyond that, there are lots of sites where you can get pictures. Many sites advertise “free” images, but as mentioned above, you need to check the terms and conditions to see what restrictions there are on the usage of these.

The sites listed below contain images which are free for commercial as well as personal use. There are some caveats though which you should note:

  • The exact terms and conditions vary per site and over time, so you'll need to check for the latest restrictions on usage of the images.
  • In addition to free images, some of these sites have images which are available for sale, or links to other sites which sell images. So, not everything you see will necessarily be free.
  • Even if the images are free for commercial use, you're usually not allowed to re-sell or re-distribute them (so you can't take the free images and then offer them for sale or free download from your website).
  • In some cases, you're required to attribute the source of the image (usually by attributing the source in text close to the image and providing a link back to the site from which it came).

Other Sources of Photos and Icons

If you don't find what you're looking for on one of the free sites, then you could try some of the commercial sites. A good source for pictures and icons is Dreamstime, where you can purchase high resolution images for as little as $0.20 each. A popular site for purchasing icons is IconExperience.

Free Background Patterns

If you're looking for a free pattern to use as a background for your site, then you could try one of these websites:

<-- Previous Page

Creating a Logo

Next Page -->

Using Templates