1. Computing

Add jpg or gif images To Web Sites

6 Simple Steps to Add jpg or gif images to Web Sites

By

Do you have a jpg or gif image that you such as a photo or a picture you created that you wnat to put on your Web site? Did you get permission to add a jpg or gif image on your Web site? This is how you add the jpg or gif image to your Web site so your readers can see it or download it.

  1. Make Sure jpg or gif images Are Not Too Big - Some hosting services don't allow files over a certain size. Make sure that what you are about to add to your Web site is under the size allowed by your Web hosting service first. You don't want to get your Web site shut down for not following the rules or do a lot of work getting ready to add the jpg or gif image to your Web site to find out you can't add it.

    If your hosting service does not allow you to have large jpg or gif images on your Web site you can get your own domain name for your Web site or switch to another hosting service that does allow large jpg or gif images or large files on Web sites.

  2. Upload jpg or gif image To Your Web Site - Upload your jpg or gif images to your Web site using the easy file upload program that your Web hosting service provides. If they don't provide one then you need to use an FTP program to upload your jpg or gif images to your Web site.

  3. Find Your jpg or gif image's Address (URL) - Where did you upload the jpg or gif image to? Did you add the jpg or gif image to the main folder on your Web site or to another folder? Or, did you create a new folder on your Web site just for jpg or gif images? Find the address of the jpg or gif image on your Web site so you can link to it.

  4. Choose a Location For Your jpg or gif image - Which page on your Web site, and where on the page, do you want the link to your jpg or gif image to be? Decide where you want the link to the jpg or gif image to show on the Web page.

  5. Find The Location of the jpg or gif image in Your HTML - Look through the code on your Web page until you find the spot where you want to add the jpg or gif image.

  6. Add The Link to the jpg or gif image - Add the code to the place where you want the link to the jpg or gif image to show up in your HTML code. You can make the text that goes along with the jpg or gif image say anything you want it too.

    example

    • Your Web site is hosted at Freeservers
    • The username for your Web site is "sunny"
    • Your Web site is located at http://sunny.freeservers.com
    • You uploaded the jpg or gif image to the main directory in your file manager on your Web site
    • The jpg or gif image is called "flowers.jpg" or "flowers.gif"
    • The text you want the reader to click on to download the jpg or gif image is "This jpg or gif image is called flowers."

    • Your code will look like this:

      <img src="http://sunny.freeservers.com/flowers.jpg">This jpg image is called flowers. Or, <img src="http://sunny.freeservers.com/flowers.gif">This gif image is called flowers.

    • If you had uploaded the jpg or gif image to a folder called "fun", the code for the link to the jpg or gif image would look like this instead:

      <img src="http://sunny.freeservers.com/fun/flowers.jpg">This jpg image is called flowers. Or, <img src="http://sunny.freeservers.com/fun/flowers.gif">This gif image is called flowers.

  7. Testing The jpg or gif image Link - IF you are creating your Web site on your computer, before downloading the Web site, and the jpg or gif image, to your server, and you want to test the link to the jpg or gif image to make sure it works right you will need to link to the jpg or gif image on your hard drive like this:
    • The jpg or gif image is located in the "My Documents" folder
    • It is called "flowers.jpg" or "flowers.gif"
    • The text for the jpg or gif image says "This jpg or gif image is called flowers."
    • Code is: <img src="file:///C|/My Documents\flowers.jpg">This jpg image is called flowers. Or, <img src="file:///C|/My Documents\flowers.gif">This gif image is called flowers.
*More help with jpg and gif images
Related Video
Add Blog Images with Picasa

©2014 About.com. All rights reserved.