Using The Wrong Size Images
Open the lesson folder
In our starter files, open the index.html page from this lessons folder:
> 1.Using-the-wrong-size-images
You can open the index.html in the browser by double clicking the file in the project folder.
If using Visual Studio Code, you can also right-click the file in the side bar > copy path > paste into browser.
Also remember to do this each time we move to the next folder, or you make any changes.
Displaying the starter images
Let’s begin by trying some real examples of how using incorrectly sized images can affect your project.
This lessons folder contains three images as above. They are the same image but in three different sizes (320px, 640px, and 5311px wide). We begin by adding these to the index.html page using the <img> element:
<body>
<img src="images/road-320.jpg" />
<img src="images/road-640.jpg" />
<img src="images/road-5311.jpg" />
</body>
Browser network panel
Apart from visually noticing these images are different sizes in the browser, we can also see the request time in the browser's developer tools.
Most browser's allow you to access the developer tools in s similar way:
right click > inspect
Then look for a network tab (this may be hidden away into a drop down menu on small screens).
You may need to refresh to load the information once in the network tab.
Here is an example using Chrome:
This provides us with some valuable information, such as:
- Status: The HTTP response code.
- Type: The type of resource, i.e. jpeg, script, stylesheet.
- Initiator: What requested the resource.
- Time. The amount of time the request took.
As we see, the time increases for larger images.
Image quality
Along with the download time, the image quality is a huge consideration. To see this better, we can make all three images the same size on the screen:
<title>Using the wrong size images</title>
<!-- add style section -->
<style>
img {
width: 100%;
}
</style>
</head>
Close the developer tools and refresh the browser.
Make the browser as wide as possible, and you will see a clear loss of quality for the smaller images. The smallest image stretches the most, resulting in a higher loss of quality.
And this reinforces what was covered in the introduction lesson, that larger images take longer to download, potentially causing a poor user experience, and potentially losing users from your site.
There are many surveys and stats published claiming user conversion rate dramatically decreases with each second a page takes to load, and also the abandon rate goes up significantly while waiting.
Also, images that are too small will lose a significant amount of quality as they scale up, as we see in our example.
Device sizes
When using images in your website, don’t just download one which looks great and add it to your project. Think about the size of the image first.
In recent years, the range of device sizes are getting bigger. And here is just a small sample of screen sizes we have to allow for:
| 1280 x 1024 | 3008 x 1692 |
| 1680 x 1050 | 3840 x 2160 |
| 1920 x 1080 | 5120 x 2880 |
| 2560 x 1440 | 7680 x 4320 |
As you can see, we have a huge range with some over seven thousand pixels wide. Even though some of the larger screens are not as common, this can still leave our choice of image size really difficult.
Considering our layout and content
You may be tempted to aim for the middle and size images around three thousand pixels wide. This may seem a sensible choice given the range of device sizes covered above.
When making these decisions, we need to not only think about the device size, but also how our site will be laid out. This can have a big impact on our choices.
For example, you may plan to have three images on the same row like this:
And this is a common layout for a website. Or even a gallery view with multiple rows of images.
As you can see, the 3000px wide image choice is now far too big. We have now divided the required image width by 3. Even more if we take into account the space around each image.
Now our images only need to be around 800px wide, which will result in a huge saving on the download time from the 3000px starting point.
The same goes for two images wide, four images and so on. All of these savings can add up if we plan what size we need, instead of just downloading a generic size and forgetting about it.
Sometimes it is inevitable that we will need to use a full width image, such as a header image or an image carousel:
And this again returns us back to the problem. Do we sacrifice image quality, or download speed?
Fortunately, there is a way we can begin to work around this so we don’t have to compromise, and we will look at this in the next lesson.