Image Height and Width, and Thumbnails

Developed with
QA

The course is part of this learning path

Developing Web Applications with HTML and CSS
course-steps
7
certification
1
lab-steps
2
description
1
play-arrow
Image Height and Width, and Thumbnails
Overview
DifficultyBeginner
Duration7m
Students32

Description

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.

Transcript

- 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
Students2984
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics