Skip to main content

HTML Images

A page with only text is like a book with no pictures. It can be great, but a photo of a harbor at sunrise, a chart that shows a trend, or a diagram that explains a machine can say in one second what takes a paragraph to describe.

Images are also where web pages most often go wrong. They can make a page slow, break on small screens, shut out people who cannot see them, and cost visitors real money on mobile data. The good news is that every one of those problems has a simple, well-known solution in HTML. In this section, you will learn how to add images that look sharp, load fast, and work for everyone.


What You Will Learn​

In this section, you will be able to:

  • Add an image to a page with the <img> element
  • Write a correct src and a meaningful alt text
  • Set width and height so your page does not jump around while loading
  • Pick the right image format for photos, graphics, and icons
  • Serve the right size to every screen with responsive images, srcset, and sizes
  • Choose formats and crops with the <picture> element
  • Speed up your pages with lazy loading
  • Add captions with <figure> and <figcaption>
  • Make images accessible to people who cannot see them
Prerequisites

You should know how to write basic HTML elements and how file paths work. If you need a refresher, read Relative URLs first.

Your First Image​

An image takes only one element. Here is the smallest useful version.

index.html
<img
  src="images/harbor.jpg"
  alt="Fishing boats resting in a calm harbor at sunrise"
  width="300"
  height="160"
/>

The demo above uses a small drawing built right into the page, because this lesson has no image files to load. In your own project, src points to a real file such as images/harbor.jpg.

The Anatomy of an Image​

An <img> is a void element: it has no content and no closing tag, like <br /> and <hr />. All the information lives in its attributes.

<img src="images/harbor.jpg" alt="Fishing boats at sunrise" width="300" height="160" />
AttributeWhat it doesRequired?
srcThe address of the image fileYes
altA text alternative for people and tools that cannot see the imageYes, always
width and heightThe image's size in pixels, so the browser can reserve spaceStrongly recommended
loadingWhether to load the image right away or later (lazy)Optional
srcset and sizesSeveral versions of the image for different screensOptional

Three Questions to Ask About Every Image​

Before you add an image, ask yourself these three questions. They guide almost every decision in this section.

QuestionWhy it mattersWhere you will learn it
Does the image mean something?Meaningful images need helpful alt text. Decorative ones need an empty altSrc and Alt, Accessible Images
How big will it be on screen?A huge file on a small phone wastes data and timeResponsive Images, Srcset and Sizes
What is the best file type?A photo, a logo, and a chart each have a best formatImage Formats

Choosing a Format at a Glance​

You will study formats in depth later. This quick map gets you started.

Your image is...Good choiceWhy
A photographJPEG, WebP, or AVIFSmall files for rich colors
A logo, icon, or simple illustrationSVGSharp at any size, and tiny
A screenshot or image with sharp textPNG or WebPKeeps edges crisp
A short animationAnimated WebP or videoMuch smaller than a GIF

Images and Page Speed​

Images are usually the heaviest part of a web page. On many sites, they make up more than half of everything a visitor has to download. A few habits make a big difference.

  1. Resize before you upload. Do not publish a 6000-pixel photo to show it at 600 pixels.
  2. Use modern formats like WebP and AVIF when they fit.
  3. Give the browser sizes with width and height, so the page does not jump.
  4. Offer several versions with srcset, so phones download smaller files.
  5. Load later what is not visible yet with loading="lazy".

Visitors around the world use slow connections and pay for each megabyte. Efficient images are not just a technical nicety. They make your page usable and affordable for everyone.

Images and Accessibility​

Some visitors cannot see your images. They may use a screen reader, have a very slow connection where images have not loaded, or use a text-only browser. The alt attribute is how your page speaks to them.

<img src="chart.png" alt="chart" />
<img src="photo1.jpg" alt="IMG_20261003_0457.jpg" />
<img src="team.jpg" />
The one-sentence test

Imagine reading the page aloud to a friend over the phone. What would you say in place of the picture? That sentence is your alt text.

Your Learning Path​

Follow the lessons in order. Each one builds on the one before.

Common Beginner Mistakes​

Here are a few traps worth knowing about before you start. Each one has its own lesson later.

MistakeWhat goes wrongWhere you will fix it
Leaving out alt, or writing "image"Screen reader users get nothing, or noiseSrc and Alt
A wrong file pathThe image shows as a broken iconSrc and Alt
No width and heightThe text jumps down when the image finally loadsWidth and Height
Using a huge photo for a small spaceSlow pages and wasted dataResponsive Images
Using PNG for every photoFiles several times bigger than neededImage Formats
Loading every image at onceThe page feels slow, even for images far below the foldLazy Loading
Putting important text inside an imageIt cannot be searched, translated, or read aloudAccessible Images
Using someone else's picture without permissionCopyright troubleSee the tip below
Use images you have the right to use

Do not copy pictures from other websites. Use your own photos and drawings, or images with a license that allows reuse, and follow its rules for credit. When in doubt, ask or choose a different picture.

Images for a Global Audience​

Your visitors come from many countries and cultures. A few thoughtful habits help.

  • Write alt text in the language of the page, and set the lang attribute.
  • Avoid text inside images. It cannot be translated by browsers or read aloud. Put the words in HTML instead.
  • Choose pictures that many people can relate to. Gestures, symbols, and clothing can mean different things in different places.
  • Think about data costs. Smaller files are kinder to visitors on limited plans.
  • Show diverse people when your pictures include people.

Quick Recap​

Test yourself. Click a question to reveal the answer.

1. Which element adds an image, and does it need a closing tag?

The <img> element. It is a void element, so it has no closing tag.

2. Which two attributes does every image need?

src, the address of the file, and alt, a text alternative for people and tools that cannot see the image.

3. Why should you set width and height?

They let the browser reserve space before the image loads, so the page does not jump.

4. What should the alt be for a purely decorative image?

An empty value, alt="", so screen readers skip it.

5. Name two ways to make images load faster.

Resize them before uploading, use modern formats like WebP or AVIF, offer smaller versions with srcset, and use loading="lazy" for images below the fold.

Key Takeaways​

  • Add images with the <img> element, which needs src and alt.
  • Write alt text that says what the image means. Use alt="" for decoration only.
  • Set width and height to keep your layout steady while images load.
  • Choose formats, sizes, and loading behavior with page speed and data costs in mind.
  • Make every image work for everyone: describe it, caption it when it helps, and keep important text out of pictures.

Ready to begin? Start with The img Element.