Website Graphics

Web Page Graphics

Web graphics play an important part in the presentation of a website.

Using the correct type of web graphic which has been optimized for optimum download speed and web hosting space conservation will affect the performance of the website. Sites containing lots of images will be slow to load and require more web hosting space.

Web Graphics

Web graphics have traditional been in 2 formats, JPEG (.jpg or .jpeg) or GIF (.gif). More recently a third type has come into play, PNG (.png). To display an image on a website it must be one of these types.

Some General Notes About Using Web Graphics

When using graphics within a web page there are some considerations:

Web Hosting Space

Graphics use up a lot of web hosting space. If your site will have a lot of graphics like photographs then a larger web hosting package maybe required as the site grows.

Download Speed

Pages that load slowly will drive visitors away. You may have experienced this yourself. Visited a site that took too long to load into the browser and just left because you didn’t want to wait any longer?

A way to make it appear that the page is loading faster than it actually is is to include the width and height attributes of the image. The browser will “save” a spot for the image and continue loading the rest of the page. You still need well optimized images.

Use images that are the size you actually need. If you resize the image using the page coding the browser will still download the original image file.

Limit the number of graphics per page. A lot of people are still using dial up connections. If your page has too many graphics it will take a long time for the page to load in their browser.

Remember, a page stored locally on your computer will load quicker than once it is on the Internet. You have 7-10 seconds to keep the visitor’s attention before they will move on. Check the download speed of the total page before you upload to your web space.

Correct Image Type

Build your graphic in a graphics program and save the original in a safe place. Make a copy of the original file to experiment with or alter. Always have a copy of the original to go back to. You may decide another version of the image is more suitable.

Use gif or png format for navigation bars, logos, buttons and another drawing type graphic.

Complex diagrams and illustrations should be first drawn in a vector based graphic program. Vector graphics use lines and mathematical formulas and equations to build the graphic. If you are building graphics that will be used for printed material also, build them in a vector based program like Adobe Illustrator, Macromedia Freehand or AutoCAD. Vector based artwork is more suitable for the printing industry so you would save on artwork fees. The artwork can then be saved in a format suitable for the web.

Use jpeg format for photographs.

Free Graphics

There are places on the Internet that advertise “free” photos, clip art etc. Although the site says the images are free it doesn’t mean they have the authorization to distribute the images. If you are going to use images from the Internet then make sure the images are from the original creator’s site and they have posted the images as free. Also, as with other free stuff, there may be some rules about using their images like linking back to their site or stating where the image came from. A safer thing to do would be to create your own images from scratch or contact the artist if there’s the perfect image somewhere and get their permission in writing to use the image or pay them for it.

All work on the Internet is copyrighted, even if they don’t specifically state a copyright notice. If you didn’t create it or pay the original artist for it, don’t use it.

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

4 Responses to Website Graphics

  1. Owen Says:

    Would you say that .png format is more desirable to use as web graphics. Do they tend to have more efficient page download speeds over .jpg?

  2. Web Page Mistakes Says:

    It depends on the image. Sometimes .png will give better clarity but also in some instances it will give a larger file size. You have to decide on a case by case basis which is better to use, clarity or a smaller file size.

    A larger file size can increase your download speed which you want to keep to a minimum. One image on a page might not make a big difference but a bunch could.

Website Graphics Was Mentioned Here:

  1. Website Design Mistakes
  2. How to reduce the site load time?

Join the Conversation by Leaving a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> within your comment.

By leaving a comment, you acknowledge that you have read our terms of use.