<img src="penguins.gif" alt="Penguins">
To insert an image into your page, use the img tag. The following line was used to display the penguin picture:
<img src="penguins.gif" alt="Penguins">
The img tag is one more tag that does not use a matching end tag. src stands for "source" and it tells the browser where it should go to download the picture file. Your HTML file is requested and received by the browser first. If there are any img tags, additional requests have to be sent to the server to fetch each of the image files. The source can be another directory on your server, or it can be a request to a different server altogether!
This short tutorial assumes that the image files will be located in the same folder (or directory) as your HTML file. That has to be true on your own computer when you are testing your page and on your web server when you upload your HTML page. When you transfer your HTML file to your Internet server you must make sure you also transfer your image files!
The alt attribute contains a text description of the picture. This text description is displayed if for some reason your picture is not found or cannot be downloaded. The description is also used by search engines to more accurately index your site.
Three types of graphics files are used on the Internet:
GIF files compress images using at most 256 colors. This is an older format,
but one variation called an "animated GIF" is common for spot animation.
GIF files use "lossless" compression, so if your image has 256 colors or less you get
exactly what you created. This is good for images that require sharp edges, such as logos
or images that contain type.
JPEG or JPG files are compressed images that use as many as 16.7 million colors. This format is great for photographs and it is the default for most digital cameras. However it uses a mathematical compression method that is "lossy", which means that the more compression you apply to it, the fuzzier your picture gets. If you are making photographic prints you want to apply as little compression as possible, but you can get away with more compression for web page display, which makes your pages appear much faster. There is no animation option for JPEG files.
PNG files are found less commonly, but they do provide a compromise between the respective weaknesses of GIF and JPEG. PNG files allow up to 16.7 millions colors like JPEG, but the compression used is lossless like GIF. However the amount of compression is not as good, so you should use JPEG or GIF whenever those options are practical.
Do not use uncompressed formats like BMP and TIFF. Image formats like BMP, TIFF,
PSD and others may display in some browsers, but these
are uncompressed formats and much larger files. The total number of bytes can easily be
ten to a hundred times more than the compressed formats, which means the images on your pages
would take that much longer for your visitors to download! You will quickly lose a lot of
potential visitors that way.
Do not use the "width" and "height" attributes in the img tag to resize your pictures! You will find that you can do that. Don't. The purpose of the width and height codes in the img tag are to allow the page to display faster. If the browser knows the size of the image before it even loads the image, it can lay out and display the page while the image is still being retrieved. Otherwise it can't complete the layout until it retrieves the images and computes where the images fit.
Unfortunately, you can also use width and height to resize how the image appears in the browser. But that's best done with image editing software before you create your web page. Here are two good, free programs that can do that for you:
Here's the deal: Let's assume your image is a square, 600 pixels wide and tall. But you want it displayed only 200 pixels wide and tall on your web page. That's one-third the size, right? WRONG!!! Draw it in a grid. Reducing the width and height by 1/3rd makes the image 1/9th the size! Reduce it in your image editor, and your image loads 9 times faster! Or looking at it the other way, if you use the width and height attributes, it's 9 times SLOWER!
And the picture in my example is about the equivalent from a 1 megapixel camera! Try it with a 5 megapixel camera and your image is more like 50 times faster... or slower.
Just use a search engine like Google and search for "clip art" and whatever it is you need. There are dozens of sites that offer clip art of just about anything. Most of it is free for non-commercial use.
If you find something you like, click on it with the RIGHT mouse button. A popup menu will give you the option of saving the image to your disk!
Be sure that you understand and follow any copyright guidelines that are on the download pages. Even if the clip art is free for non-commercial use, some ask that you acknowledge or link to the source on your page.
So how did I get the last two images above to align left and right, with the text going around the images? I added "inline" CSS style attributes to those two img tags. You can add CSS styles to any tag, but it's better to put all your page styles in the heading section instead, and best to put them into a separate CSS file that you can apply to all the pages in your website!
I'll show you how to use CSS soon, but for now here are the inline codes I put in those two img tags:
<img src="penguin.jpg" alt="Penguin" style="float: right"> <img src="3penguins.jpg" alt="Penguins" style="float: left">