Image Height and Width, and Thumbnails
Image Height and Width, and Thumbnails

Adding images to your site is one way you can create a richer user experience. In this short module, you’ll learn how to add images into your site, what best practice looks like for file formats, and how to create thumbnails.


- 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.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics