- Images can really help to bring your website to life. But if you want to use images effectively, you need to be able to control their dimensions, as well as know how to create and use thumbnails. In this video, I'll show you how to do both. All images have existing dimensions in their file information. So you want to make sure that you know what these are before you set any manual dimensions in your page. This is because, if a dimension you set are larger than the original image, the image will be stretched to fit it. And of course, if it's smaller, the image will be squashed. It makes a lot of sense to set the correct dimensions, because if you do the page will have a holding area to draw the image properly. To set these dimensions, you'll need to open the image elements and follow all the standard processes, including specifying the source and the L text. This could look something like this. Now, all you need to do is add the width and height attributes like this, and then close the image tag. Okay, so now you can manually change the height and width of an image. You need to know about thumbnails. Small images up to around 100 by 100 pixels, can be included in line, in a page, without causing any problems. But if you include larger images, users with slow internet connections will struggle to load the page. And this is just bad usability. So when you have loads of images, you want to use thumbnails to represent your larger images. Thumbnails are basically a small compressed version of the original image, or even a part of a larger image. It's really important that the thumbnail is actually a different version of the original image and is properly compressed. You can use image processing tools like Adobe's Photoshop or any equivalent software to make it thumbnail. And if you want to know more about it, just give it a search. Anyway, the key thing is that you don't use the height and width attributes to make an image look like a thumbnail, because even though the image might appear to be small, the webpage will still be rendering out the actual size of the image. Which still uses that bandwidth, which was the major reason for using the thumbnail in the first place. There are actually other strategies that you can use to create thumbnails. If you're interested, check out responsive images. This essentially downloads the image of the correct size for the device being used to view the web page. And that's it for this video. Using the width and height attributes, you can manually control the dimension of images. You should always look to match the actual file dimensions here and then use these attributes to create a placeholder area on the page for when the image is rendered. You could also use thumbnails to hyperlinks through large images, saving users bandwidth, and creating a much more user friendly experience.