Web Development And Design #5: HTML Images
In the beginning it was just text and then, a genie said, “let there be image”.
Imagine how boring the web would have been if it was impossible to embed images to a web page. Well, that’s how it was in the beginning. But fortunately, not for too long.
Coming across a web page that does not have at least a single embedded image these days is increasingly difficult.
So, how is an image embedded in a web page?
Okay. Slow down. Before we get to that, and rest assured we’ll get to that, let’s talk about how images are stored on a site.
How To Store Images On A Site
Directory structure of a site should be organised for easy access and stuffs like that. It is advisable to have a dedicated folder for the site’s images.
On complicated sites, you might want to add sub-folders inside the images folder. For example, images such as logos and buttons will sit in a folder called graphics, product images will sit in a folder called products, and images related to news will exist in a folder called news.
Adding Images
Images are created using the <img> tag. It is an empty tag in the sense that it contains only attributes and does not require a closing tag.
The src attribute contains the url of the image. Just like with a link, the url here can be a relative one or an absolute one. When embedding an image from another server, an absolute url has to be used. If the image is on the server, then a relative url is convenient.
The alt contains the text that will be shown to the user when for some reason the browser can not render the image.
The image size should be adjusted accordingly. This can be done by defining the width and height(both in pixels) inside a style attribute or, one can just use the width and height attribute directly which is in pixels by default.
Another attribute that you might come across is the title. A designer can use this attribute to provide additional information about the image. In this way, when a user hovers over an image, the value of the title attribute appears as a tool tip.
Image As A Link
Wrapping the image tag with a link tag automatically transforms the image into a link.
Things To Consider When Creating An Image For A Site
- Format.
- Size.
- Resolution.
