Right, let's get your first image up on a webpage. It sounds easy enough, doesn't it? But when you're staring at a blank HTML document, it's so easy to get stuck. We've all been there… that feeling of "what's the magic command for this?"
The good news is, it's not magic at all. It all comes down to one little thing: the <img> tag.
Think of the <img> tag as a direct instruction to the web browser. You're basically saying, "Hey, browser, I need you to display a picture right here." It's a self-closing tag, which is just a fancy way of saying it doesn't need a separate closing tag like </p> or </div>. Simple.
The Two Must-Have Attributes
An <img> tag on its own doesn't really do much. It's a bit lonely. It needs a couple of key companions, which we call "attributes," to tell it what to show and how to describe it. For now, you only need to master these two.
Let's break them down. Here's a quick reference for the essential bits of the <img> tag you'll use every single time.
Core HTML Image Tag Attributes
| Attribute | What It Does | Why You Need It |
|---|---|---|
| src | Stands for "source." It's the file path or URL to your image. | Without this, the browser has no clue which image to display. It's the most critical part. |
| alt | Stands for "alternative text." It's a text description of the image. | Crucial for accessibility (screen readers for the visually impaired) and SEO. Also shows if the image fails to load. |
These two attributes are completely non-negotiable. The src points the browser to the image file, whether it's sitting in a folder on your server or hosted somewhere else online. The alt text provides a backup description, which is absolutely vital.
Never, ever skip the alt text. I'm serious. It’s one of those small details that instantly signals whether a site is built with care or just thrown together. It's a massive win for both your users and your search engine ranking.
Let’s look at a real-world example. Say you're adding a company logo to your website's header. The HTML would be beautifully simple:
<img src="images/company-logo.png" alt="Wise Web company logo">
That's it. You've just told the browser to look inside the "images" folder for a file named "company-logo.png" and display it. If for any reason it can't, it will show the text "Wise Web company logo" instead. This fundamental skill is a building block we use in every single WordPress website design project we touch.
Alright, let's move beyond the absolute basics. You've got src and alt down, which is a fantastic start. But to really control how your images behave on the page and stop them from causing chaos, we need to introduce a couple more key players.
Think of it this way: you've told the browser what image to show and how to describe it. The next crucial step is telling it how much space to set aside for it. This is where width and height come in, and believe me, they do a lot more than just control size.
I still remember the headache of a client site where the content was impossible to read. You’d start on a paragraph, and suddenly… BAM! An image would finish loading, shoving all the text you were reading halfway down the screen. It was infuriating. The cause? They'd forgotten to add width and height attributes to their images.
Why Sizing in HTML Matters
When you add width and height directly into your <img> tag, you're giving the browser a vital piece of information upfront. You're essentially saying, "Hey, an image is on its way, and it's going to need exactly this much space."
<img src="images/product-shot.jpg" alt="A blue ceramic coffee mug" width="600" height="400">
The browser then reserves a 600 by 400-pixel box on the page before the image even starts to download. All your other content, like headings and text, can load in neatly around that reserved spot. No more jarring page jumps. This simple fix is a huge win for user experience and your site's performance.
Setting
widthandheightattributes in your HTML is one of the easiest ways to improve your site's Core Web Vitals. It prevents that frustrating content shift that makes visitors want to hit the back button.
Getting the Path Right Every Time
Now, let's talk a bit more about the src attribute. The text you put inside those quotation marks is the image's address, or its "path". A wrong path is easily the most common reason you'll see that dreaded broken image icon. You'll generally be working with two types of paths.
- Absolute URL: This is the full web address, always starting with
https://. You'll use this when you're pulling in an image that's hosted on a completely different website. - Relative Path: This is like a local address for an image on your own server. It describes the location of the image relative to the HTML file that's calling it.
An absolute URL, for instance, looks like this: https://some-other-website.com/images/photo.jpg.
A relative path is usually much cleaner, something like /images/logo.png. This just tells the browser to start at the root of your own website and look inside the images folder. For your own assets, it's the way to go. It's just simpler and more portable.
Nailing these attributes is a foundational skill in the Australian web development scene. Properly handled images have a massive impact on site speed, which is non-negotiable when you consider that 53% of mobile users will leave a site that takes longer than three seconds to load. With so much of our local traffic coming from mobile devices, getting images right isn’t just a technical detail; it’s a business imperative.
And it doesn't stop there. Beyond how images appear on your site, you also need to think about how they appear when your content is shared on social media. Meta tags play a huge role here. For some great ideas on how to get this right, take a look at these Open Graph image examples.
Making Images Look Great on Any Device
Let’s be real for a moment. Nobody looks at your website on the same screen anymore.
Someone might be squinting at it on a tiny phone during their morning commute, while someone else has it splashed across a massive desktop monitor. An image that looks stunning on your big screen can easily become a gigantic, slow-loading mess on a mobile. It's a common problem, but thankfully, HTML has a clever solution built right in.
This is where responsive images come into play. It sounds technical, but the idea is simple: you give the browser a few different sizes of the same image, and you let it choose the best one for the job.
Introducing the Smart srcset Attribute
The hero of this story is an attribute called srcset. Think of it as a menu you hand to the browser. Instead of just one image (src), you provide a whole set (srcset) of options and tell the browser how wide each one is.
The browser then takes a look at the user's screen… their device, their connection speed… and picks the most suitable image from your menu. A user on a small phone gets a small, fast-loading image. Someone on a high-resolution desktop gets the crisp, detailed version. Everyone wins.
Here’s what that looks like in practice for something like a product page:
<img src="earrings-medium.jpg" srcset="earrings-small.jpg 500w, earrings-medium.jpg 1000w, earrings-large.jpg 1500w" alt="Silver hoop earrings on a marble background">
With this code, you’re basically telling the browser, "Here are three options. One is 500 pixels wide, one is 1000, and one is 1500. Pick the best one for the current screen size." The plain src attribute is still there as a fallback for older browsers that might not understand srcset. It’s a brilliant way to add an image to HTML that respects your user's data and device.
This diagram breaks down the essential attributes we've covered, from the file path (src) to the crucial alt text.
As you can see, creating an effective image tag is about more than just pointing to a file; it's about providing a complete set of instructions for the browser.
When You Need Even More Control
Sometimes, just serving a smaller version of the same image isn't quite enough. Think about a wide, landscape-oriented banner image on a desktop. On a mobile, that would shrink down to a tiny, unreadable sliver.
For these situations, there's the <picture> element.
The <picture> tag lets you do some really clever art direction. It acts as a wrapper around your <img> tag and allows you to specify entirely different image sources based on conditions like screen size.
You could show a wide group photo on a desktop, but have it automatically switch to a focused, square headshot on a mobile phone. This isn't just about resizing; it's about changing the entire composition to fit the context.
This gives you surgical control over the user experience, ensuring your visual storytelling is powerful on every single device. This level of detail is a core part of our approach to modern web design, because we know these small touches make a huge difference in how professional a site feels.
Advanced Tips for Faster Loading Images
You've got the basics sorted. Nice one. Now it’s time to get into the really good stuff… the tweaks that turn a good page into a great one. These are the details that separate the pros from the amateurs, especially when it comes to page speed.
First up, let's talk about one of my favourite simple tricks: lazy loading.
It sounds a bit laid back, and honestly, that's the whole idea. Instead of forcing the browser to download every single image on a page the moment it loads, you can tell it to wait. Just chill out. The browser won't bother downloading an image until the user actually scrolls down and is about to see it.
The best part? It's incredibly easy to implement. You just add one little attribute to your <img> tag:
loading="lazy"
That's it. That one addition can make a massive difference to your initial page load time, especially on long pages packed with images. It's a huge win for user experience and your SEO.
Choosing the Right Tool for the Job
Next, let's chat about image formats. You've probably seen them all before: JPEG, PNG, and maybe even newer ones like WebP. Choosing the right one is like picking the right tool from your toolbox; you wouldn't use a hammer to turn a screw.
Choosing the Right Image Format
Making the right choice of format is a balancing act between quality, file size, and features like transparency. Here’s a simple breakdown of the most common formats I use and what they're best for.
| Format | Best For | Key Feature |
|---|---|---|
| JPEG | Photographs, complex images with gradients | Great compression for small file sizes |
| PNG | Logos, icons, graphics with sharp lines | Supports lossless compression and transparency |
| WebP | A modern replacement for both JPEG & PNG | Excellent quality at much smaller file sizes |
| SVG | Logos, icons, simple illustrations | Scalable vector format; always sharp, tiny files |
| GIF | Short, simple animations | Supports basic animation, limited to 256 colours |
Ultimately, WebP is often the best all-around choice these days, but it's crucial to understand why the others exist. To get a better handle on this, you can delve deeper into the nuances of PNG vs JPEG formats to really understand their impact on quality and file size.
Optimisation Is Not Optional
This is the big one. You absolutely must optimise your images. This means running them through a tool to shrink their file size as much as possible without making them look terrible.
Why is this so crucial? Because big, heavy images are page speed killers.
For e-commerce businesses especially, this can be devastating. When you learn that visual-heavy sites get 94% more views and mobile accounts for 63% of purchases, you realise how vital visuals are. But if those visuals are slow, you'll lose people fast… 53% of mobile visitors will abandon a site if it's too slow.
My rule of thumb is this: if an image is over 200KB, I ask myself if it can be smaller. Most of the time, the answer is yes.
You don't need fancy software. Tools like TinyPNG or Squoosh are free, web-based, and incredibly easy to use. Just drag your image in, let it work its magic, and download the much smaller version. It’s a five-second step that makes a world of difference.
This is especially vital for platforms like Shopify, where product images are everything. If you need help with that, our team has a lot of experience with Shopify website design and making sure it's lightning-fast.
7. Common Image Problems and How to Fix Them
Alright, let's dive into those moments that make you want to tear your hair out. You’ve written what feels like perfect code, you hit refresh, and… nothing. Or worse, you’re greeted by that ugly little broken image icon.
It’s frustrating, I get it. But I promise you, almost every image problem I've ever encountered comes down to one of a few simple mistakes. Let’s walk through the usual suspects so you know exactly what to look for next time.
The Dreaded Broken Image
We’ve all been there. You see that little icon that just screams, "I tried to find an image here, but I failed."
Nine times out of ten, this is just a typo in your file path. Seriously. You might have written images/logo.png when the file is actually named images/Logo.png. On a lot of web servers, that capital 'L' makes all the difference.
Here’s my go-to troubleshooting process:
- Check your spelling and capitalisation. Go character by character through the filename and every folder in the path. It's the most common culprit.
- Verify the folder structure. Is the image really in the
/imagesfolder you’re pointing to, relative to your HTML file? - Try the direct link. Copy the full image URL from your
srcattribute and paste it directly into your browser's address bar. If it doesn't load there, the path is definitely wrong.
This little checklist solves the problem almost every single time. It's usually a simple human error, which is the best kind of problem to have because it's easy to fix.
My Image Looks Stretched or Squashed
This is another classic. You’ve finally got your image on the page, but it looks like it's been warped in a funhouse mirror. This is almost always a mismatch between the image’s natural aspect ratio and the width and height attributes you’ve set in your HTML.
For example, say your image is naturally 800 pixels wide and 600 pixels tall (a 4:3 ratio). But in your code, you’ve written:
<img src="photo.jpg" alt="A lovely photo" width="500" height="500">
The browser is just following orders. It will force that rectangular image into the square box you defined, and the result is a distorted mess.
The fix? Make sure your width and height values are proportional to the original image. Better yet, let CSS handle the sizing to make it properly responsive, but keep the HTML attributes in place to prevent those annoying page jumps while it loads.
Forgetting to write good alt text is like hanging a beautiful painting in a gallery but leaving the little descriptive plaque blank. People who need it get nothing, and you miss a chance to add valuable context.
It's so easy to skip, I know. You're in a hurry to get the page live. But that tiny description is a lifeline for people using screen readers and a massive signal to search engines about what your page is about. Don't skip it.
Got Questions About HTML Images?
Alright, we've walked through the fundamentals and even some of the more advanced tricks. But I know from experience that when you start coding, the real-world questions start popping up. It happens to the best of us.
Let's dive into a few of the most common head-scratchers I get asked about.
Can I Just Link to an Image on Another Website?
Technically, you can plug another site's image URL straight into the src attribute. But please, don't. This is called "hotlinking," and it’s a massive web development faux pas.
For one, you're essentially stealing their bandwidth, which can actually cost them money. More importantly, you have absolutely no control. If they decide to delete that image or simply rename the file, you're left with a broken image on your site. The golden rule is to always upload images to your own server.
How Do I Turn an Image Into a Link?
This one's a classic and thankfully, it's dead simple. All you need to do is wrap your <img> tag inside a standard anchor tag, the <a> tag.
It looks like this:
<a href="your-link-page.html"><img src="your-image.jpg" alt="A clear description of where this image links to"></a>
That's it. Now, clicking that image will whisk the user away to whatever page you've set in the href.
What’s the Perfect Size for a Web Image?
Ah, the million-dollar question. The honest, expert answer is that there's no single "best" size. It all comes down to context. A stunning full-screen hero image might need to be 1920 pixels wide, but a small author bio photo could be just 150 pixels.
The goal isn't to find one magic dimension. It’s about being strategic. You size the image appropriately for its specific spot on the page and then use responsive techniques like
srcsetto deliver lighter, optimised versions to smaller devices. Always chase the smallest possible file size (in KB) without sacrificing quality.
Should I Still Add Width and Height Attributes If I’m Using CSS?
Yes, absolutely. This is a common point of confusion, but it’s a crucial performance optimisation. Even if you're using CSS to control the final display dimensions, including the native width and height attributes in your HTML is a non-negotiable best practice.
So, why does it matter? It allows the browser to calculate the image's aspect ratio and reserve the exact amount of space for it before the image has even finished downloading. This is what prevents that jarring "content jump" you see on so many websites, where the text shifts around as images load in. It’s a tiny bit of code that makes a huge difference to the perceived speed and professionalism of your page.
Feeling a bit swamped by all the details? Don't stress. Mastering this stuff takes time and practice. If you’d rather have a website where every image is already perfectly optimised for speed and responsiveness, without ever having to think about a line of code, that's exactly what Wise Web is all about. Let's build something brilliant together at https://wiseweb.com.au.