Web Assignment-4
23 March 2025 08:03 PM
Q1. Image Insertion and Source Path: Write HTML code to insert an image from an external URL and from a local
directory. Ensure the paths are relative for the local file and absolute for the external URL. Discuss the differences in
performance between both.
<!DOCTYPE html>
<html>
<head>
<title>Q1</title>
</head>
<body>
image from external link:<br><br>
<img src="[Link] alt="image">
<br><br>
image from local directory: <br><br>
<img src="[Link]">
</body>
</html>
Performance Differences:
• External Images: Can slow down page loading if the external server is slow or unavailable. Caching and CDNs help
mitigate this.
• Local Images: Load faster as they come from the same server but increase storage demands.
Q2. Image Resize with Width and Height: Create an HTML page that includes an image of size 800px by 600px. Write
code to resize the image to a width of 400px and height of 300px while maintaining the aspect ratio. What happens
if you only provide one value (width or height) and why?
<!DOCTYPE html>
<html>
<head>
<title>Q2</title>
web Ass4 Page 1
<title>Q2</title>
</head>
<body>
image of size 800px by 600px:
<br>
<img src="[Link]" width="800" height="600" alt="800/600img" >
<br>
image of size 400px by 300px:
<br>
<img src="[Link]" width="400" height="300" alt="400/300img" >
</body>
</html>
When Only Width or Height is Provided:
• The browser automatically scales the image to maintain its aspect ratio.
• If both width and height are set manually, the image might be distorted.
Q3. Image with Border and Alignment: Insert an image with a border of 5px solid red and align the image to the right side
of the page. Discuss how the align attribute of the image tag is deprecated and what modern alternatives exist for
web Ass4 Page 2
of the page. Discuss how the align attribute of the image tag is deprecated and what modern alternatives exist for
aligning images.
<!DOCTYPE html>
<html>
<head>
<title>Q3</title>
</head>
<body>
image with border<br>
<img src="[Link]" alt="Aligned image" style="border: 5px solid; color: red; float:
right;">
<br>
</body>
</html>
• The align attribute is outdated in HTML5.
• Instead, CSS properties like float: right; or display: flex; are used.
Q4. Image Map with Coordinates: Create an image map with multiple clickable areas. For example, make a clickable
map of a country with multiple regions using area tags. Define at least three distinct areas with their corresponding
hrefs and coordinates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Q4 </title>
</head>
<body>
<img src="[Link]" usemap="#countrymap" alt="Country Map">
<map name="countrymap">
<area shape="rect" coords="50,50,150,150" href="[Link]" alt="Region 1">
<area shape="circle" coords="300,200,50" href="[Link]" alt="Region 2">
<area shape="poly" coords="400,100,500,200,450,300" href="[Link]" alt="Region 3">
</map>
web Ass4 Page 3
</map>
</body>
</html>
Explanation
• The <map> tag defines an image map.
• The <area> tags specify clickable areas:
○ rect: Rectangle (x1, y1, x2, y2)
○ circle: Circle (center_x, center_y, radius)
○ poly: Polygon (series of x, y coordinates)
[Link] Loading of Images: Write HTML code to implement lazy loading for an image. Ensure that the image loads only when it’s
about to enter the viewport and explain the purpose of the loading="lazy" attribute.
<!DOCTYPE html>
web Ass4 Page 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q5</title>
</head>
<body>
Lazy Loading Image: <br><br>
<img src="[Link]" loading="lazy" alt="Lazy Loaded Image">
</body>
</html>
loading="lazy":
• Ensures images load only when they enter the viewport.
• Improves page speed by reducing initial load time.
• Useful for long pages with many images.
Q6. Alt Text and Accessibility: Insert an image and provide alt text for accessibility purposes. Additionally, write code for a scenario
where an image fails to load. What happens when the alt attribute is missing, and how can this affect SEO and user experience?
<!DOCTYPE html>
<html>
<head>
<title>Q1</title>
</head>
<body>
Accessible image: <br><br>
<img src="[Link]" alt="A scenic mountain view with a river">
<br><br><br>
Image failed to load:<br><br>
<img src="images/[Link]" alt="Could not be loaded">
</body>
</html>
• Accessibility: Screen readers rely on alt text to describe images for visually impaired users.
• SEO: Search engines use alt text to index images, improving search rankings.
• User Experience: If the image fails to load, alt text provides a fallback description.
web Ass4 Page 5
Q7. (optional) Image Scaling with CSS: Write HTML and CSS code to display an image that scales dynamically based on the screen
size. Include media queries for mobile responsiveness and discuss how to achieve this with CSS max-width and height:auto
properties.
<html>
<head>
<title>Q7</title>
</head>
<img src="[Link]" class="responsive-img" alt="Responsive Image">
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
@media (max-width: 600px) {
.responsive-img {
width: 80%;
}
}
</style>
</html>
Explanation:
• max-width: 100% ensures the image resizes to fit smaller screens.
• height: auto maintains the aspect ratio.
• The media query adjusts the size for screens under 600px.
Q8. Image Format and Performance: Insert two images on a webpage: one in PNG format and another in JPEG format. Discuss the
impact of file size and image format on page load time and performance. Also, consider using srcset for responsive images.
web Ass4 Page 6
impact of file size and image format on page load time and performance. Also, consider using srcset for responsive images.
<!DOCTYPE html>
<html>
<head>
<title>Q8</title>
</head>
<body>
PNG image<br>
<img src="[Link]" alt="image">
<br>
JPEG image<br><br>
<img src="[Link]" alt="image"><br>
Using Src set <br>
<img src="[Link]" srcset="[Link] 480w, [Link] 1024w"
sizes="(max-width: 600px) 480px, 1024px"
alt="Responsive Image">
</body>
</html>
Using srcset for Performance:
• Browsers select the best image based on screen resolution.
• Reduces unnecessary bandwidth usage.
Q9. (optional) CSS Image Effects (Filters and Transitions): Insert an image and apply a CSS filter effect (e.g., grayscale) and a
transition effect such that the image color turns back to full when the user hovers over it. Demonstrate the use of both effects in
modern web design.
web Ass4 Page 7
<html>
<head>
<title>Q9</title>
</head>
<img src="[Link]" class="image-effects" alt="Filtered Image">
<style>
.image-effects {
filter: grayscale(100%);
transition: filter 0.5s ease-in-out;
}
.image-effects:hover {
filter: grayscale(0%);
}
</style>
</html>
Q10. Responsive Image using srcset: Write HTML code that includes an image tag with multiple image sources defined in the srcset
attribute, tailored for different screen resolutions (e.g., 1x, 2x). Demonstrate how the browser selects the correct image based on
device resolution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q10</title>
</head>
<body>
<h2>Responsive Image using srcset</h2>
<img src="[Link]"
srcset="[Link] 1x, [Link] 2x, [Link] 3x"
alt="Responsive Image">
</body>
</html>
web Ass4 Page 8
Q11. Image Alignment with Flexbox: Create a webpage that centers an image both horizontally and vertically using Flexbox.
Discuss how Flexbox differs from older methods like align or float when aligning images within a container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q11</title>
<style>
/* Flexbox container */
.image-container {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
height: 100vh; /* Full viewport height */
background-color: #f0f0f0;
}
.centered-image {
max-width: 100%;
height: auto;
border: 2px solid #333;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Centered Image with Flexbox:</h1>
<div class="image-container">
<img src="[Link]" class="centered-image" alt="Centered Image">
</div>
</body>
</html>
web Ass4 Page 9
web Ass4 Page 10
