How to Insert Images in HTML | An HTML5 Image Tutorial

Learn how to insert images in HTML. In this HTML5 image tutorial, you will learn about the img element and the attributes this HTML tag requires to display images on your web pages. You will also discover some good image resources along the way.

🚀 This lesson is part of an HTML for Beginners tutorial series playlist:

How to Insert Images in HTML | An HTML5 Image Tutorial

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:05) Image Files
(02:29) img element
(06:15) width and height attributes
(08:40) Insert a 2nd image
(11:34) Loading attribute and "below the fold"
(17:59) figure and figcaption elements
(19:58) Adding a 3rd image
(23:23) figure is not just for images
(25:50) Validate your HTML code
(26:52) Image resources

⚙ Web Dev Tools:

📚 References:

🖼️ Image Resources:
Placeholder Image Generators:
Sites with Freely-Usable Images:
Image Editing / Resizing Software:
Suggestions for Mac:
Full Featured Editor for Windows/Mac/Linux:
Image Compression (shrink file size):

✅ Follow Me:

Was this tutorial about how to insert images in HTML helpful? If so, please share. Let me know your thoughts in the comments.

#html #html5 #images

[kdp]

Been slowly working through your tutorials daily, and they're awesome!!! It has been very fun adding my own personal touches as I code along. Thank you for your amazing content!🙏

[fairytail]

Thank you very much for teaching me the basics of html. Planning to watch all of your videos related to web development. Great job!!!

[hiwayshoes]

Dave, thank you for sharing what I’ve wanted to know about images! This helps tremendously! I’ll be rewatching this episode a few times over… Cheers 💖!

[kevinomondi]

I really appreciate it sir. Your explanations are crystal clear

[ahmad-murery]

I remember the days when putting animated gifs (and sometimes audio) on the page was so cool 😎🙄

The importance of adding the height property in specific appears clearly when we have a large image (especially on a slow connection), so as you mentioned the browser can reserve necessary area to display it preventing the layout from jumping once the image is loaded and the browser figured out the actual dimensions,

regarding lazy loading attribute, it's a bless for those who know what a developer has to deal with in the past to accomplish this, nowadays it's just two words

Thanks Dave, that was a really enjoyable video,

[siranjeevi]

really super sir your way of teaching is slowly, clearly and perfectly thank u so much❤

[emm]

Thanks a lot for putting these online for free! Your course is much better than any of the paid ones. One thing though, idk if this was changed recently but it's showing as an error on the validating page when adding figure into the <ul>. It's saying the element figure not allowed as child of element ul in this context. Then I don't know how I'd add it to be under the first option on that list.

Thank you again!!

[IG-cu]

I feel that some websites use Cumulative Layout Shift to their advantage for nefarious purposes by making you click on a pop-up link by mistake. It's happened to me so many times and is really frustrating. But this is the first time I am hearing this phenomenon - let alone phrase being discussed in any HTML video or resource. Another reason why your HTML series is one of the best!

[robertodepasamonte]

Nice HTML5 image tutorial -- thank you. Perhaps you could do a follow on tutorial on the picture element and responsive images.

[MikecParodije]

Hello Dave! I really appreciate your work and you do it very well, which means that it is easy to understand, (in case you explain : )). Could you explain to us in one of the following videos what "helper fuction" is in Javascript? Thank you very much!

[sudheek-xynu]

Awesome channel to learn tech..Thank you so much for ur kind support.

[confidential]

Hi Dave, I tried the <code> tag and it works great, though I tried to test it without the code tag but still delivers the same result? so is the <code> tag neccesary.

ps. I found in some youtube clips that you can sort comments on {best reaction/newest/Timestamps} I usually dont see the timestamps, but that would be a handy feature because if someone wants to ask question at a specific time, maybe it is already answered otherwise you will have to go through the comment section and check if someone asked the same question

[stefanwebdev]

At me it does not work, if I put my images in the IMG folder, they will lose the jpg ending, so in the program on vscode it will show with jpg ending but in the folder in the computer it will be without and it does not works.

[IG-cu]

Unfortunately after having to switch to Linux on my laptop for a Software Development bootcamp I'm enrolled in, I can't get Irfanview as it seems to only support Windows. You mention Canva quite briefly, but didn't go into any detail in its usage. Can you also resize images there, just like you can in Irfanview? Thanks.

[bimalacharya]

Hi dave, just curious about if the index file is in one folder and the image in another folder, what would be the solution for that to pop up the image in chrome,
for example, as I can see there is a folder named 6 lessons, if there was a separate folder with images not inside the 6 lesson folder what would be the solution.
hope to get the answer

[felicialeann]

I seriously cannot find an html logo for download anywhere online free. Why don't you include any actual download links for these images in your video description? Do I need this image? Or should I just stick with the butterfly I used for the favicon in the previous video?

[bansheechild]

Good day Dave.May sound crazy but I have triple checked and experimented with PNG and JPG images files.Directory is 100% accurately stated in my src but for some reason JPEG images do not display in Chrome or Firefox.Any advice?
Thank you

[alancortazzo]

Why does he pronounce the word attribute the way he does? Is he Canadian? But regardless of that, I thank him as well.