HTML Images: How to Add and Optimize Images

Text only pages get boring fast. Images are what make a webpage visually engaging and they are also one of the biggest factors affecting how fast your site loads. In this post we are going hands on with the <img> tag  adding images sizing them linking them and optimizing them so your pages stay fast. Grab a couple of image files on your computer and lets get building.

Quick Theory: The Basic Image Tag

Images are added using the self closing <img> tag which requires at minimum a src attribute (pointing to the image file) and should always include an alt attribute (a text description).

<img src="photo.jpg" alt="A description of the photo">

Thats the core concept  now lets put it to work with real examples.

Practical: Adding Your First Image

Save any image file (like a .jpg or .png) in the same folder as your HTML file name it something simple like photo.jpg, and add this code:

<h2>My Trip to the Mountains</h2>
<img src="photo.jpg" alt="A view of snow-capped mountains at sunset">
<p>This photo was taken during my hiking trip last summer.</p>

Open the file in your browser and you should see the image displayed. If it does not show up double check that the filename in your code exactly matches the actual file name including the file extension and capitalization.

Practical: Why the alt Attribute Actually Matters

Try this experiment  rename your image file so the src path is broken then reload the page.

<img src="wrong-filename.jpg" alt="A view of snow-capped mountains at sunset">

Instead of a broken image icon with nothing useful the browser displays your alt text in its place. This is exactly why alt text is not optional  its your fallback plan when images fail to load plus its read aloud by screen readers for visually impaired users and search engines use it to understand what the image shows which helps with image search rankings.

Try This: Write Good vs Bad Alt Text

<!-- Bad alt text -->
<img src="dog.jpg" alt="image">
<img src="dog.jpg" alt="dog.jpg">

<!-- Good alt text -->
<img src="dog.jpg" alt="A golden retriever playing fetch in a park">

Good alt text describes whats actually in the image specifically enough that someone who can not see it would still understand whats being shown. Avoid generic words like "image" or "photo" and avoid just repeating the filename.

Practical: Controlling Image Size

<img src="photo.jpg" alt="Mountain view" width="400" height="300">

Add width and height attributes (values are in pixels) and reload your page  the image should now display at exactly 400 by 300 pixels regardless of its original size. Try changing these numbers and observe how the image scales.

Try This: What Happens If You Only Set One Dimension

<img src="photo.jpg" alt="Mountain view" width="400">

Test this version  notice that the height adjusts automatically to keep the images original proportions. This is generally the safer approach since setting both width and height to mismatched values can stretch or squash your image awkwardly.

Practical: Linking to a Larger Version of an Image

<a href="photo-large.jpg">
  <img src="photo-thumbnail.jpg" alt="Mountain view - click to enlarge" width="200">
</a>

If you have two versions of the same image (a small thumbnail and a full size version) try this pattern  clicking the small image opens the full size one directly in the browser. This is a common simple way to build a basic image gallery without any JavaScript.

Practical: Adding a Caption with <figure> and <figcaption>

<figure>
  <img src="photo.jpg" alt="Snow-capped mountains at sunset" width="500">
  <figcaption>The view from Camp Base taken at 6 AM.</figcaption>
</figure>

Try this in your file  <figure> groups an image together with its caption as a single semantic unit and <figcaption> displays a caption right below it. This is the correct meaningful way to add captions rather than just placing a plain paragraph next to an image.

Practical: Using Images from a Website (External URLs)

<img src="https://example.com/images/photo.jpg" alt="Example image hosted externally">

Instead of a local filename you can also point src directly to an image hosted somewhere else on the web. This works but keep in mind that it depends entirely on that external site staying online and keeping that exact URL working  if it goes down or the image gets moved your image breaks too.

Practical: Building a Simple Photo Gallery Page

Lets combine everything into a small gallery layout. Try building this with three images of your own.

<h1>My Photo Gallery</h1>

<figure>
  <img src="photo1.jpg" alt="Sunset over the beach" width="300">
  <figcaption>Sunset at Clearwater Beach</figcaption>
</figure>

<figure>
  <img src="photo2.jpg" alt="City skyline at night" width="300">
  <figcaption>Downtown skyline, taken from the rooftop</figcaption>
</figure>

<figure>
  <img src="photo3.jpg" alt="Forest trail in autumn" width="300">
  <figcaption>Hiking trail in October</figcaption>
</figure>

Save this and open it in your browser. You now have a functional accessible photo gallery using nothing but <figure> <img> and <figcaption> tags.

Quick Theory: Choosing the Right Image Format

Before optimizing images it helps to know which format to use in the first place.

• JPG/JPEG: Best for photographs with lots of colors and gradients.
• PNG: Best for images needing transparency or graphics with sharp edges like logos.
• WebP: A modern format offering smaller file sizes than JPG or PNG at similar quality  supported by all major modern browsers.
• SVG: Best for icons and simple graphics since its vector-based and stays sharp at any size.

Practical: Using the Modern <picture> Tag with WebP Fallback

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Mountain view">
</picture>

If you have both a .webp and a .jpg version of the same image try this pattern. The browser will use the WebP version if it supports that format, and automatically fall back to the JPG if it does not. This gives you the best of both worlds  smaller file sizes for modern browsers with a safety net for older ones.

Practical: Lazy Loading Images for Better Performance

<img src="photo.jpg" alt="Mountain view" loading="lazy">

Add loading="lazy" to any image, especially ones further down your page. This tells the browser to delay loading that image until the user actually scrolls near it which can significantly speed up your page's initial load time particularly on pages with lots of images.

Optimization Checklist (Practical Steps You Can Apply Today)

• Resize images to the actual dimensions you need before uploading  do not upload a 4000px wide photo just to display it at 400px.
• Compress images using a tool like TinyPNG or Squoosh before adding them to your site.
• Use WebP where possible with a JPG or PNG fallback.
• Add loading="lazy" to images that are not visible on initial page load.
• Always include descriptive specific alt text.
• Set explicit width and height (or use CSS aspect-ratio) to prevent layout shifting while images load.

Mistake to Avoid: Missing Alt Text

<!-- Don't do this -->
<img src="team-photo.jpg">

Leaving out alt entirely is a common but easily avoidable mistake. Even for decorative images that do not need a description its better practice to use an empty alt="" rather than omitting the attribute altogether so screen readers know to skip it intentionally.

Mistake to Avoid: Using Massive Unoptimized Images

<!-- Avoid uploading a 5MB image and just shrinking it with width/height -->
<img src="huge-original-photo.jpg" alt="Team photo" width="300">

Setting width="300" on a massive 5MB image does not make the file smaller  the browser still has to download the entire original file before shrinking it visually. Always resize and compress the actual image file before uploading it rather than relying on HTML attributes to fake a smaller size.

Your Turn: Practice Exercise

1. Find or take three photos and save them in a folder alongside a new HTML file.
2. Build a small gallery page using <figure> and <figcaption> for each photo.
3. Write specific descriptive alt text for every image.
4. Add loading="lazy" to at least one image.
5. Wrap one image in an <a> tag linking to its full size version.
6. Open the page and confirm everything displays and links correctly.

Conclusion

Images can make or break both the look and the performance of a webpage. If you have built the examples in this post you now know how to add size caption link and optimize images the right way using real practical patterns you will reuse constantly. In the next post we will cover "HTML Lists (Ordered, Unordered & Description Lists)" where we will build navigation menus FAQs and structured content using list tags.