HTML5 Body Elements #7 Images

In concept, the <img> tag is rather simple: Want to place an image into your HTML document? Than <img> is your go-to guy. Actually, the image element is gender neutral (as far as we can tell), but we’d be happy to share some of its more identifiable characteristics.

When you use the <img> tag, you’re not actually placing an image on your page, but rather, creating a placeholder for that image, and a reference to where that image can be found. The image still remains in its original format, unchanged by the HTML, and is inserted into the rendered HTML document when displayed in a web browser.

<img> Formatting Syntax

The src is the most crucial of all the image attributes, as it sets the location for the image file. Without the src, your image tag will do nothing, which is why it is mandatory for a working tag. In most cases, the above syntax will be sufficient for placing images within your document, but there are additional attributes which we’ll also be taking a look at. All of the standard attributes are also supported.

Three common image file types are supported: GIF, JPG, and PNG, as well as others that we’re not going to mention because you really shouldn’t be using them. Yep. We tend to be a little dictatorial like that. But we do it with a smile.

Image Formats

Which format is right for you? At one point in the web’s illustrious history, much debate was spawned as to when and how certain image formats should be used. And if you’ll loan me your Swiss Army Knife for a moment, I’ll re-open that can of worms:

 The .GIF (pronounced “giff” or “jiff”, depending on what part of the South you’re from), an image format dating back to the mid-80’s, only displays 256 simultaneous colors, so it isn’t great for photos and other color-rich images. However, it did have the ability to only contain information for the colors it actually used (saving on file size), and could have a true transparent background, making it a rather versatile (albeit aged) format for page design elements. You can also create rudimentary animations with .GIF; and this utility has primarily capped the format’s legacy.

The .JPG (pronounced “jpg”) displays images with a total pallet of 16.7 million colors, so it’s quite nice for photographic quality images, and can be variably compressed resulting in a smaller file size. Compression can range from minimal (resulting in an image very close to the original source, but with a bigger file size) to heavy (resulting in a small file size that looks like one of those color blindness tests.)

Then we have the .PNG (“ping!”), the latest kid on the image block. Due to some early licensing fees for the .GIF format, a new standard was established a few years back for images that would be used primarily for page elements. This new format held a couple advantages over the former champ: It could display variable levels of transparency (or “alpha”), and the images had a smaller file size. As with the .GIF, you can also create animations with .PNG (in the form of a .MNG file), but you almost never see this in use.

So the preferred usage is fairly clear cut. If you have an image-editing application that supports .PNG, there’s really no need to use the .GIF. Ever. Unless you’re creating a really cheesy animation that needs to be cross-compatible with MS-DOS 5.2. For images, it’s still probably best to stick with .jpg for the compression, but as internet access gets faster and faster, it’s really a lot less crucial than it used to be.

I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

<img> Attribute Examples

#src

The src, or source attribute tells your rendered HTML document where it should pull the image file from. Just like the <a> tag we took a look at last time, your image location may be specified as an absolute or relative location. As called, the images will retain all proportions, and will be displayed without modification from the browser.  It’s literally just popping it in there.

 Let’s start with this sample Time Machine HTML page, and add an image of the author H.G. Wells, a man that was known for his writing almost as well as he was for his occasionally defiant facial hair.
We have attached an image with the source of this tutorial for your usage and admiration.

Add the following to your HTML document. We’ll first be adding a new <aside> that will hold our image:

Note that we’re using a relative path for our image. As long as the “author.jpg” image is in the same directory as your HTML document, the image will be located. If it’s not, you’ll wind up with something like this when you attempt to open your page in a browser:

 

This is bad. You do not want this. It represents not only a broken image, but a broken promise to your end user. This is not how principled relationships are built. So make sure your image paths are correct. That’s it. I’ve said my piece.

Since we’ve just tacked on our image to the bottom of our document, we should probably add some CSS just to make things look a bit more uniform. The H.G. didn’t stand for “hasty graphics”, now did it? Create the following new class for our image <aside>:


Save your page. Making sure your image file is in the same folder as your HTML document, open in your web browser:

In the event that an image cannot be located, or the end user is utilizing a screen reader for accessibility purposes, the alt attribute value will be displayed or read. It is means to serve as a short description for the image. Technically speaking, this is a required attribute, just like src, but your image will display just fine without it. It’s best just not to make a habit of it.

#height / weight
Using the height and width attribute, you may have the browser dynamically re-size your image when displayed in the web browser. Generally, it’s a good idea to shy away from this, and call images that are the correct size for the page initially (to avoid graphical artifacts and unconstrained proportions), but the option’s there if you’d like it. You may size your images using a percentage value or pixel value, as illustrated here: And that, my friends, is how pudding is made.

HTML5 Body Elements #7 Images.zip

We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.