How to Insert an Image in HTML: A Simple Guide

So, you want to add an image to your HTML page. The good news is, it all boils down to one simple line of code. Honestly. At its core, you just need the <img> tag and a src attribute that tells the browser where to find your image file. It looks like this… <img src="your-image.jpg">.

That's it. That one tag is the starting point for every single visual you'll ever place on a website.

From a Blank Page to a Visual Experience

You’re staring at a fresh HTML file. A blank canvas. Ready to go. But let's be honest, a website without images feels… incomplete, doesn't it? It’s like a book with no pictures. A bit sad. Visuals are what transform a wall of text into something engaging. Something memorable.

You've got the perfect hero image picked out, or maybe just a simple product shot. Then you start seeing terms like src, alt, and srcset being thrown around, and what seemed so easy a moment ago now feels needlessly complex. We've all been there. I remember spending way too much time wondering why my first attempt at adding an image only showed that dreaded broken-icon symbol. It’s a frustrating rite of passage for every new developer, I swear.

Let's cut through that confusion. We're going to put the jargon aside for a moment and focus on the most essential tool for the job: the humble <img> tag. It’s the absolute foundation you need to master.

Why Nailing the Basics Is So Important

Getting this one tag right is about more than just making a picture show up. It's about building a solid, professional-looking website from the ground up. I’ll walk you through exactly how it works, what each part does, and why it’s the key to creating beautiful, effective web pages. Think of this as a straightforward chat… no heavy theory, just a simple guide to getting that first image live.

Here’s what mastering this one simple thing actually does for you:

• It brings your content to life. Images break up long stretches of text, making your pages far easier and more enjoyable to digest.
• It grabs people's attention. A well-chosen image can capture attention and keep visitors on your site for longer. In fact, content with relevant images consistently gets over 90% more views than content without. Crazy, right?
• It explains things better. Sometimes, a picture really is worth a thousand words. It can clarify a complex idea much more quickly than a dense paragraph ever could.

This isn't just about writing code; it's about crafting a better experience for your visitors. A truly great website needs a partnership between powerful words and compelling visuals to tell its story. And that partnership starts with the <img> tag.

The journey to a visually stunning website begins with a single line of code. Don’t get overwhelmed by the details just yet. Just focus on understanding this one fundamental element, and you’ll be surprised at how quickly everything else falls into place.

Once you’re comfortable with the basics, layering on more advanced techniques becomes much easier. But first, let’s get this core skill locked in. For anyone looking to build a new site, understanding these fundamentals is a crucial part of the web design process. Getting these small details right from the start saves a lot of headaches down the track.

Right, let’s get that first image onto your page.

Getting to Grips with the HTML Image Tag

Let's dive into the absolute workhorse of web images: the humble <img> tag. Think of it as the picture frame for your website's art. It's a simple tag on the surface, but its real power is unlocked through its attributes. These are the little instructions you give the browser to tell it exactly what to display and how.

The most crucial of these, the one you absolutely cannot skip, is the src attribute. It stands for 'source', and it's quite literally the address of your image file. Get this wrong, and you'll be met with that sad little broken image icon. We've all been there. It's the worst.

The Source and the Path

So, the src attribute points to your image. You can do this in two main ways: using a relative path or an absolute path.

A relative path points to a file located within your website's own folder structure. For example, if your image lives in an 'images' folder right next to your HTML file, the code is straightforward: <img src="images/sunset-photo.jpg">. It's 'relative' to the current page's location. Simple.

An absolute path, on the other hand, is a full URL to an image hosted somewhere else online, like <img src="https://someotherwebsite.com/images/photo.jpg">. While this works, it's generally a bad idea to link directly to images on other people's sites, a practice known as hotlinking. It can break if they move the file and might even land you in hot water over copyright. For your own stuff, stick to relative paths.

A Hard-Learned Lesson: I once spent an entire afternoon tearing my hair out, trying to figure out why no images were loading on a new site. The culprit? My paths were slightly off. I'd written ../images/ instead of images/. It’s such a tiny detail, but it makes all the difference. Always, always double-check your folder structure!

Alt Text: The Unsung Hero of the Web

Next up is the alt attribute, and honestly, this one is my favourite. It stands for 'alternative text', and it provides a text description of the image. It does more than just help with SEO, though it certainly gives you a boost there. Its real job is accessibility.

The alt text is what a screen reader will announce to a visually impaired user, giving them the same context a sighted user gets from the image. It’s also the fallback text that appears if the image fails to load for some reason.

Writing good alt text is an art form. Don't just stuff it with keywords… actually describe what’s happening in the picture.

• Bad: <img src="dog.jpg" alt="dog labrador pet">
• Good: <img src="dog.jpg" alt="A happy golden labrador playing fetch in a sunny park">

See the difference? The second one actually paints a picture with words. It makes your website genuinely usable for everyone.

Essential <img> Tag Attributes at a Glance

Getting the hang of these attributes is key to mastering image implementation. Here’s a quick reference table to keep the most important ones straight.

Attribute	What It Does	Why You Need It
src	Specifies the source (URL or path) of the image file.	Mandatory. Without it, the browser has no image to display.
alt	Provides alternative text for the image.	Crucial for accessibility. Describes the image for screen readers and search engines.
width	Sets the display width of the image in pixels.	Prevents layout shifts. Helps the browser reserve space, improving user experience.
height	Sets the display height of the image in pixels.	Prevents layout shifts. Works with width to maintain page stability during loading.
srcset	Provides a list of different image sources for various screen resolutions.	Enables responsive images. Delivers the right-sized image for the user's device.
sizes	Defines the image's size relative to the viewport.	Works with srcset. Tells the browser which image to pick from the srcset list.
loading	Controls when the browser should load the image.	Boosts performance. Set to lazy to defer loading of off-screen images.

This isn't an exhaustive list, but these are the attributes you'll be using day in and day out to make your images accessible, responsive, and performant.

Preventing Page Jumps with Width and Height

Have you ever been reading an article online when suddenly the text lurches down the page because a big image just finished loading above it? It’s incredibly annoying. You can prevent this jarring experience by using the width and height attributes.

By telling the browser the exact dimensions of the image, you allow it to reserve the correct amount of space on the page while the file is still downloading. This stops that content shift and makes for a much smoother, more professional experience for your visitors.

<img src="images/product-shot.jpg" alt="A sleek black coffee grinder on a kitchen counter" width="600" height="400">

This one simple step significantly improves what's known as Cumulative Layout Shift (CLS), which is a key metric Google uses to measure user experience.

Speaking of performance, keeping things lean is vital. In the Australian digital ad scene, for instance, guidelines suggest that the initial file load for images and other assets should be tiny… under 100KB. This is because local sites need to be snappy for 20.9 million social media users, and pages that take longer than three seconds to load on mobile can see a huge drop-off in engagement.

For those looking to take their code to the next level, it's worth learning how to use the semantic HTML figure tag. It's the proper way to wrap self-contained content, like an image and its caption. It adds more structural meaning to your code, which is always a good thing.

Making Images Look Great on Any Screen

We’ve all been there. You land on a website on your phone, and a massive image takes over, forcing you to pinch, zoom, and scroll endlessly just to figure out what's going on. It’s an instant turn-off. A surefire way to make someone hit the back button.

In this day and age, your site has to look good everywhere, from a tiny phone screen to a sprawling desktop monitor. This is where responsive images come into play, and I promise, they're not nearly as complex as they might sound.

Beyond a Single Image File

In the early days of the web, we'd just stick one image file on a page and call it a day. But that "one-size-fits-all" approach just doesn't cut it anymore. A single image is either far too large for a phone (chewing through mobile data and slowing everything down) or too small for a high-resolution display (ending up blurry and pixelated). Neither of those is a good look.

This is where two clever attributes, srcset and sizes, come to the rescue. Think of them as a team working together. The srcset attribute essentially gives the browser a menu of different-sized versions of your image. Then, the sizes attribute gives the browser a heads-up on how much of the screen the image is expected to fill at various screen widths.

With this info, the browser acts like a savvy personal shopper. It checks the device's screen size and resolution, looks at the layout hints you've provided, and then picks the perfect image from the srcset menu. It's a clever solution that can dramatically speed up your site for mobile users, which is a massive win for user experience and SEO.

The process flow below shows the foundational components you start with before you even think about layering on these responsive techniques.

As you can see, every image starts with its source (src), accessibility text (alt), and defined dimensions. These are the building blocks. Get these right first.

A Real-World Example With Srcset

Let's say you're adding a new product photo to your Shopify store. To make sure it looks fantastic on every device, you'd prepare a few different sizes of that image:

• product-small.jpg (400 pixels wide)
• product-medium.jpg (800 pixels wide)
• product-large.jpg (1200 pixels wide)

Instead of a simple <img> tag, your HTML would look more like this:

I know that looks a bit more involved, but it’s actually pretty straightforward once you break it down. You’re telling the browser: "I have three image options here, with their actual widths specified (the '400w', '800w', etc.). And just so you know, if the screen is 600px wide or less, this image will fill the entire screen width. On anything wider, it'll take up about half the screen." Simple.

The Ultimate Tool: The Picture Element

Sometimes, you need even more control. What if you want to display a sweeping panoramic shot on a desktop but a tightly cropped, square version on a mobile device? For this kind of "art direction," the <picture> element is your best friend.

It lets you specify entirely different image files based on certain conditions, like screen size. The browser reads each <source> tag from top to bottom and grabs the first one that matches the current environment.

In this case, phones and smaller tablets will get the product-square.jpg, while larger screens will get the beautiful product-landscape.jpg. It's the ultimate method for ensuring your images are always perfectly framed, no matter the context. Getting these details right is what takes a website from just "functional" to a truly polished and professional experience.

Using responsive image techniques isn't just a "nice-to-have" anymore. With a huge portion of web traffic coming from mobile, it's a fundamental part of building a fast, user-friendly website that respects your visitors' time and data plans.

For Australian eCommerce businesses, getting image sizes spot-on is a huge deal. Platforms like Shopify have guidelines recommending specific dimensions for different assets, all compressed to keep load times snappy. This really matters on visual-first platforms like Instagram, which saw its Aussie ad reach grow by 300,000 users in 2025. Experience shows that visually rich sites with well-optimised images can convert up to 40% better. And with over 60% of Australian smartphones having high-resolution displays, using the <picture> element is key to ensuring everything stays tack-sharp. You can dig into these trends in the latest Australian market reports to see the full impact for yourself.

Boosting SEO and Performance for Your Images

Alright, so your images are looking sharp and responsive on every device. That's a huge win. But here comes the hard truth: beautiful images are fantastic, but not if they slow your website down to a crawl.

Both Google and your visitors absolutely despise slow pages. I've seen it happen time and time again. A business owner uploads a gallery of stunning, high-resolution photos straight from their camera, and suddenly their page load time triples. It's an absolute conversion killer. It really is.

So, how do we keep things lightning-fast without turning our vibrant photos into a blurry mess? It all comes down to working smarter, not harder.

The Magic of Compression and Modern Formats

First up, let's talk about image compression. Think of it like vacuum-sealing your clothes for a suitcase. You're squeezing out all the unnecessary data to make the file smaller, but the essential item is still there and perfectly usable. Specialised tools can do this for you, shrinking file sizes dramatically with almost no noticeable drop in quality. Honestly, it's a non-negotiable step.

Then you've got modern image formats like WebP. This format, developed by Google, is a bit of a game-changer. It can create files that are significantly smaller than their JPEG or PNG counterparts while maintaining the same level of quality. Most modern browsers fully support it, which makes it an excellent choice for keeping your website lean and speedy.

Choosing the right format from the get-go is half the battle. This table breaks down the most common options to help you decide.

Choosing the Right Image Format

Format	Best For	Pros	Cons
JPEG	Photos, complex images with gradients	Excellent compression, small file sizes, universal support.	Loses quality with each save, no transparency.
PNG	Logos, icons, images requiring transparency	Lossless quality, supports transparency.	Larger file sizes than JPEG, not ideal for photos.
GIF	Simple animations, very basic graphics	Supports animation, small files for simple images.	Limited to 256 colours, poor for complex images.
SVG	Logos, icons, line art (vector-based)	Infinitely scalable, tiny file sizes, crisp on all screens.	Not suitable for photographic images.
WebP	A modern replacement for JPEG, PNG, and GIF	Superior compression, supports transparency & animation.	Not supported by very old browsers (pre-2020).

At the end of the day, using a modern format like WebP is usually your best bet for performance, with JPEG as a reliable fallback for photos.

You don't need to sacrifice beauty for speed. Modern compression tools and next-gen formats like WebP let you have the best of both worlds, delivering crisp images in tiny packages. It's the key to a fast website that still looks incredible.

Why Load an Image They Can't See Yet?

Now for my favourite performance trick: lazy loading. It might sound technical, but the idea is brilliantly simple. Why should a browser waste time and data loading an image that's way down at the bottom of the page if the user never even scrolls that far?

It shouldn't. And that's exactly what lazy loading prevents.

With a tiny addition to your image tag, you can tell the browser, "Hey, don't bother downloading this image until the user is just about to scroll it into view." It's an incredibly easy win that makes a huge difference to your initial page load time. The code is as simple as adding loading="lazy".

This technique has been a massive help on Australian websites, where mobile usage is soaring towards 95%. For visual platforms like Pinterest, with its 5.39 million Aussie users who expect fast-loading galleries, browser-level lazy loading can cut the initial data required by 50% or more. Just one line of code, <img src='photo.jpg' loading='lazy'>, can boost engagement by as much as 28%.

Making Your Images an SEO Goldmine

Finally, let's talk about Search Engine Optimisation. Your images aren't just there to look pretty. They're a golden opportunity to rank in Google Images and pull in more traffic. I've worked on WordPress website design projects where optimising images alone led to a noticeable uptick in organic visitors.

It starts with your file names. Before you even upload a picture, change its name from something generic like IMG_8472.jpg to something descriptive like black-ceramic-coffee-mug.jpg. Use hyphens to separate words. This gives Google an immediate clue about what the image is.

And, of course, we have to circle back to alt text. We've talked about it for accessibility, but it's just as vital for SEO. Your alt text is your chance to describe the image in a way that helps search engines understand its context on the page. Be descriptive and natural.

These small details… compression, lazy loading, descriptive file names, and meaningful alt text… they all compound over time. They work together to make your website faster for users and easier for search engines to understand, which is a powerful combination. To really dig in, you can learn more about how to optimize images for SEO and see how these best practices can significantly boost your search rankings.

Using CSS for Background and Decorative Images

So far, we’ve been treating images as the main event… as key pieces of content. But what happens when an image isn't the star of the show? What if it's just part of the scenery?

Think about those big, beautiful hero sections you see at the top of a website, with text and buttons layered over a stunning photograph. Or a subtle, repeating pattern that gives a page some texture. For these kinds of jobs, the <img> tag often isn't the best tool. It’s like trying to paint a wall with a tiny artist's brush. You can do it, but there's a much better way.

This is where CSS swoops in to save the day.

Shifting from Content to Decoration

When an image is purely decorative, its place is in your stylesheet, not your HTML. The whole point of HTML is to give your page structure and meaning, while CSS’s job is to make it look good. Separating the two keeps your code clean, organised, and much easier to manage.

The main tool we'll use for this is the background-image property in CSS. You can apply it to almost any HTML element, whether it's the entire <body> of your page or just a single <div>.

This simple line tells the browser to use your chosen image as the background for that specific element. It’s a completely different way of thinking about images. Instead of being a piece of content sitting on the page, it becomes part of the design's very fabric.

Taking Full Creative Control

Just adding the image is only the beginning. The real power comes from the other background properties that let you dial in the exact look you're after. I remember the first time I built a full-screen hero section… getting these properties just right was the key to making it work.

• background-size: This one is huge. Setting it to cover tells the browser to scale the image so it completely fills the container, even if that means cropping a bit off the sides. The opposite is contain, which makes sure the whole image is visible, even if it leaves some empty space.

• background-position: This lets you decide which part of the image should be the focal point. You can use values like center, top right, or even precise percentages to get it looking perfect.

• background-repeat: By default, browsers will tile a background image if it's smaller than its container. You can stop this with no-repeat or let it repeat only horizontally (repeat-x) or vertically (repeat-y).

Putting these together gives you complete control to create those sleek, modern effects. Exploring the different combinations is a big part of the creative process in any Squarespace website design, where visual impact is everything.

When an image's purpose is purely visual—to add atmosphere, texture, or branding—it should be handled by CSS. This keeps your HTML focused on content and gives you far greater control over the final presentation.

Now for a crucial point, and it’s a big one. Images added with CSS are completely invisible to screen readers. Because they aren't in the HTML, they have no alt text. This is fine for purely decorative images, but it means you should never use a CSS background for an image that conveys important information. Always keep accessibility at the front of your mind.

Common Image Mistakes and How to Fix Them

We've all been there. Staring at a broken webpage, wondering where it all went wrong. It's practically a rite of passage when you're learning to code, and I've certainly had my share of those facepalm moments. Learning how to insert an image in HTML is straightforward, but a few common tripwires can catch out even seasoned pros.

Think of this as your friendly troubleshooting guide. By knowing where things usually break, you’ll be much better equipped to get them right the first time.

The Dreaded Broken Image Icon

You’ve written what you think is the perfect <img> tag, hit refresh, and… you’re greeted by that sad little icon of a ripped piece of paper. Don't worry, it has happened to every single one of us.

Nine times out of ten, this is down to a simple typo in your src attribute. It's a classic rookie mistake. Maybe you misspelled the filename, or the folder path is just slightly off.

To fix it, meticulously check these things:

• File Name: Is sunset-photo.jpg spelled exactly the same in your code and in your folder? Remember, case sensitivity can be a real gotcha!
• File Path: Are you pointing to the right directory? Double-check if you need images/ or perhaps ../images/ if you need to go up a level.
• File Extension: Did you save the image as a .png but write .jpg in your code? It’s an easy mistake to make when you’re working quickly.

Forgetting Your Alt Text

Another common slip-up is leaving the alt attribute empty. It feels like a small detail to miss, but its impact is huge. Without alt text, you’re creating a barrier for anyone using a screen reader, leaving them with no clue what your image is about.

It's also a massive missed opportunity for SEO. Search engines rely on alt text to understand the content of your image, which can help it rank in image search results.

Don't treat alt text as an afterthought. It’s a fundamental part of making your website accessible and search-friendly. A good, descriptive sentence is always better than an empty attribute.

The Unoptimised Image Bomb

This one is a silent killer for your site's speed. You take a beautiful, high-resolution photo, upload it directly, and suddenly your page takes an eternity to load. This happens because photos straight from a modern camera can be several megabytes in size… far too heavy for the web.

Always, always run your images through a compression tool before you upload them. This simple step can shrink the file size by over 70% with almost no visible loss in quality. It’s the single most effective thing you can do to keep your pages fast and your visitors happy. It might seem small, but it makes a world of difference to the user experience.

Got Questions? Let's Get Them Answered

You've got the basics down, but as you start working with images in your own projects, a few common questions always seem to pop up. It's totally normal. Let's walk through some of the queries I hear most often.

Can I Just Use an Image from Another Website?

While you can technically link to an image on someone else's server using its full URL in the src attribute, it's a practice you should avoid.

This is known as hotlinking, and it essentially steals their bandwidth, which can cost them money and slow their site down. On top of that, you're opening yourself up to major copyright issues. The best and only professional approach is to host images on your own server… ones you have the legal right to use, of course.

What's the Difference Between JPG, PNG, and WebP?

Choosing the right format can feel tricky, but it's pretty straightforward once you know their strengths.

• JPG (or JPEG): This is your go-to for photographs. It can handle millions of colours and compresses file sizes down really well. The catch is that it's a 'lossy' compression, meaning a tiny bit of image quality is sacrificed to get that small file size.

• PNG: Perfect for logos, icons, and any graphic where you need a transparent background. Its 'lossless' compression means you don't lose any quality, but the file sizes are usually larger than JPGs.

• WebP: This is the modern, all-around winner for the web. WebP offers fantastic compression for both photos and graphics (often creating much smaller files than JPG or PNG), and it also supports transparency. If browser support isn't an issue, this should be your first choice.

How Do I Make an Image a Clickable Link?

This one's a classic and thankfully, very simple. All you need to do is wrap your <img> tag inside an anchor <a> tag.

The <a> tag is the standard HTML element for creating hyperlinks. By placing your image inside it, the entire image becomes the clickable area, directing the user to the URL you specify in the href attribute. It's an incredibly common and useful technique.