HTML is a fundamental skill for web development, and learning how to use images properly is an important part of creating engaging websites. The <img> tag allows you to embed images in your web pages, and with attributes like src, alt, width, and height, you can control how these images appear and behave on the website.
In this article, we’ve put together 30 simple multiple-choice questions (MCQs) on HTML images, perfect for beginners and advanced learners. These questions are great for students preparing for exams or placements, and anyone who wants to practice using images in HTML.
To add an image in HTML, use the <img> tag with the src and alt attributes.
<img src="image.jpg" alt="Description of the image">
2. What attributes are essential for the <img> tag?
The essential attributes for the <img> tag are src and alt.
<img src="image.jpg" alt="Description of the image">
To specify the source of an image in HTML, use the src attribute within the <img> tag.
<img src="path/to/your/image.jpg" alt="Description of the image">
The purpose of the alt attribute in an image tag is to provide a text description of the image.
<img src="path/to/your/image.jpg" alt="Description of the image">
The width and height attributes are used to adjust the size of an image in HTML.
<img src="image.jpg" alt="Description of image" width="300" height="200">
Yes, it’s better to use CSS to style images instead of the width and height attributes. CSS allows for more flexibility and makes it easier to adapt images to different screen sizes.
If the image fails to load, the alt text is displayed as a fallback
Yes, you can link an image to another webpage by wrapping the <img> tag with an anchor <a> tag.
<a href="https://example.com">
<img src="image.jpg" alt="Descriptive Text">
</a>
A responsive image is used to ensure that the image adjusts its size based on the screen or container size. To make an image responsive, use CSS with the max-width: 100% property.
<img src="image.jpg" alt="Descriptive Text">
CSS Code:
img {
width: 100%;
height: auto;
}
@media (min-width: 600px) {
img {
width: 50%;
}
}The srcset attribute is used to provide multiple image options for different screen sizes or resolutions.
<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="Descriptive Text">
11. How do you use the <picture> element?
The <picture> element is used to specify different images for different screen sizes or formats. You define multiple <source> tags inside the <picture> element.
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 400px)">
<img src="small.jpg" alt="Descriptive Text">
</picture>
The <figure> element is used to group an image with its caption, and the <figcaption> element provides a description for that image.
<figure>
<img src="image.jpg" alt="A descriptive image">
<figcaption>This is a caption for the image.</figcaption>
</figure>
The loading attribute in the <img> tag is used to control how images are loaded on a web page.
<img src="image.jpg" alt="A descriptive image" loading="lazy">
The background-image property is used to set an image as a background in CSS.
<div class="background-image"></div>
CSS Code:
.background-image {
width: 100%;
height: 400px;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}15. What is the difference between background-image and the <img> tag?
The background-image property is used to set an image as the background of an element, while the <img> tag is used to add an image directly into the content of a page.
The object-fit property is used to control how an image or video fits within its container, maintaining its aspect ratio or filling the container in different ways.
img {
object-fit: cover; /* The image will cover the entire container */
}The border property in CSS is used to add a border around an image.
<img src="image.jpg" alt="Description of image" class="bordered-image">
CSS Code:
.bordered-image {
border: 5px solid black; /* Change the width, style, and color as needed */
}Image maps in HTML are used to define clickable areas within an image, which linkes each area to different destinations. This is done with the <map> and <area> tags.
<img src="image.jpg" alt="Map Image" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="Link 1">
<area shape="circle" coords="400,300,50" href="https://example.com/link2" alt="Link 2">
</map>
The title attribute in an image tag is used to display additional information when a user hovers over the image.
<img src="image.jpg" alt="Description of image" title="This is a helpful tooltip">
To center an image using CSS, use the display: block and margin: auto properties.
<img src="image.jpg" alt="Centered image" class="centered">
CSS Code:
.centered {
display: block;
margin: auto;
width: 50%; /* Adjust as needed */
}21. What is the filter property in CSS, and how can it be applied to images?
The filter property in CSS is used to apply visual effects to images, such as blur, brightness, or grayscale.
<img src="image.jpg" alt="Filtered image" class="filtered">
CSS Code:
.filtered {
filter: grayscale(50%); /* Makes the image partly grayscale */
}To make an image grayscale using HTML and CSS, apply the filter property in CSS.
<img src="image.jpg" alt="Grayscale image" class="grayscale">
CSS Code:
.grayscale {
filter: grayscale(100%); /* Applies full grayscale effect */
}23. How to apply a hover effect on an image?
To apply a hover effect on an image, use the :hover pseudo-class in CSS.
<img src="image.jpg" alt="Image" class="hover-effect">
CSS Code:
.hover-effect {
transition: transform 0.3s; /* Smooth transition */
}
.hover-effect:hover {
transform: scale(1.1); /* Enlarge image on hover */
}The <figure> element wraps the image, while the <figcaption> provides a description or title for that image, improving accessibility and context.
<figure>
<img src="image.jpg" alt="Description of the image">
<figcaption>This is the caption for the image.</figcaption>
</figure>
25. How do you provide fallback content for images?
To provide fallback content for images, use the alt attribute in the <img> tag. The text in the alt attribute will be displayed if the image fails to load.
<img src="image.jpg" alt="This image cannot be displayed. Here is a description of the image.">
26. What are SVG images, and how do you use them in HTML?
SVG (Scalable Vector Graphics) images are XML-based vector images that can scale without losing quality. To use an SVG image in HTML, you can use the <img> tag, or embed the SVG directly with the <svg> tag.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Yes, images can be animated using CSS. You can use the @keyframes rule to create animations for images.
<img src="image.jpg" alt="Animated Image" class="animated-image">
CSS Code:
.animated-image {
transition: transform 0.5s ease;
}
.animated-image:hover {
transform: scale(1.2);
}- jpg (JPEG) is used for high-quality images with lossy compression, suitable for photographs with many colors.
- png supports lossless compression and transparency, ideal for images with sharp edges or transparency, like logos.
- gif is used for simple animations and supports lossless compression with a limited color palette (256 colors).
- Use the appropriate image format (.jpg for photos, .png for transparent images, .webp for smaller file sizes).
- Compress images to reduce file size without sacrificing too much quality.
- Use responsive images (e.g., srcset) to serve different sizes based on the user's device or screen resolution.
To preload images in HTML use the <link> tag with the rel attribute set to "preload" and the as attribute set to "image."
HTML Code :
<link rel="preload" href="image.jpg" as="image">
- Lack of alt text: Images without descriptive alt text can be inaccessible to screen readers for visually impaired users.
- Poor contrast: Images with low contrast may be hard to see for users with visual impairments.
- Missing context: Images used as links or buttons without proper text labels can confuse screen reader users.
To create a CSS sprite with images, combine multiple images into one large image file and use the background-position property to display different parts of the image.
<div class="sprite"></div>
CSS Code:
.sprite {
background-image: url('sprite.png');
width: 100px; /* Width of the sprite section */
height: 100px; /* Height of the sprite section */
background-position: -50px -50px; /* Position for the specific image */
}To implement lazy loading for images, use the loading="lazy" attribute in the <img> tag.
<img src="image.jpg" loading="lazy" alt="Description of image">
The ismap attribute in the <img> tag makes the image a server-side image map.
<img src="map.jpg" usemap="#map" ismap alt="Image map example">
<map name="map">
<area shape="rect" coords="34,44,270,350" href="link.html" alt="Link">
</map>
To create a parallax scrolling effect, we set a background image with CSS and use the background-attachment: fixed; property.
<div class="parallax"></div>
CSS Code:
.parallax {
background-image: url('background.jpg');
height: 500px; /* Set height of the section */
background-attachment: fixed;
background-size: cover; /* Cover the entire section */
} Similar Reads
HTML Table Exercises
This HTML Table Exercise provides practical questions and will cover all possible questions based on HTML Tables to ace you in the interview. 1. What is the basic HTML tag used to create a table?The <table> tag is used to create a table in HTML. This tag starts the table structure. <table
8 min read
HTMLText Styling Exercises - 2024
HTML text styling is a foundational skill in web development, essential for creating visually appealing and readable content. From basic font changes to advanced CSS effects, these exercises will guide you through various methods to style text in HTML. Let's explore over 30+ exercises, progressing f
8 min read
HTML article Tag
The HTML <article> tag defines a self-contained, independent piece of content like a blog post, news article, or comment. It is designed for content that can be independently distributed, shared, or reused, providing semantic meaning to the content. This tag is introduced in HTML5. [GFGTABS] H
3 min read
HTML aside Tag
The <aside> tag is used to describe the main object of the web page more shortly like a highlighter. It identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The <aside> tag contains mainly author inform
3 min read
HTML Background Images
HTML background images are graphics applied to the background of HTML elements, often used in webpage design for aesthetic or branding purposes. They're set using CSS background-image property, allowing for single or repeating images, gradients, or patterns to enhance visual appeal. Understanding HT
3 min read
Essential HTML Tags
HTML stands for HyperText Markup Language. It is an important language to design web pages or websites. These websites are visible to anyone on the internet. HTML is a combination of Hypertext and Markup language. Where hypertext is a link between the webpages, and markup language is used to define
5 min read
HTML Div Tag
The <div> tag is one of the most commonly used tags in HTML. It helps to divide a webpage into sections. It acts as a container for different content, which can be styled using CSS or controlled with JavaScript. You can easily customize it with class or id attributes, and it can hold various t
6 min read
HTML IMG Tag
The HTML <img> tag is used to embed images in a web page. It is an empty or self-closing tag, meaning it doesn’t have a closing tag. It allows to display images from various sources, such as files on a website or URLs from other websites. [GFGTABS] HTML <html> <head></head>
3 min read
HTML Examples
HTML (HyperText Markup Language) is the backbone of the web, forming the structural foundation of every website. Whether you're just starting out or you're an experienced developer in need of a quick refresher, learning through examples is one of the most effective ways to understand HTML in action.
6 min read
HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings. For example, the <p> el
5 min read