In this post
Things to keep in mind
Before diving into the topic of this article, it is important to clarify two things: 1) Using inline CSS in HTML is considered bad practice (dev.to, 2021), and 2) inline CSS is when you use the style attribute on a specific element (w3schools.com). Using other attributes like width and height, even if they modify the element visually, are not considered inline CSS.
Context
Every single asset included on a page needs to be downloaded from the server to the browser. This process works in an asynchronous way, meaning that the page is rendered part by part. Because of this, if we have a very heavy asset like a high-quality image, we don’t need to wait until that image is rendered to start using the page.
This process can produce a weird “jumping” effect if you combine a slow internet connection and images without using the width and height properties. This happens because the page gets new content that increases its total height, and, depending on where this new content goes, it will have to push down the already existing content.
This is what the final page should look like:
But, considering how the rendering process works, this is how the page may ultimately render if we consider varying end-user internet speeds and asset sizes:
What happened in the example above is that the image was loaded after the rest of the content was in place. In other words, because of the new image, the part that goes at the bottom was “pushed” down on the page.
Solution
The width and height attributes fix this issue by reserving the space that the image is going to require once it’s rendered. In this example, the image has 400px of both width and height, so if we use those values on those attributes (w3schools.com), we can tell the browser the space that this content is going to require before even downloading the file itself.
In the code, it would originally have been something like this:
<img src="orange-cat.jpg" alt="orange cat">
Reserving the space required for the image, we would now have something like this:
<img src="orange-cat.jpg" alt="orange cat" width="400" height="400">
With this implementation, the rendering of the image won’t push down the content below it because the space for this image is already there waiting for the asset. It is also important to mention that it is not necessary to specify the unit because the values of these properties are always in pixels.
Complex scenarios
he solution described above won’t cover scenarios with responsive images. To address this, it’s important to remember that CSS is going to override the width and height attribute of an image. With that in mind, we can add media queries for the resolutions that are not covered by the default case of the width and height attributes.
As a result, for a mobile-first approach, this would be the HTML:
<img class="img-cat" src="img/orange-cat.jpg" alt="" width="300" height="300">
And this would be the CSS:
@media (min-width: 768px) {
.img-cat {
width: 500px;
height: 500px;
}
}
@media (min-width: 992px) {
.img-cat {
width: 900px;
height: 900px;
}
}
Note: It’s very common to use width: 100% and height: auto to create responsive images, but in this case we are illustrating a scenario that prevents the “jumping” effect on the browser when the image isn’t ready yet and we need to use specific values on some resolutions.
Final thoughts
Using the properties width and height of the img tag is a good practice to follow and should be part of your general HTML coding practice. However, this is not a completely flawless solution that covers all possible scenarios when working with images. If you need to have responsive images, then you are going to need to include some CSS with media queries for the non-default scenarios of the image.
If you happen to have the same image but with different resolutions and sizes, you could use the picture tag along with nested source and img tags This way, using CSS would be unnecessary for changing the width and height properties (mdn). This is a completely different approach for handling images that we can cover in another article, so stay tuned!
Interested in working with us? Have a look at our careers page and reach out to us if you would like to be a part of our team!
Top comments (0)