Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with images in HTML

This article describes the various image formats used in web pages and how to display images on web page.

Images are an integral part of any website. Let us have a quick look on the various image formats and how to place them on web pages.

Common Image Formats

Graphic Information Format (GIF)

GIF files have the file extension ".gif" .They can produce some of the smallest file sizes and support background transparency.They can handle only 256 colours and by turning off one of the colours it obtains the background transparency. The number of supported colours is very limiting to designers who want a larger colour palette and this limits the use of gif files to mainly black-an-white images and ones with limited gray tones.

Joint Photographic Experts Group (JPEG)

JPEG files are denoted by “.jpeg” file extension. They are the most common image format in the world of web. JPEG files are larger than GIF files and support more colours than GIFs. But they do not support background transparency. JPEG files also uses lossy compression which means that some of the data is lost while saving an image as a JPEG which can compromise on the quality of the image.

Portable Network Graphics (PNG)

PNGs tries to combine the best of both worlds made available by GIFs and JPEGs and have the file extension “.png”. They support millions of colours and background transparency. They use lossless compression which means that the image quality is not compromised when saved as a .png file.

Designers usually organise their graphics into layers. One of the biggest advantages of PNG file format is that theypreserve layers.

Imagine a picture of a car with a caption to it included in the picture itself and saved as a JPEG. Suppose you come across a scenario where you are required to change the caption. With the JPEG image you see that the layers are fused together and it becomes difficult to amend the caption. With a complex image which has multiple layers you might actually end up recreating the image itself. However with a PNG file, since the layers are preserved, you can easily target the layer to be amended using a photo editing tool and save your work.

However this poses with another problem. Preserving layers means that the file size of a PNG file is usually larger than its JPEG counterpart.

Scalable Vector Graphics (SVG)

Vector graphics are drawing created using mathematical formula that specify points and then draw lines between the points. They have the file extension “.svg”. Because they are created using mathematical formula, when the graphic is changed it does not get pixelated as bitmapped images does. With vector graphics, if you need to draw a straight line the computer takes the point A and B and draws a line between them. But with a bitmapped image different colour “bits” are used to fill up the space between the two points.

Imagine a line of 100 pixels which needs to be elongated to 300pixels. With a vector graphic you just need to extend the length. But with a bitmapped image you need to cover the length with an additional 200 pixels to make up the new length, otherwise the image can look pixelated.

Another stand-out feature of vector graphic is that you can change its size dynamically by changing a parameter. With a .gif, .png, or .jpeg images you have to use an image editing tool to reduce or enlarge the image. But with a vector graphic you can change some parameters and achieve the change in image size without getting the image pixelated.One of the most exciting features of HTML5 is the ability to use .svg files.

The code listing below shows how to change image sizes for SVG files just by changing some parameters. The figure Fig 1 shows the results.

Listing 1: Changing image size for vector graphics

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Changing image sizes for SVG files</title>
</head>
<body>
<p>Original</h3>
<img src="coloredtoucan.svg" alt="bird"/>
<p>100x80</h3>
<img src="coloredtoucan.svg" width="100" height="80" alt="bird"/>
<p>200x160</h3>
<img src="coloredtoucan.svg" width="200" height="160" alt="bird"/>
<p>500x400</h3>
<img src="coloredtoucan.svg" width="500" height="400" alt="bird"/>

</body>
</html>
Changing image sizes with SVG files

Figure 1: Changing image sizes with SVG files

Placing images on web pages

is the tag used to place images on a web page. It is a blank tag which means it contains only attributes and no closing tag. The below code listing shows how to display the syntax for displaying an image.

Listing 2 : Syntax of the tag

<img src=”source” alt=”alt text”>

The following listing shows how to use the src attribute. The first image uses a file within the same folder as the image source. The second image uses an image on the web as its source.

Listing 3: Using src attribute

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Changing image sizes for SVG files</title>
</head>
<body>
<img src="musicicon.jpg" alt="Music icon"/>
<img src="http://mrbool.com/portal2/mrbool_img/logo.jpg" alt="Mr bool logo"/>
</body>
</html>

The attribute “src” refers to the source of the image. It can either be an image stored in a folder on your site in which case the value of the attribute is the path to the image file or it can be an image hosted on an external website. In this case the value of the attribute is the url to the image.

The value of the alternate text or “alt” attribute is provides information about the image to the end users if for some reason the image cannot be displayed. for e.g. a slower connection, error in image source path or if the end user uses a screen reader. For this reason it is always advisable to use a meaningful text as your alternate text.

Listing 4: Displaying image on a web page with tag

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SVG Test</title>
</head>
<body>
<img src="music.jpg" alt="Music icon"/>
</body>
</html>
Displaying image on a web page with img tag

Figure 2: Displaying image on a web page with tag

Image placement with align attribute

Align attribute is used to specify the placement of images with respect to other elements on the page. The attribute can take following values

  • Left
  • Right
  • Top
  • Bottom
  • Middle

Bottom is the default value of the attribute. The following code listing shows the various placements of images.

Listing 5 : Image placement

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image placement</title>
</head>
<body>
<p>
<img src="musicicon.jpg" alt="music icon" align="bottom"/>
This is a bottom aligned image</p>

<p>
<img src="musicicon.jpg" alt="music icon" align="top"/>
This is a top aligned image</p>

<p>
<img src="musicicon.jpg" alt="music icon" align="middle"/>
This is a middle aligned image</p>

<p>
<img src="musicicon.jpg" alt="music icon" align="left"/>
This is a left aligned image</p>

<p>
<img src="musicicon.jpg" alt="music icon" align="right"/>
This is a right aligned image</p>
</body>
</html>
Image placement

Figure 3: Image placement

Height and Width attribute

Height attribute is used to specify the height of the image. Width is used to specify the width of the image.

Using images as hyperlink

Images can also be used as hyperlinks. The following code listing shows how.

Listing 6: Using image as hyperlink

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image hyperlink</title>
</head>
<body>
<a href="http://www.mrbool.com">
<img src="computer.jpg" alt="Computer"/>
</a>
</body>
</html>

This is all for today's article, hope you liked. See you next time.



I am a Senior Web Developer from London with over 5years of experience in ASP.NET, HTML, CSS. I am well versed in VB.Net, C# and SQL as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login