Graphic Design & UX

How the Media Files Works in the Website – Image

In the last article , we saw how HTML tags behave. In this blog, we discuss how image tags are used in web pages.


The purpose of a website is to communicate all the necessary information to users in an interactive and interesting manner. Images help do this. They not only make the website more pictorial and engaging, but also enhance the user’s experience of the portal.

The browser responds to the <img> tag differently compared to other HTML tags like <h1>, <p>, <b>, etc. Its usual response is to display all tags in their correct positions. But when it encounters an <img> tag, it cannot do so straight away because it has to first retrieve the image that is to be displayed on the page.

Become A UX & Design Professional

Learn User Experience(UX) & Design - Directly From Experts

Basic syntax:

Image tag attributes:

<img> The img tag describes the image in the web page. Img tag is an inline element which doesn’t use any end tag </img>.
alt The attribute provides alternative text for users who are unable to view the image. If, for some reason a user is unable to see the image, then the alternative text helps communicate that the link is broken and identify it.
src It is a source attribute of the image tag which links to the image URL.
width It sets the width of the image size.
height It sets the height of the image size.

In this image, we have used the img tag with the attributes width and height. The image can be seen on the right-hand side.

The size of the image that is displayed can be adjusted by changing the values of width and height as shown in these


Making Images Responsive Using CSS

People visit websites from different devices like laptops and mobile phones. These devices have screens of different sizes. Hence, images on websites need to be made responsive to the devices accessing them so that they are optimally resized for better user experience.

To make the image responsive or resizable use the syntax :-

<img src=”url” style=”max-width:100%” alt=”img-responsive”>

Max-width property adjusts the image size according to size of the browser. By using max-width:100% you are telling the browser that the image should be displayed in full size without specifying its actual width and height. The browser will gather this information automatically and adjust it to match the screen size as the image is responsive.

Linking Your Image to Another Webpage

You can link your image to another webpage by using an anchor tag <a>. The syntax is as follows:

<a href=”” target=”_blank” ><img src=”url” width=”250px” height=”250px” ></a>

Here the <a> tag is used to link the two web pages and the target attribute is used to open the link in the new tab.

Run your program and click on the image. It will open in a new tab.




Image Extensions

The images on the web use different extensions according to their formats such as JPEG, PNG, GIF, etc. These are forms of raster graphics – the most common type of images. They are essentially a collection of pixels that represent the different colors in any image. When we save an image and link it to <img src=”#”>, we have to choose the format extension. Without this, the image cannot load on the web page.

JPEG is the most commonly used format of images in websites. SVG is also used nowadays in HTML5 for image formatting. SVG stands for scalable vector graphics. They are similar to raster graphics because they too comprise a grid of pixels in which each pixel represents an individual color. These pixels remain stay solid and don’t break even when we zoom into them.

To learn more about how web pages use media, follow this series. The next article introduces the audio and video tags in HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles