HTML Basics – Images

Images are kind of like hyperlinks, the page is calling on another file, but in this case it will just display it within the same page.

The code is :



No closing tag because it does not contain anything its just a piece of information for the browser. Img src stands for Image Source and simply points to where on your web server or computer you have the image you want displayed. You do not need to include the width and the height, it will work without it and use the actual dimensions of the picture, but those attributes can be used when laying out a page to get a more precise look.

Now as I said before a hyperlink can simply be applied around this :



Go into paint and make a picture real quick and then save it as picture1.jpeg, in the same folder as your index.html. Then add that code to your page and check it out. It works the same as the text link just applied to a picture.

Now we need to cover some non-html issues about images

The file types for images vary depending on the program you use to create them. You'll notice that when you were in paint you had many options to choose from on how to save your file.

Most common are .BMP , . JPEG and .GIF and .PNG

Note : .JPEG and .JPG are the same file format there are just two ways of expressing it, but the image source in your html has to point to what the picture actually is. So don't tell it to go to picture1.jpg if picture1 is actually a .jpeg.

All these different image types are just methods of compression to make them fit on the web. You will very rarely ever use .bmp, and stay away from it, its compression is minimal and so you end up with very large files which means long load times on your pages. As a rule I use jpeg for the majority of images that have lots of different colors in them, and gifs for images with few colors or some kind of transparency. A jpeg image will not carry over any transparency, the clear area will become white. PNG's were invented for the web and pretty much make gifs obsolete. As of right now support fully for png's does not exist, but with the next evolution of Internet explorer 7.0 you will see pngs become a mainstay of the Internet. They can also use transparency. Gifs will probably stay the only kind of image that can be animated, or that is what it looks like right now. For photographs use Jpegs.

As of right now you are probably not making graphics, so just make sure to link to your filename and correct file extension and you will be just fine.

This post has been edited by capty99: 4 Oct, 2006 - 06:17 AM

Ya left something out Cohen,

alt attributes are required for image elements by the HTML specification. They display alternate text that will take the place of the image in cases where the images fail to display. This is especially important for images that convey content (for example, images substituted for text or photos) so that information is not lost if the image fails to load. In the case of hyperlinks, this means that your hyperlink will still be usable if its image fails to load.

Image elements with alt, width, height, and src attributes:





The width and height attributes are optional, but they should always be used to speed loading of your page (or at least perceived loading) and so that if you give your code to someone else (without the images) they can still work with it because they know what size the images are supposed to be; you might do this for HTML help on a forum like this.

If the HTML is being used in an email, could you elaborate on how to ensure that the image is sent with the email, as an attachment.
So that the HTML does not need to 'go to the server' when it is displaying the image.
Also could you elaborate on how to display an image with text layered above it ? (The image will appear to be a background.)