Welcome to yet another tutorial on HTML tags.
Today's lesson will revolve around the
img tag, which is short for “image” of course.
Whenever you see an image on a webpage, it's most likely because the creator of the website is using an
Thankfully, there's really not much to learn about images, so let's dive right into it!
How to insert an image on a web page
When it comes to inserting images into your web pages, you really only need to remember two things:
- You need to use the
- You need to specify the URL (the
src) that points to the image's physical location
Once you have these two things, you're ready to insert an image onto a webpage.
In this example we are going to assume that you've already uploaded an image to some sort of web server. If you haven't done this already, then pointing the
src to your hard-drive will work, but keep in mind that if you publish the web page on the internet, the images won't load… we'll talk more about that later.
Okay, so here's some code that will load an image that's stored on this website:
<img src="https://www.coderscampus.com/wp-content/uploads/2012/09/Java-Podcast.jpg" />
The above code will result in the image being displayed on your web site like so:
Now, the obvious thing to note here is that the image being loaded is VERY LARGE! And thus, it's not exactly ideal for display purposes… it's a bit ugly and distracting.
So how do we address this issue?
Resizing an Image with CSS
So what we'll need to do here is introduce a bit of CSS magic to reduce the size of the image. This can be done by utilizing the
style property and using the
width attribute (or the
As you shrink the
width of the image, the height of the image will automatically shrink as well to keep the width to height ratio of the image intact… this is a good thing, otherwise your image will look like it's being squeezed and will look horrible.
So let's take a look at some code that will assign a new width to the image… for the purposes of this tutorial I'm going to use “size units” known as
px (short for pixels), but I think it would be beneficial for you to also learn about the
em unit in html. When you have a moment, read about them here.
<img src="https://www.coderscampus.com/wp-content/uploads/2012/09/Java-Podcast.jpg" style="width: 200px;"/>
Here's what the resulting image would look like:
So, can you see how much easier it is to “digest” this image now?
Much smaller and nicer.
Image Loading Times on the Web
Having shown you how to reduce the size of your images for the sake of pleasing one's eyes, now I want to tell you about how you can please your users bandwidth.
You see, even though the 2nd image is smaller to the eye, it's not smaller to the browser. Both of those images are 161 KB in size.
This concept is quite important to understand, as a lot of people assume that if the image LOOKS small, that must mean that it IS small in terms of Kilobytes, what that's just not true at all.
So what are the implications?
Well, what happens if you're forcing all of your users to download MASSIVE images (say 10 Megabytes each), yet they all appear as small pictures on screen… I'll tell you what will happen, the page will take FOREVER to load (especially on a mobile device).
The implication here is that a lot of people are impatient when it comes to loading websites, and a lot of people will just hit the “back” button and leave your website (most likely never to return). Uh oh! That's not what we want right?
So how do you fix this issue? Easy, just use a tool that will shrink the sizes of your images before you upload them to your web server. Just do a Google search for something like “Image Size Shrinker” and you'll find plenty of online tools that will do this for free.
A popular method of image shrinking is to upload both the original (BIG) picture and the “optimized” picture, but only have your webpage load the optimized picture while allowing your users to click on the image to see the full-size (BIG) version of the file.
Turning Images into Links
This seems like a great time to talk about making images that are also links.
In the scenario I described above, I talked about a small image that, when clicked, loads the big image version in a new URL. Let's take a look at how we'd accomplish that:
<a href="https://www.coderscampus.com/wp-content/uploads/2012/09/Java-Podcast.jpg"><img src="https://www.coderscampus.com/wp-content/uploads/2015/07/Optimized-Java-Podcast.jpg" style="width: 200px;"/></a>
So in the code above, we've created an anchor tag that links to the BIG version of the image, and and wrapped inside of that is the
img tag that will show/load the smaller version of the image. So the result is that when this webpage loads, it will only be “forced” to load the small version of the image, and the user can then choose the view the bigger version just by clicking on the smaller image.
Here's what that would actually look like:
As always, there's more to images than just these basic things that we've just learned… but the stuff I didn't cover isn't used too often. But for the sake of completion, I'd recommend checking out the HTML Img tag article via W3Schools here.
And don't forget to join our email list, I send you a “goodie” to your email inbox just for joining and you'll continue to receive awesome exclusive content that's only available to my email subscribers. So go ahead and fill in your best email address in the box box below to get started now!