How to Insert .GIF Files on My Website

By Wendy Strain

Adding an image to your website can greatly improve its attractiveness for visitors. The most commonly used file format for images on the web are .jpg and .gif. Indiana University says .gif files are most suitable for sharp-edged images with reduced color gradations. These can include cartoons, text and line art. Other advantages of .gif files are the ability to set the background to transparency and to add animation. Adding a .gif file to a website is as simple as uploading a file and writing a sentence.

Things You'll Need

  • Computer with Internet connection
  • Administrative access to website
  • Saved .gif image to be inserted

Step 1

Open your web site administration panel. This will be different for each individual because it depends on the host server you use or whether you use programs such as Dreamweaver to manage your site. Essentially, there are two major types of editing software---html editor or WYSIWYG. Smashing Magazine explains WYSIWYG stands for "What You See Is What You Get." These programs are designed to make page building more intuitive. HTML editors require you to understand the basics of the HTML language.

Step 2

Save your .gif image file into the "images" or appropriate folder of your website. If you are using a program on your computer, you will just need to find the right folder on your hard drive. If you are using an online administration interface, you will need to upload the image. Navigate to the correct folder in your administration panel and follow the instructions to upload a file. In most cases, you will use a browse button to find the .gif file on your computer and then click "Upload."

Step 3

Add the .gif to the web page. On a WYSIWYG editor, all you need to do is drag and drop the image where you want it. Preview the website to make sure the page appears as you expected and adjust as necessary. If you're using a HTML text editor, open the HTML page on which the .gif will be placed. Scroll to the point in the HTML text where you want the .gif to appear. Add the following line, substituting information after the "=" signs with information about the .gif and leaving the quote marks in place:My GIFCross Culture explains "img src" means "image source." The information between the quotes should list the name of the folder in which the .gif resides and then the name of the .gif. The "alt" tag refers to the text that will appear if the image link is broken, if the visitor has images disabled or for text readers to decode. "Width" and "height" establish the displayed size of the image in pixels. The space tags define how much vertical or horizontal space is given around the image in relation to surrounding content. The border tag will add a line around the image and the number inside the quotes determines its width.

Tips & Warnings

  • One common use of a .gif file is called a spacer.gif. This image is a transparent square measuring 1 pixel by 1 pixel. This .gif file gives page designers the option of efficiently adding predictable space at various locations in the layout. To add space below a block of text, for instance, you could place the spacer.gif in its own paragraph and adjust the height and width to your preferences.
  • Save a copy of the web page that you are altering before you attempt to add the new .gif and try to work offline if possible until you are satisfied with your results. This prevents any practice pages from going public and protects your ability to start over should you have difficulty.