HTML Images

HTML images are used to display images on web pages. The <img> tag is a self-closing element.

Image Tag

<img src="image.jpg" alt="Image description">

Image Attributes

src

<img src="image.jpg" alt="Image">
<img src="images/image.jpg" alt="Image">
<img src="https://example.com/image.jpg" alt="Image">

alt

<img src="logo.png" alt="University Logo">
<img src="photo.jpg" alt="">

width and height

<img src="image.jpg" alt="Image" width="300" height="200">
<img src="image.jpg" alt="Image" width="50%">

loading

<img src="image.jpg" alt="Image" loading="lazy">
<img src="image.jpg" alt="Image" loading="eager">

Case Study: Campus Photo Gallery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Photo Gallery</title>
    <style>
        .galeri {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .galeri img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h1>Campus Photo Gallery</h1>

    <div class="galeri">
        <img src="building1.jpg" alt="Administration Building" loading="lazy">
        <img src="building2.jpg" alt="Engineering Building" loading="lazy">
        <img src="building3.jpg" alt="Library" loading="lazy">
        <img src="building4.jpg" alt="Laboratory" loading="lazy">
        <img src="building5.jpg" alt="Field" loading="lazy">
        <img src="building6.jpg" alt="Mosque" loading="lazy">
    </div>
</body>
</html>

Everyday Case Study

Case: A developer needs to display a lecturer's profile photo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Faculty Profile</title>
    <style>
        .profile {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .profile img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="profile">
        <img src="faculty.jpg" alt="Photo of Dr. Susanti">
        <div>
            <h2>Dr. Susanti, M.Kom.</h2>
            <p>Computer Science Department</p>
            <p>Specialization: Web Programming</p>
        </div>
    </div>
</body>
</html>

Image Maps

<img src="map.jpg" alt="Campus Map" usemap="#campus">

<map name="campus">
    <area shape="rect" coords="0,0,100,100" href="building1.html" alt="Building 1">
    <area shape="circle" coords="150,150,50" href="building2.html" alt="Building 2">
    <area shape="poly" coords="200,0,250,100,200,100" href="building3.html" alt="Building 3">
</map>

Picture Element

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image">
</picture>

Figure and Figcaption

<figure>
    <img src="building.jpg" alt="Engineering Building">
    <figcaption>Engineering Building - Technology University</figcaption>
</figure>

Best Practices

1. Always use alt: For accessibility
2. The right format: JPG for photos, PNG for graphics
3. Optimize size: Compress images before uploading
4. Use lazy loading: For performance
5. Responsive images: Use the picture element

Summary

HTML images add visuals to web pages. Use alt text for accessibility and optimization for performance.