HTML CODES & EXAMPLES

HTML Images

Learn how to add images to webpages using HTML, control image size, create responsive images, add alternative text, create clickable images and use figure captions.

← HTML Links Start Learning →

What is an HTML Image?

Understanding the image element

The HTML <img> element is used to display an image on a webpage. Unlike most HTML elements, the <img> element does not have a closing tag.

The most important attributes are src, which specifies the image location, and alt, which provides alternative text for users who cannot see the image.

Basic Image Syntax

The simplest way to display an image

image.html

<img
  src="image.jpg"
  alt="A beautiful landscape">

The src Attribute

Specify the image source

The src attribute tells the browser where the image file is located.

src-example.html

<img
  src="images/computer-lab.jpg"
  alt="Modern computer laboratory">

The alt Attribute

Provide meaningful alternative text

The alt attribute describes the image. It is useful for accessibility and when an image cannot be loaded.

alt-example.html

<img
  src="computer.jpg"
  alt="Student learning on a desktop computer">

Best Practice: Write concise and descriptive alt text that explains the purpose or content of the image.

Image Width and Height

Control the displayed dimensions

image-size.html

<img
  src="computer.jpg"
  alt="Computer training"
  width="600"
  height="400">

Image Size with CSS

Use CSS for flexible image sizing

css-image-size.html

<img
  src="computer.jpg"
  alt="Computer training"
  class="training-image">

<style>

.training-image{
  width:600px;
  max-width:100%;
  height:auto;
}

</style>

Responsive Image

Make images adapt to different screen sizes

responsive-image.html

<img
  src="computer-lab.jpg"
  alt="Computer laboratory"
  class="responsive-image">

<style>

.responsive-image{
  max-width:100%;
  height:auto;
  display:block;
}

</style>

Rounded Image

Use CSS border-radius

rounded-image.html

<img
  src="student.jpg"
  alt="Student learning"
  class="rounded-image">

<style>

.rounded-image{
  width:300px;
  max-width:100%;
  border-radius:20px;
}

</style>

Circular Image

Create a round profile image

circle-image.html

<img
  src="profile.jpg"
  alt="Instructor profile"
  class="profile-image">

<style>

.profile-image{
  width:180px;
  height:180px;
  object-fit:cover;
  border-radius:50%;
}

</style>

Image as a Link

Make an image clickable

image-link.html

<a
  href="https://www.sncec.in/"
  target="_blank"
  rel="noopener noreferrer">

  <img
    src="sncec-logo.jpg"
    alt="Shree Narayan Computers and Education Center">

</a>

Figure and Figcaption

Add a caption to an image

figure.html

<figure>

  <img
    src="computer-lab.jpg"
    alt="Modern computer laboratory">

  <figcaption>
    Modern Computer Education Laboratory
  </figcaption>

</figure>

Lazy Loading

Improve page loading for images

lazy-loading.html

<img
  src="computer-lab.jpg"
  alt="Computer laboratory"
  loading="lazy">

Object Fit

Control how an image fits inside a box

object-fit.html

<img
  src="student.jpg"
  alt="Student learning"
  class="cover-image">

<style>

.cover-image{
  width:400px;
  height:250px;
  max-width:100%;
  object-fit:cover;
  border-radius:15px;
}

</style>

Important Image Attributes

Common attributes used with the img element

src

Specifies image source

src=”image.jpg”

alt

Alternative text

alt=”Student”

width

Image width

width=”500″

height

Image height

height=”300″

Loading behavior

loading=”lazy”

class

CSS styling hook

class=”image”

Common Image Formats

Popular formats used on websites

JPG / JPEG

Suitable for photographs and detailed images.

PNG

Useful when transparency or lossless quality is needed.

Live HTML Example

Run the complete image example

LIVE PREVIEW

Practice Task

Test your HTML image skills

🎯 Create an Image Gallery

Create a simple image gallery using HTML.

Add at least three images.
Give every image meaningful alt text.
Make the images responsive.
Add rounded corners using CSS.
Add a figure caption to at least one image.
Make one image clickable.
Use lazy loading for additional images.

`;document.getElementById( "sncecImagesPreview" ).srcdoc = code;}/* ========================= AUTO RUN ========================= */document.addEventListener( "DOMContentLoaded", function(){sncecImagesRun();} );

SNCEC PORTAL