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.
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.
Video of the Day
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:
Cross 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.
Video of the Day