How do I add pictures to my website?

If you notice there are many websites that are on the web that do not have pictures of graphics of any kind. That may be because they have a website where pictures are not going to make a difference or they simply did not think about adding them to the website. There are some websites that really don’t need pictures but if you have an e-commerce site then you will want to have the pictures and images of the products on your site.

If you have a How To site then having pictures are very important, most people like to have a visual picture when they are reading how to fix something. You know what they say A Picture Is Worth a Thousand Words. Some webmasters produce content sites and then later on decide that they want to add pictures to their website in order to get more traffic to their site.

The great thing about technology is that can be done. You want to decide how you are going to go about adding these images. You can use HTML, FrontPage Express or Composer. HTML is one of the most popular ways. Let’s use HTML because it is most common for new webmasters. The first thing you want to do is decide which type of image you are going to put onto your website. There are two main types that you may be familiar with and those are the .gif and the .jpeg or .jpg. You want to stick with those two types because most web browsers can access them. You may be surprised to find out that certain browsers do not pick up all types of images.

The .gif files are more popular with simple graphics, icons and even drawings. The files are based on 8 bit that can accommodate about 256 different colors. The perfect use of a .gif is a street map. The .gif images come with some see through backgrounds but also come with animated colors so you really don’t see that many black and white images.

The .jpeg images are really great for actual pictures. These files can offer 24 bit files that can accommodate about 15 million different colors giving you by far the best images in the world. The .jpeg is the most popular image when it comes to websites.

The next step once you have made your choice of images is to obtain them. There are many different ways of doing that. You can start by setting up a scanner for pictures and other graphic packages. By doing this you are getting more control over the images than before. But this way is great for people who tend to be more gifted artistically. There is a much simpler way to get the image. If you are using pictures that you found online then right click on the mouse on the picture of your choice and then choose Save Image As and then you will see a save box and you can choose either .jpeg or .gif to save these images. It is best when doing it this way to use .jpeg images.

Now you want to put your images into your site. The first thing you have to do is make sure that your files with your pictures in it are in the same folder that the webpage you are placing the picture on. If they are not in the same folder then when pointing to your image you will have to specify the folder name. If your site has many pictures it is easier to manage with multiple folders.

Then you will have to tag the image like this this defines your image. You don’t have to close it at this point because there are some other things that need to be done first. For example, if you have a picture called image.jpeg then place it in the same folder as the webpage. To insert your image onto that page you will need to perform this formula:

If it’s in the same directory:
(Left Bracket)img src=”imagename.jpg” alt=”pic name” height=”10″ width=”10″>

If it’s in the image directory:
(Left Bracket)img src=”images\imagename.jpg” alt=”pic name” height=”10″ width=”10″>

Don’t forget when adding your image you must add the src attribute to the tag every time. This will actually define the exact spot where the picture is going to reflect on your website. Notice the phrase alt in the tag this is the alt attribute and it is recommended that you use this for every image and picture as well. What the alt does is it shows an alternative text description for the picture. But you should also keep in mind that not all web browsers can pick up these images and other simply turn off their graphics from their browser so they can log onto the websites quicker, images tend to slow down the upload of a website.

But by adding the alt message it will show in the place of where the image should have been. Which will make the spot on your website appear to make some kind of sense without the picture. It is also beneficial to the vision impaired people who also like to surf the web. Another great advantage is also that when you have a graphics enabled web browsers a message will appear when you slide the mouse over the where the image is and it can make you page seem more dynamic. Government websites have a 508 compliance for the visually imparied that require things like alt tags. Please see your own overnmental rules regarding 508 if your government has one.

The next step once the image appears on your site is that you may want to resize the image if you think it is too big or too small. You can simply adjust the height and width of the picture. Be careful when doing that because you don’t want to warp the image or make the image too small.There are many other attributes associated with the image tag please see an html guide for reference.



Leave a Reply