HTML Images Tag | Image Size, Example
In this tutorial, we will learn how to add images on a HTML web page or document. We will also learn how to add alternative text to images to improve accessibility for the site visitors who use screen readers.
An image is a digital picture, or graphic displayed on the web page to improve the design and the appearance of a web page. It is an important part of the most web pages.
We can add an image on an HTML page or document using <img> tag or element. It is an inline tag that is used to display images on HTML pages. Here, img stands for “image”. The img tag is an empty tag, meaning there is no closing </img> tag.
The general syntax to add an image in HTML document or page using <img> element is as follows:
<img src="path to the image" alt="Description of image">
In the above syntax, an <img> tag can have several attributes, but the most important attributes are: src attribute, specifying the path to the image you want to display and an alt attribute, which provides a description of the image.
The src Attribute
The src, which stands for “source”, is an attribute of the <img> tag that tells the browser where to find the image. It specifies the path (URL) to the image you want to display. This can be a relative path or an absolute URL. The path points to the location where the image is stored.
Choose the relative URL for images if you are creating it locally and then uploading to a server. When the web browser loads a web page, it gets the image from a web server and inserts it into the page. If the browser does not get the image on the specified path, it will show a broken image icon to your visitors on the web page.
The alt Attribute
The alt, which stands for “alternative text” is an attribute of <img> tag that provides an alternative text or a textual description of the image. It must appear on every < img > element and its value should be a text description of the image. It is important for accessibility purposes for the following reasons:
- If the browser could not display the image due to loading errors or slow internet connection, this alternative text will show instead.
- Web users with visual impairments often use software called a screen reader to read a page to them, in which case the alt text describes the image they cannot view.
- Providing a text alternative helps search engines to index your pages as well as helps visitors finding your site.
Example to Add Image on HTML Web Page
Let’s take a basic example in which we will add an image on the HTML web page using relative URL.
[adinserter block=”5″]
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example to add an image in HTML</title>
</head>
<body>
<p>This is an image displayed on webpage.</p>
<img src="image.png" alt="world computer literacy day">
</body>
</html>
Output:
In this example, we have added an image in the HTML document using relative URL. Here, src=”images/my-image.jpg” is a relative URL that points to an image named image.jpg located in the current directory, meaning the HTML file is in the same directory as the image.png image.
In other words, image.png is located in the same directory as the HTML file. The filename of the image is image.png. If you keep the image in a different folder, you need to specify the path to that folder. Look at the example below.
Example 2:
<img src="images/picture.png" alt="A beautiful sunrise">
In this example, src=”images/picture.png” is a relative URL that points to an image named picture.png stored inside an image directory/folder. This image folder is located in the same folder as HTML file. The alt=”A beautiful sunrise” is the alt (alternative text) attribute providing a text description of the image.
[adinserter block=”2″]
If you need to reference picture.png from a different subdirectory, you need to navigate up to the root directory and then into the images/ subdirectory. You can use .. to move up a directory level from the current directory.
Example 3:
<img src="../images/picture.png" alt="A beautiful sunrise">
Example 4:
<img src="../../images/picture.png" alt="A beautiful sunrise">
In this example, we have used (..) twice to move up two directory levels from the current directory and then move into the images/ directory to access picture.png.
Example 5:
<img src="/image.png" alt="Description of the image">
This example code adds an image named image.png on the webpage that is located in the root directory of the website. The src (source) attribute specifies the path to the image file you want to display.
The path begins with a forward slash /, which indicates that it is an absolute path relative to the root directory of the website. This means that no matter where your HTML file is located within the website’s directory structure, the image will always be loaded from the specified path, starting from the root.
Example 6:
<!-- Using an absolute URL for the image path --> <img src="https://example.com/images/my-picture.png" alt="Description of the image">
In this example, src=”https://example.com/images/my-picture.png” is an absolute URL that specifies the complete path to the image, including the protocol (https) and the domain name (example.com). The absolute URL is useful when the image is hosted on a different server or you want to point it via its full URL. In other words, you must specify an absolute (full) URL in the src attribute to point to an image on another server or website.
HTML Image Size: Height and Width Attributes
We can use the style attribute of the CSS to specify the width and height of an image. The height and width attributes specify the height and width of the image. The values for these attributes are almost always shown in pixels. However, there are optional. If not specified, the browser will display the image at its natural size.
Let’s take an example in which we have an image named “fruits.png” stored in the same directory as the HTML file, and we want to display it at a specific size.
Example 7:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example to add an HTML image at its specific size</title>
</head>
<body>
<p>This is an image displayed at its specific size on the webpage.</p>
<img src="fruits.png"" alt="List of fruits" height = "250" width = "400">
</body>
</html>
Output:
Specifying the size of the image is considered good practice. Therefore, you should try to use these attributes in any image that you want to display on your pages. Using the width and height attributes to specify the image size in advance also helps a page to load faster and more smoothly. This is because the browser knows how much space to reserve to the image and it can correctly render the rest of the page while the image is still loading.
Without these attributes, the browser wouldn’t know the size of the image until it is fully downloaded. This can cause the layout of the page to shift as images load, which is often referred to as layout shift. Layout shifts can be frustrating for users, especially if they are trying to read text or click on a link and the page content moves unexpectedly.
Note that you should not use images that are bigger than they are shown on screen. For example, you should not use an image that is 800 pixels by 800 pixels if you will only be showing it at 100 pixels by 100 pixels on the screen. This is because the smaller an image, the smaller the size of the file (in terms of kilobytes). And the smaller the file size, the quicker the image loads in the browser.
Using Image as a Link in HTML
It’s easy to turn an image into a link. To use an image as a link, you simply place <img> tag inside the <a> tag. Here’s an example below:
Example 8:
<a href="https://mysite.com"> <img src="/image.jpg" alt="Descriptive Text" width="300" height="200"> </a>
In this example, we have placed an image <img> tag inside the anchor <a> tag to turn the image into a clickable link. The src attribute specifies the path to the image, and the alt attribute provides an alternative text for the image, which improves accessibility. The width and height attributes specify the dimensions of the image in pixels.
Image Floating
We can use the float property of CSS to float and image to the left or right, and the text will wrap around it accordingly. Here is a basic example below:
Example 9:
<!DOCTYPE html>
<html>
<head>
<title>Floating Image Example</title>
</head>
<body>
<img src="image.png" alt="Descriptive text" style="float: left; margin-right: 20px;">
<p>
Here is some text that will wrap around the floated image. The image is floated to the left, and there's a margin to ensure the text doesn't touch the image's border.
</p>
</body>
</html>
Output:
In this example, the image is floated to the left of the text using the style attribute within the <img> tag, which includes float: left; and margin-right: 20px;. This makes the text wrap around the right side of the image.
Best Practice to Insert Images on HTML Webpage
Adding images into web pages effectively is crucial for both user experience and SEO. Here are some best practices to follow when adding images to the HTML document or a web page:
- Choose relevant images that are directly relevant to the content of the page. Relevant images can enhance user engagement.
- Use tools to optimize or compress image size without significantly sacrificing quality. Large images can slow down page loading times, affecting user experience and SEO.
- Use the appropriate image file type, such as JPEG, PNG, SVG, GIF, or WebP.
- Always use the alt text attribute in the <img> tag that enhances accessibility.
- Use descriptive text to name your image file with relevant keywords. Avoid generic filenames like “image1.jpg”.
- Specify width and height of the image in HTML, which is a good practice to prevent layout shifts while the page is loading. It improves the core web vital metric.
- If your site uses a lot of images, creating an image sitemap is a good practice that helps search engines to discover images that might not be found through crawling.
- Use tools like Google’s PageSpeed Insights to test the performance of your webpage and follow recommendations for image optimization.
Common Image Formats Supported by All Browsers
The most common types of image formats that are supported across all major browsers (Chrome, Edge, Firefox, Safari, Opera) include:
JPEG (Joint Photographic Experts Group): This format is suitable for photos and images with lossy compression. JPEG reduces file size but losing some quality. Its file extension is .jpg, .jpeg.
PNG (Portable Network Graphics): This format provides images with lossless compression, meaning no quality is lost. It is generally used for logos, icons, and complex images. Its file extension is .png.
GIF (Graphics Interchange Format): It is best for simple animations and images with transparency. But it is limited to 256 colors, making it less suitable for detailed images. Its file extension is .gif.
SVG (Scalable Vector Graphics): It is a vector image format used for logos and icons that need to scale without losing quality. Its file extension is .svg.
WebP: This is a modern format that offers superior lossless and lossy compression for images on the web. It offers smaller file sizes compared to PNG and JPEG, with similar or better quality.
In conclusion, HTML images not only improve the design and the appearance of a web page but also enhance the user engagement. The <img> tag embeds images in HTML document. Proper use of the alt attribute improves SEO and makes your website more accessible to users with visual impairments. Hope that you will have understood all the basic syntax of adding images in HTML webpage.
Happy coding!!!
