How to Include an Image in HTML: A Practical Guide

Adding an image to your HTML? It all comes down to the <img> tag. Honestly. This little piece of code is your starting point, but it needs two crucial bits of info to actually work: the source (src), which is just the file path or URL for your image, and the alternative text (alt), which describes what the image is for screen readers and search engines.

Get those two right, and you’ll bring your webpage to life.

Your First Step to Adding Images in HTML

It seems like it should be the easiest part of the whole process, right? You’ve got your HTML file, you’ve got your image… and you just want them to play nicely together.

But instead, you’re staring at that dreaded broken image icon, and the frustration is starting to bubble up. We’ve all been there. Seriously. That moment of "why won't you just show up?!" is a classic rite of passage for anyone learning to code. It's almost a tradition.

So, let's break down that very first step. It’s time to get you acquainted with your new best friend: the <img> tag.

The Two Must-Have Attributes

To get an image on your page, you really only need to focus on two essential bits inside your <img> tag.

Attribute	What It Does	Why It's Essential
src	This is the source or the file path. It's like a treasure map, telling the browser exactly where to find your image file on your server or the web.	Without a valid source path, the browser has no idea which image to display, and you'll get that broken image icon. It's the absolute foundation.
alt	This is the alternative text. It provides a written description of the image for users who can't see it, like people using screen readers.	This is non-negotiable for accessibility and SEO. It makes sure everyone understands the content and helps search engines figure out what your images are about.

Think of these two attributes as the absolute, bare-minimum requirements for any image you add to your site. You just can't skip them.

The impact of getting this right is huge. In the Australian digital space, websites with compelling visual content can see up to a 94% increase in page views compared to text-only pages. So, mastering this simple tag really pays off.

Getting that first image to appear is a small win that feels massive. It’s the moment your static text document starts to feel like a real webpage.

Ready to see it in action? Here's a simple, copy-and-paste snippet. Just make sure your image file (named your-image.jpg) is sitting in the same folder as your HTML file.

For more helpful tips on building your website, check out the other articles on our blog.

Getting Src and Alt Right

Alright, let's get into the nitty-gritty of the two most critical pieces of any image tag: src and alt. Getting these right isn't just a technical thing… it's fundamental to making your images actually work on the web.

Think of the src attribute (short for 'source') as the exact street address for your image file. Without it, the browser has no clue where to find what you want it to display. It's like telling a friend to "meet me at the cafe" without saying which one. You'll be waiting a long time. It just won't work.

The standard way to pop an image onto a page is with the <img> tag, using the src attribute to point to the image's location. This has been a core part of the web since the beginning, and you can learn more about these foundational standards over at rgcdigitalmarketing.com.au.

The Unsung Hero: Alt Text

Now for the alt attribute, which stands for 'alternative text'. Honestly, this is the unsung hero of web accessibility and good SEO.

It’s so much more than just a fallback for a broken image link. For someone using a screen reader, your alt text is the image. They can't see that beautiful photo you've chosen, but a well-written description can paint a vivid picture for them with words. It's your way of including them in the experience.

Good alt text isn’t for search engines; it’s for people. When you write for people first, the SEO benefits just naturally follow.

Skipping alt text is like hanging a stunning painting in a gallery but forgetting the little plaque that explains its meaning. That small detail completely changes the experience for many visitors.

So, what makes for good alt text?

• Be descriptive but brief. Instead of alt="dog", go for something like alt="A golden retriever catching a red frisbee in a park". See the difference?
• Consider the context. What information is the image actually adding to the page? If it's a chart showing sales growth, your alt text should summarise that data, not just say "sales chart".
• Ditch the fluff. You never need to start with "A picture of…" or "An image of…". Screen readers already announce that it's an image. Just jump straight into the good stuff.

Making Images Look Good on Any Screen

Ever built a webpage on your desktop, felt pretty chuffed with it, only to check it on your phone and see the images spilling out of the screen? Yeah. It's a classic web developer moment. We’ve all been there.

An image that looks perfect on a large monitor can be a total disaster on mobile. This is where we tackle that exact problem, and trust me, it’s much simpler than you might think.

We aren't talking about complicated code here, just a few powerful and easy techniques to make your images resize automatically. It's a huge part of good, modern web design.

The Magic of Max Width

Often, the only trick you’ll ever need is a tiny snippet of CSS. By telling the browser that an image's max-width should be 100%, you're basically saying, "Hey, never be wider than the container you're in." This one line prevents your images from ever breaking the layout. It's simple. It works. It's a lifesaver.

Before we get too deep into styling, though, it’s worth remembering the fundamentals. This infographic breaks down the two most critical parts of the HTML image tag, src and alt, which are the foundation for everything we do.

It’s a great reminder that getting the basics right, the image source and its description, is the first step before we can even think about making things look good on different screens.

This becomes incredibly important when you realise that with 94.9% of Australians accessing the internet on mobile, your site absolutely must work on a small screen. What’s more, 53% of mobile users will abandon a site if it takes longer than three seconds to load, making efficient image use a top priority. You can find more fascinating Australian web statistics over at rgcdigitalmarketing.com.au.

Think of responsiveness as being a good host. You want your content to be comfortable and easy to view for every guest, no matter what device they're using to visit.

For those who want to level up, there's the srcset attribute. This is a little more advanced, but it’s a game-changer for performance. It lets you give the browser a menu of different-sized images, allowing it to pick the perfect one for the device. A small phone gets a small, fast-loading image, while a big desktop gets the high-resolution version. It’s brilliant for page speed.

Troubleshooting Common Image Problems

https://www.youtube.com/embed/Ktx-imKlMY4

Let's be real for a moment. Things will go wrong. You'll hit refresh on your page and be greeted by that awful, taunting, broken image icon.

Don't panic! It happens to absolutely everyone, from beginners to seasoned developers. I still make these silly mistakes all the time. More often than not, it's a simple, tiny fix.

In this section, we'll put on our detective hats and investigate the most common reasons your image isn't showing up.

Finding the Culprit

Nine times out of ten, the problem is a simple typo in your src path. It's the first place you should always look.

Here’s a quick checklist to run through:

• Check the File Name: Is your image really photo.jpg or is it photo.JPG? Web servers are often case-sensitive, so the capitalisation has to be perfect. One letter off and… boom. Broken.

• Check the Folder Path: This is the big one. If your HTML file is in the main folder and your image is in a subfolder called images, your path must be src="images/photo.jpg", not just src="photo.jpg".

• Check for Typos: Did you spell everything correctly? A simple slip like imgaes/photo.jpg will break the link instantly. It's so easy to do when you're in the zone.

Think of the src attribute as a very precise set of directions. If even one turn is wrong, the browser gets lost and can't find your image.

Getting this right is just a process of elimination. Start with the file name, check the folder structure, and then look for any sneaky typos. You’ll find the problem in no time.

Making Your Images Interactive and Accessible

Static images are great, but what if you want them to do something? Let's turn your images from simple visuals into interactive elements that guide users through your site.

Making an image clickable is one of the most common things you'll do. The trick is to simply wrap your <img> tag inside an anchor tag (<a>). Easy.

Just like that, your images become gateways. This is a must-have for things like portfolio galleries where each image needs to link to a detailed project page, or for an e-commerce site where clicking a product photo should take a customer straight to the product listing.

Adding Captions the Right Way

A caption gives vital context to an image. But just dropping a line of text underneath isn't the best approach if you care about accessibility and SEO. There’s a much smarter, more meaningful way to do it.

For this, you’ll want to use the <figure> and <figcaption> tags.

• The <figure> tag acts as a container, signalling to browsers that the image and its caption belong together as a single unit.
• The <figcaption> tag is used for the actual caption text itself.

Using this structure tells browsers and screen readers that the text is directly related to the image, which is a big win for accessibility. It’s a small detail, but it’s the kind of thing that separates amateur code from a professionally built website.

This isn't just a "nice-to-have" for looking professional. It’s a fundamental part of building a more inclusive and understandable web. Using tags like <figure> correctly makes your content meaningful to assistive technologies.

This kind of thoughtful approach to design is crucial, especially as you start working with more sophisticated tools. In fact, if you're interested in how top-tier tools handle these elements, you can discover the power of Framer for web design in one of our other guides. It all circles back to creating a brilliant user experience.

Common Questions About HTML Images

When you're first getting your head around adding images to a webpage, a few questions always seem to pop up. Don't worry, everyone asks them. Let’s get you some quick, practical answers so you can get back to building.

What’s the Best Format for Web Images?

The honest answer? It depends entirely on the image you’re using. There's no single "best" format, but there’s definitely a right tool for the job.

• JPEG: This is your workhorse for photographs. Anything with a lot of different colours and gradients will look great and stay at a reasonable file size.
• PNG: Reach for a PNG whenever you need a transparent background. It's perfect for things like logos, icons, or any graphic that needs to sit cleanly over another element.
• WebP: This is the modern all-rounder. WebP is supported everywhere now and often delivers better quality at a smaller file size than both JPEGs and PNGs. It’s a fantastic choice most of the time.

How Do I Centre an Image in HTML?

The proper way to handle this is with a bit of CSS. You might see the old <center> tag floating around in old tutorials, but it's long been obsolete and you really should avoid it. It's just not how we do things anymore.

The most reliable modern technique is to make the image a block element and then set its side margins to 'auto'. It might sound a bit technical, but it's a simple, two-line trick that works perfectly every time.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Can I Just Use an Image From Another Website?

Technically, you can, but it's a really bad idea. This practice is known as "hotlinking," and it's filled with problems. For starters, you could be infringing on someone's copyright if you don't have explicit permission. That's a big deal.

Even if it's legally okay, the owner of the other site could remove or rename the image at any moment, which would instantly break it on your site. The only reliable approach is to download the images and host them on your own server.

Think of hotlinking like borrowing your neighbour’s lawnmower without asking. It might work for a bit, but it’s not a solid strategy and you’re bound to run into trouble eventually.

Why Isn’t My Image Showing Up?

This is almost always a simple pathing or spelling mistake. Your computer might forgive you for writing Image.JPG instead of image.jpg, but a web server is much fussier about case sensitivity.

Carefully double-check that the file name and the folder path in your src attribute are an exact match, right down to the upper and lower-case letters. It’s also worth making sure you actually uploaded the image file to the server in the first place! We've all forgotten that step before.

---

Feeling like you need more than just a quick fix for your website? At Wise Web, we specialise in building beautiful, functional websites that just work. Reach out today and let's build something amazing together.