Right and Wrong Ways to Use Images in Website Design

When building a web site, images are probably the last thing you may think about, but there are several things you should consider. First of all, image size is an important technical attribute that requires attention. Many people will take an image and insert it into a web page without regard to the file size. Some platforms and plugins may optimize the image as needed but the more pixels an image has, the more disk space the image will require regardless, so reducing an images actual dimensions to what is perfectly needed for the page can help. If you have many images on a web page that are large, that can make the web page load slowly. It can also cause problems for people who have limited data plans.

An image should be manually adjusted to be the actual pixel size the image will display in the web page. The DPI, or Dots Per Inch, can also be set to 72. 300 is the norm for printing, but 72 will work well when displaying on a monitor. This will also help for reducing the file size the image will take up. Using images as small as possible will help make a web page load faster and more efficiently.

Another common mistake is using images without permission. Many web designers think it’s acceptable to find an image on the internet and give credit to whoever owns the image. This is copyright infringement. There is no situation where you can use an image on your web site unless you receive explicit permission. There are online stock photo agencies where you can purchase the right to use an image. There are images that can be used for free and there are images in the public domain that can be used, but you need to verify that this is the case.

Using special effects can be frustrating for people visiting your web site. One trick is to have a web object that will display multiple images. One image will appear for a second or two and then switch to the next image. For some this may be a cool feature but it’s also annoying for others. A user will need to wait for the images to scroll through until they see the image they want to click on. Some designers will display arrows to click on which can help, but sometimes the arrows will display only if the mouse moves or some other action is performed. Keep the arrows visible so users will know they can scroll through the images. Forcing users to guess or be intuitive on how to navigate through your images will only give visitors to the site to click away elsewhere on the internet.

Some web designers will use an image as a background for a portion or the entire web page. Text and other graphics can get lost or be difficult to read or see if the background is too busy or doesn’t provide enough contrast. Most people will quickly realize when this type of design is not going to work yet there are cases where it will still be done. If it looks bad, it’s because it looks bad! Go back to the drawing board and figure out a more user-friendly design for the web page.

Some web designers will have various effects occur when the mouse pointer hovers over an image. This may be fine, but the effects may not work when browsing the web site with a cell phone or tablet. If you don’t have the advanced skills to create a web site that will work with multiple devices and browsers, you may be better off creating a simple web site where one size fits all.

Some web sites go way overboard with images. They are so adamant in showing off their images to the point of making it difficult to navigate through the site. You can see this often with web sites for wedding and commercial photographers. If someone is looking for a wedding photographer, make it quick and easy to find information for contact, rates, location, and other useful information. You will of course want to have a gallery section to show off your photography but cluttering the web page with images can make it difficult for the user to find pertinent information.

The above is generally common sense but it’s surprising how many web sites do a poor job of utilizing images effectively. Size your images properly, make it easy for users to select images, make sure images used as backgrounds work well with text and graphics, and don’t clutter web pages to the point that users can’t find information. And make sure it’s legal to use an image!

Stock images via Dreamstime Stock Photos.