How to include images in html: A Practical Guide to Embedding Photos

Let's be honest. A giant wall of text is a surefire way to make someone's eyes glaze over. It's the images that break things up, add a bit of life, and really help tell your story. But how do you actually get a picture to show up on your webpage?

It all starts with a simple, yet surprisingly powerful, little bit of HTML: the <img> tag. Think of it as a special instruction you're giving the browser that says, "Hey, put a picture right here."

Getting Started With The HTML <img> Tag

The <img> tag is the absolute cornerstone for displaying images on the web. It's what's known as a self-closing or empty tag, which is just a fancy way of saying it doesn't need a closing </img> tag like a paragraph <p> does.

But… on its own, <img> does absolutely nothing. You need to give it a couple of key pieces of information to bring your visuals to life.

The Two Most Important Attributes

Every single <img> tag relies on two critical attributes to work properly. Miss one, and you'll probably end up with that dreaded broken image icon. It's a look no one is going for. I still remember the frustration of my first image not loading, only to find I’d made a simple typo in the filename. It happens to all of us!

Here’s what you absolutely have to include:

• The src attribute: This is short for "source." It’s the web address (URL) or file path that tells the browser where to find your image file. This could be a local path on your server (like /images/sunset.jpg) or a full URL from another website.
• The alt attribute: This stands for "alternative text." It’s a short, written description of what the image is about. It's absolutely essential for accessibility, because it’s what's read aloud by screen readers for visually impaired users. It also helps search engines understand the image's content.

Getting these two right is non negotiable. The src makes the image appear, and the alt text makes it accessible and SEO friendly.

The Basic HTML Image Tag Explained

Here’s a quick breakdown of the essential <img> tag and its most important bits and pieces.

Attribute	What It Does	Example
<img>	The HTML element that defines an image.	<img src="...">
src	(Required) Specifies the path or URL to the image file. The browser fetches the image from this source.	src="images/koala.jpg"
alt	(Required) Provides descriptive text for screen readers and search engines. Displays if the image fails to load.	alt="A fluffy koala sitting in a eucalyptus tree."
width	Sets the display width of the image in pixels.	width="400"
height	Sets the display height of the image in pixels.	height="300"

While width and height aren't strictly required like src and alt, including them is a really good habit to get into. It helps the browser save a spot for the image before it loads, preventing the whole page layout from jumping around. That's a thing known as Cumulative Layout Shift (CLS), and it's super annoying for visitors.

This simple foundation is the bedrock of good visual content on the web. It's not just about making things look pretty; it's about building a solid, accessible structure. This focus on structure is a core principle we apply in all our professional web design projects because it impacts everything from user experience to search rankings.

Once you get this basic tag down, you’ll have the confidence to place your first image exactly where you want it.

Getting Your First Image on the Page

Alright, theory is great, but let's get our hands dirty. This is the moment you've been waiting for. The part where you actually see your image pop up on the page. It’s a genuinely satisfying feeling, watching your code spring to life.

We're going to build your first proper image tag together, piece by piece. It'll look something like this: <img src="..." alt="...">.

Finding Your Image: The src Attribute

First up is the src attribute. Think of this as the "source"—it tells the browser exactly where to find your picture. It’s like giving someone directions to a cafe; you've got to be specific, or they'll get lost.

These directions, which we call the file path, change depending on where your image is stored.

Here are the most common scenarios you'll run into:

• Image in the Same Folder: This is the easiest way to start. If your image file (like cat.jpg) is sitting in the exact same folder as your HTML file, the path is just the filename. Super simple.

  

• Image in a Subfolder: Most organised websites keep images in their own folder, often called images or assets. If your dog.jpg is inside a folder named images, you just need to point to it.

  

• Image from Another Website: Sometimes you might need to use an image hosted somewhere else. For this, you just paste the full web address (URL) into the src.

  
  Just a quick word of caution here: this is called “hotlinking,” and it’s generally not a great idea. You’re relying on someone else’s server, and if they move or delete the image, it’ll break on your site. It’s always better to host your own images if you can.

Why Alt Text Is Not Optional

Now for a serious but friendly chat about the alt attribute. So many people skip this. They think it’s just some minor detail for SEO. It’s not. It’s about people.

I remember building a site for a local bakery years ago. They had these beautiful photos of their cakes, but no alt text. A customer who used a screen reader left a comment saying they loved the descriptions of the baked goods but had no idea what the "daily specials" image was. It was such a simple fix, but a huge lesson. We’d accidentally excluded a member of our community without even realising it.

Here in Australia, getting this right has a real impact. It’s not just a coding detail; it affects how many people can actually use your website. The Australian Digital Inclusion Index shows that around 20.6% of Australians face digital exclusion, with many relying on assistive tech like screen readers. For them, your alt text is the image.

Good alt text is descriptive, concise, and conveys the purpose of the image. Just ask yourself: if the image didn't load, what text would I need to put in its place to make sure the user doesn't miss out on any information?

Adding Width and Height

Finally, let's talk about width and height. While your image will probably show up without them, adding these attributes is a really good habit to get into.

Why? Because it tells the browser exactly how much space to save for the image before it even starts loading. Without these clues, the browser loads the text first, then the image pops in later, causing all the text to jump around on the page. We've all seen it. And it’s a jarring experience for the user.

You just add the dimensions right into the tag, specified in pixels:

By defining the dimensions, you create a much smoother, more professional loading experience. It’s one of those small details that separate a basic page from a well crafted one, something we focus on heavily in our WordPress website design process. You're not just placing an image; you're building a stable, user friendly layout.

Breaking Down the Basic Image Tag

To pull it all together, here's a quick reference for the essential attributes you'll need for almost every image you add.

Attribute	What It Does	Why You Need It
src	Specifies the source or path to the image file.	Essential. The browser can't find and display your image without this. It's the most critical part of the tag.
alt	Provides alternative text for the image.	Essential for accessibility. Describes the image for screen readers and displays if the image fails to load.
width	Sets the display width of the image in pixels.	Prevents layout shifts. Tells the browser the image's dimensions, improving page stability and loading speed.
height	Sets the display height of the image in pixels.	Prevents layout shifts. Works with width to reserve space for the image as the page renders.

Getting these four attributes right from the start is fundamental. It ensures your images not only look good but also perform well and are accessible to everyone.

Making Your Images Work for Everyone (and Google, Too)

Okay, you’ve got your image showing up on the page. It looks great. That’s the first hurdle cleared. But just having it there is only half the battle.

Now, we need to make that image pull its weight. A good image doesn't just sit there looking pretty; it should help people understand your content and signal to search engines what your page is all about. It’s about being both a great host to your visitors and a smart site owner.

This all begins by revisiting that alt attribute we touched on earlier.

Writing Alt Text That Actually Helps

Let's be real. It’s tempting to treat alt text as a box ticking exercise. You chuck in a few keywords, call it a day, and move on. I’ve definitely been guilty of that in the past. But it eventually clicked for me that alt text is one of the simplest, yet most powerful, tools we have for making the web a more inclusive place.

Imagine you’re trying to buy something online, but you can’t see the product photos. If the alt text just says "t-shirt," you’re left guessing. Is it long sleeved? What colour is it? Is there a design on it?

But what if it said, "A person wearing a navy blue cotton t-shirt with a small, embroidered kookaburra logo on the left chest"? Suddenly, you have a complete picture. That’s the difference between a user getting frustrated and you making a sale.

Your goal is to convey the same essential information that a sighted person gets from the image. It’s not about stuffing keywords; it’s about providing genuine context and meaning.

This isn’t just a "nice to have" anymore, especially here in Australia. The Australian Government Style Manual is crystal clear that all informative images must include alt text. This is a huge deal for closing the digital divide, particularly when you realise that 40.9% of First Nations people are digitally excluded and many outside major cities rely on assistive tech like screen readers. For them, your alt text isn't an afterthought… it is the image. You can dig into these national guidelines on the official Style Manual website.

Ensuring your images are accessible to every user, including those with disabilities, is a cornerstone of modern web development and a key part of ADA website compliance.

Grouping Images and Captions with Figure and Figcaption

Sometimes, an image needs a bit more context than alt text alone can provide. Think of complex charts, graphs, or product photos that require a model number or a photo credit. For these scenarios, HTML gives us two fantastic tags: <figure> and <figcaption>.

The <figure> tag essentially acts like a picture frame. It wraps around your image and tells the browser, "Hey, this image and its caption are a single, related unit."

Inside that frame, <figcaption> is the little descriptive plaque. It provides a dedicated, semantically linked space for your caption.

Here’s what that looks like in code:

So, why not just drop a <p> tag under the image? Well, it might look the same, but using <figure> and <figcaption> gives you three massive advantages:

1. Semantic Meaning: It explicitly tells search engines that the caption describes the image. This is gold for SEO, especially for ranking in image searches.
2. Accessibility Boost: Screen readers understand this structure. They'll announce the figure, then read both the image's alt text and its caption, giving the user a much richer, more complete picture.
3. Clean Styling: It makes it so much easier for a developer to style the image and caption as a single component using CSS, ensuring they always stick together.

This is the perfect approach for product shots on a Shopify or WooCommerce site, portfolio pieces, or even just giving credit where it's due on a blog post. It's a simple bit of code that adds a ton of structure and clarity.

4. Optimising HTML Images for Speed and Responsiveness

We’ve all been there. You land on a website, probably on your phone, and the main photo is so huge you have to pinch and zoom just to see what’s going on. Or worse… you’re stuck waiting for a massive image to slowly, painfully load, one line at a time.

It’s an instant turn off. And it's a surefire way to send potential customers running to a competitor.

The great news is, this is totally avoidable. We’re about to dive into some slightly more advanced HTML that will ensure your images look incredible and load lightning fast on any device, from a giant desktop monitor to the phone in your pocket. I promise to keep it clear and simple.

Making Images Responsive with srcset and sizes

The terms srcset and sizes might sound a bit technical, but the idea behind them is brilliantly straightforward.

Think of it like this: you wouldn't use a giant soup ladle to stir a tiny espresso, would you? The srcset attribute works the same way. It gives the web browser a "menu" of different sized versions of the same image. The browser then glances at the device’s screen size and picks the perfect image from that menu. A phone on a 4G connection gets the small, quick loading version, while a desktop with a 4K screen gets the stunning, high resolution one.

Everyone gets the best experience for their device.

Here’s what that looks like in practice:

The srcset part lists your image files and their actual widths (480w means the image is 480 pixels wide). The sizes attribute then gives the browser hints about how wide the image will actually be displayed on the screen at different breakpoints. It's a team effort that makes a world of difference for performance.

Choosing the Right Tool for the Job: Modern Image Formats

Another huge win for site speed comes from using modern image formats. For years, we relied on JPEGs for photos and PNGs for graphics needing a transparent background. They did the job, but technology has moved on.

Meet WebP. It's a format developed by Google that delivers fantastic image quality at a much smaller file size than a classic JPEG or PNG. This means your images look just as sharp but load significantly faster. With near universal support in modern browsers, there's really no reason not to use it.

The difference is especially noticeable on an e commerce site where product photos are everything. We know that faster load times can directly boost sales, a key principle we cover in our guide to WooCommerce website design.

The diagram below maps out a simple process for making images accessible. It’s a great reminder that technical optimisation and accessibility need to work together.

This visual flow shows us that selecting the right format is just one part of the puzzle; we also need to get the accessibility right with alt text and proper captions.

When you're trying to balance quality and file size, picking the right format is key. Here's a quick cheat sheet to help you decide.

Choosing the Right Image Format

Format	Best For	Key Benefit
WebP	All-rounder for photos and graphics	Excellent compression with great quality.
JPEG	Photos and complex images with many colours	Widely supported, good for general photographic use.
PNG	Graphics needing a transparent background	Lossless quality, perfect for logos and icons.
SVG	Logos, icons, and simple illustrations	Scales perfectly to any size with a tiny file size.
AVIF	High-performance photos and graphics	Even better compression than WebP, but newer.

Ultimately, testing is your best friend. A resource I often point people to is this guide on finding the best image format for web performance, which offers a deeper dive into the trade offs.

Give Your Visitors a Head Start with Lazy Loading

Here’s one last trick, and it's my personal favourite for a quick performance boost: lazy loading.

Picture a long blog post with ten different images. By default, when a user visits that page, the browser tries to download all ten images at once, even the ones at the very bottom of the page they can't see yet. This can seriously slow things down.

Lazy loading is a simple instruction you give the browser. It says, "Don't bother loading these images until the user actually scrolls down and they're about to enter the viewport."

The best part? It’s ridiculously easy to turn on. Just add one small attribute to your <img> tag: loading="lazy".

That’s it. With that one attribute, you’ve made your page feel much faster for visitors, especially those on mobile networks. It’s a simple change with a massive impact.

Common Image Problems and How to Fix Them

You’ve written the code, you've double checked your tags, and you hit refresh, ready to see your masterpiece. And… nothing. Just that sad little broken image icon staring back at you.

Don’t panic. Honestly, we've all been there. It’s a rite of passage for anyone learning web development, right up there with forgetting a semicolon or spending an hour trying to centre a div. Let's play detective and figure out what’s gone wrong.

The Mystery of the Missing Image

This is, without a doubt, the number one frustration. You know the image exists, but the browser just can't seem to find it. Nine times out of ten, the culprit is a simple typo in the src attribute.

Your first move should be to check that file path. Meticulously.

• Typos are killers: Is the file koala.jpg or koala.jpeg? Is your folder named images or Images? Casing really matters on many web servers, so be precise.
• Location, location, location: Did you write src="koala.jpg" when the image is actually nested inside a folder? If so, you’ll need something like src="images/koala.jpg".
• Check the filename again: I once spent twenty minutes debugging a broken image only to realise I’d saved the file as brisbane-skyline--final.jpg with two hyphens. It's always something small!

If the path looks perfect, the next suspect is the file itself. Did you actually upload the image to your web server? It's an easy step to forget when you're in the zone. Hop into your hosting platform or FTP client and make sure the file is exactly where you think it is.

A less common but sneaky problem can be server permissions. Some web hosts might upload files without the correct "read" permissions, meaning the server itself isn't allowed to access and show them. If you’re truly stuck, it’s worth a quick chat with your hosting provider to rule this out.

My Image Looks Stretched or Blurry

Okay, so your image is showing up. Hooray! But now it looks… weird. It's squashed or stretched out of proportion, like something from a funhouse mirror.

This almost always happens when you manually set width and height attributes to values that don't respect the image's natural aspect ratio. For instance, if you have a square photo that’s 600×600 pixels but you try to force it into a rectangular box with your HTML:

<img src="square-photo.jpg" alt="A square photo" width="800" height="300">

The browser will obey your command and stretch the image to fill those dimensions, resulting in a distorted mess.

The fix is usually simple. If you only need to control one dimension (like making it fit a certain width), just set that single attribute. The browser will automatically calculate the other dimension to keep the proportions correct. For more complex control, CSS is your best friend, but for a quick HTML fix, respecting the aspect ratio is key.

Turning Images into Clickable Links

Another everyday task is making an entire image work as a link. The concept is straightforward: you just need to wrap your <img> tag inside an anchor <a> tag.

It looks like this:

<a href="https://your-destination-url.com.au">
<img src="images/my-photo.jpg" alt="A descriptive alt text for the image">
</a>

Where people often trip up is with the closing tag. It's easy to accidentally place the </a> inside the <img> tag or forget it entirely. Just remember that the <img> tag is self closing, but the <a> tag needs a clear opening and closing tag to wrap around whatever you want to make clickable.

By working through these common hiccups, you’ll build the confidence to troubleshoot just about any image issue that comes your way. It's all part of the learning process.

Your Go-To Checklist for Perfect HTML Images

You've covered a lot of ground. Seriously. From that first simple <img> tag to wrestling with responsive layouts, accessibility, and making sure your images load lightning fast. It’s a lot to take in.

So, let's pull it all together. Think of this as your final pre flight check before you launch. It’s all about building those solid habits that take a decent website and make it truly brilliant. Bookmark this page; this is your go to reference for every single image you add from here on out.

The Essentials Every Image Needs

Before you even touch the code, nail these two things first.

• Choose the Right Format: Is it a detailed photograph? A JPEG or WebP is almost always your best bet. A logo or icon that needs a transparent background? That's a classic job for a PNG or SVG. Using the right tool for the job from the start saves a world of pain later.
• Optimise That File: Don't just upload it as is. Run your image through an optimisation tool to find that sweet spot – the smallest possible file size where it still looks crisp and clear. Remember, every kilobyte you shave off makes a huge difference, especially for visitors on a mobile connection.

Code and Accessibility Checks

Alright, now for the HTML itself. Quickly run through this list every time you embed an image. It's the key to making sure your visuals are robust, accessible, and ready for whatever device they're viewed on.

1. Meaningful alt Text: Have you actually described the image's content and its purpose on the page? Imagine the image is broken; would the alt text give the user all the information they need?
2. Responsive srcset: Are you providing multiple image sizes for different screens? This is pretty much non negotiable if you want a great mobile experience.
3. Correct width and height: Did you include these attributes? They are crucial for preventing the page layout from jumping around as the images load, which is a major annoyance for users.
4. Lazy Loading: For any images that aren't visible right away ("below the fold"), have you added loading="lazy"? It’s a dead simple trick for a massive initial page speed boost.
5. Captions with <figure>: Does the image need a bit more context, a photo credit, or a title? If it does, wrap it in a <figure> tag and use <figcaption> to add that crucial info.

You've got this. Following these steps will make your websites faster, more professional, and more welcoming to everyone. It’s that final layer of polish that really makes all the difference.

Got Questions About HTML Images?

You've got the basics down, but a few questions might still be nagging you. That's completely normal. We’ve all been there, staring at a line of code and second guessing ourselves.

Let’s clear up a few of the most common head scratchers people run into when working with images on the web.

Can I Just Use an Image from Another Website?

The short answer is yes, you can. You can paste the full URL of an image from another site right into your src attribute, and technically, it will show up.

But the real answer is: please don't.

This is called "hotlinking," and it's bad form for a couple of major reasons. First, you're stealing someone else's server bandwidth to display the image, which is like running an extension cord to your neighbour's house to power your kettle. More importantly, you have zero control. If they delete that image, rename it, or change their site structure, you'll suddenly have a broken image on your page.

The best practice is always to download the image and host it on your own server. It's the only way to be sure it's there when you need it.

What’s the Real Difference Between alt and title?

This is a great question because it’s one of the most common points of confusion. They seem similar, but they serve very different purposes.

The alt attribute is your non negotiable. This is the "alternative text" that describes the image for screen readers used by visually impaired visitors. It also appears if the image fails to load. It's absolutely essential for accessibility and a key signal for SEO.

The title attribute is just extra, non essential information. It typically shows up as a little tooltip when you hover your mouse over the image. It can be a good spot for a photo credit or a fun fact, but it's never a replacement for alt text.

A simple way to remember it: alt text describes what the image is for someone who can't see it. The title text offers a little extra commentary for someone who can. Always, always prioritise a descriptive alt attribute.

How Do I Make an Image a Clickable Link?

You'll find yourself needing to do this all the time. Thankfully, it's super simple. You just wrap your <img> tag inside an anchor <a> tag. Think of it like putting your image inside a clickable picture frame.

Here’s exactly what that looks like in practice:

<a href="your-link-page.html">
<img src="images/my-button.png" alt="A red button that says 'Click Me'">
</a>

Now, clicking on that my-button.png image will send the user straight to the URL you've specified in the href. It’s a fundamental trick for creating interactive buttons, banners, and gallery thumbnails.

---

At Wise Web, we know that building a truly great website comes down to getting these details right. From accessible images to lightning fast load times, every piece of the puzzle matters. If you're ready for a website that not only looks incredible but also performs flawlessly for every user, take a look at our web design services at https://wiseweb.com.au.