An image is worth thousands of words. Yes, images are a powerful tool to convey ideas to people. We all should learn how to leverage images and make good use of them.
How an image works on the web
How do we display images on the web? Thanks to the simplicity of document languages like HTML, we can easily use this img tag to display it
<img src="pic_trulli.jpg" alt="Italian Trulli">
That's straightforward, but this is just the tip of the iceberg; there are still many issues we need to solve. Firstly, loading an image onto our web is considered a resource-consuming process. Let's take a look at the picture below.
Load images via Data URLs (base64 encoding)
<img src="data:image/png;base64;ivORwOK..">
Advantages:
Reduces the need for additional HTTP requests.
Useful for small icons or when bundling images directly in CSS or HTML.
Use Cases: Embedding small images, icons, or when you want a self-contained HTML/CSS file.
Lazy load image
Right from the start, we can notice that images are a heavy resource that the web has to load from the initial load, which could cause some waiting time if we have many images to display at the same time. Luckily for us, there's a new attribute in HTML that allows us to do some magic with lazy loading with images.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
Let's analyze this code piece
We have a new loading attribute in our image tag that has been set to the value lazy. Okay, it means that we will lazy-load this image. But can you explain it to me more? Sure, so imagine this situation: when we have an image at the very bottom of the page, the smart thinking would be to not load it now and wait until the image is in ourviewport (the technical term for the word we can see it), and then only load it where we can see it.
Hmmm, that's cool. How about width and height values?
The browser figures out how to display the image by downloading it, looking at the file size and using that info to calculate the layout. The problem is at the run time the browser won't know the actual size of the image beforehand, so we should instead tell the browser how big the image is so that the browser can calculate the layout for us, it can avoid jumping layout
Images are inline-block by default
The default behavior of an <img> element is inline-block, so that can cause us some trouble. Let's have a look at this image
<article class="content">
<div class="image-container">
<p>Images are
<img src="https://source.unsplash.com/tR6PdtuxF-M/1200x1800"
alt="Photo by Claudie-Ann Tremblay-cantin"
width="70"
height="70" loading="lazy" />
inline by default.
</p>
</div>
</article>
You'll notice that with the typography, it has a baseline + ascendant + descendant, and the image has a descendant too, so that is the reason we already saw that it has a little space at the bottom of the image
/** We can fix it by converting it to display:block **/
img {
display:block;
}
A better image reset for your CSS
As we already know, the default behavior of images across browsers is chunky, and we need to unify it
.img {
/* It will stop the image overflow , it's really nice to have it */
max-width:100%;
display:block;
/* Keep the aspect ratio of the image */
height:auto;
/* When the image failed to download , it will show the alt attribute
text in an image , and we'll style it with italic to differentiate between
alt text in image with the other text */
font-style:italic;
/* In case when we want to load image as background to create some
sort of skeleton */
background-repeat:no-repeat;
background-size:cover;
/* In case we want to circle and image and float it and make the
shape-outside:circle , checkout my blog for float property */
shape-margin:1rem;
}
Web accessibility with images
Informative Images (image inside a paragraph)
Images used to label other information
<p>
<img src="phone.png" alt="phone" > 012 3456 7890
</p>
<p>
<img src="fax.png" alt="fax" > 012 456 7891
</p>
Images used to supplement other information
<p>
<img src="dog.jpg" alt="Dog with a bell attached to its collar" >
Off-duty guide dogs often wear ...
</p>
Images conveying succinct information
<img src="cap.png" alt="Push the cap down and turn it counter-clockwise (from right to left)">
Images conveying an impression or emotion
<img src="family.jpg" alt="We’re family-friendly. ">
Images conveying file format
<p>
<a href=""> 2012 Annual report and accounts
<img src=".." alt="HTML" > 43KB
</a>
,also available in
<a href="..">
<img src=".." alt="Word document" > (254KB)
</a> or
<a>
<img src=".." alt="PDF document" >
format
</a>
</p>
Decorative images
Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.
Image used as part of page design
<img src="topinfo_bg.png" alt="">
<!-- or -->
<img src="topinfo_bg.png" role="presentation">
Decorative image as part of a text link
<a href="crocuspage.html">
<img src="crocus.jpg" alt="">
<strong> Crocus bulbs</strong>
</a>
Image with adjacent text alternative
<p>
<img src="sleepingdog.jpg" alt="">
<strong>The sleeping dog:</strong> ...
</p>
Functional images (image inside an anchortag)
Functional images are used to initiate actions rather than convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image) rather than a description of the image.
Images used alone as a linked logo
<a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C home">
</a>
Image used in a button
<input type="image" src="searchbutton.png" alt="Search" >
Complex images
Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:
graphs and charts, including flow charts and organizational charts;
diagrams and illustrations where the page text relies on the user being able to understand the image;
maps showing locations or other information such as weather systems.
<!-- Traditional way -->
<p>
<img
src="chart.png"
alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
<br>
<a href="2014-first-qtr.html">Example.com Site visitors Jan to March 2014 text description of the bar chart</a>
</p>
<!-- Modern way -->
<figure role="group">
<img
src="chart.png"
alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
<figcaption>
<a href="2014-first-qtr.html">Example.com Site visitors Jan to March 2014 text description of the bar chart</a>
</figcaption>
</figure>
Structurally associating the image and its adjacent long description
<figure role="group">
<img src="chart.png"
alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3, described in detail below.">
<figcaption>
<h2>Overview</h2>
<p>The chart shows the website hits for the first quarter of 2014 …</p>
<h2>Values</h2>
<table>
<caption>Example.com Site visitors Jan to March 2014</caption>
<tr>…</tr>
</table>
</figcaption>
</figure>
Image inside a container
Let's consider this example:
<article class="container">
<img src="https://source.unsplash.com/2B4dYFgYAyQ/1200x1800"
alt="Photo by David Clode"
class="the-image"
width="3965"
height="2736" loading="lazy" />
</article>
Let's have a look at this part without any CSS. We have an image, and we tell the browser upfront that it should prepare to download an image with a width of 3965 and a height of 2736. The result is that we get a huge image
.container {
width: 75vw;
height: 60vh;
border: 1rem solid pink;
}
/** In this case the image will overflow the container :)
So we have to set width and height to force the image render
nicely inside the container **/
img {
width:100%;
height:100%;
}
/** But this will break the aspect ratio of the image **/
A few things to keep in mind: we have an original image with an intrinsic size of 1200 x 1800 and an aspect ratio of 2/3.
So what is the aspect ratio? to put it into a simpler way for our readers If you have a rectangle with an aspect ratio of 2/3, it means that for every 2 units of width, you would have 3 units of height. So, if the width is 2 inches, the height would be 3 inches to maintain that aspect ratio. This is important to know because we need to respect this aspect ratio to keep our images of high quality.
Our container box is 1080x474px because I set the width to 75 vw and 60 vh ( it will vary based on different machines )
The image doesn't seem to be right, and you're correct; the container has a different width and height proportion in this case (the width of the container is larger than the height), and the original aspect ratio of the image is 2/3 so the result is the image will be stretched horizontally
Oh nice, now we have a correct image concerning its aspect ratio, but how does object-contain work? Remember, we have a container with a height of 474 pixels, so the image will try to scale down its height with the aspect ratio (2/3) until it reaches 474 pixels, then it will stop. We can calculate the width of the image by 474 x 2 / 3 = 316px
Let's try to change it { object-fit: cover }
With object-fit: cover, it will try to render the picture to fit in its container both horizontally and vertically (hence the word cover). If you think about the aspect ratio with proportion 2/3, the image always has the width < height and if we try to scale both horizontally and vertically the result is we will lose the top and the bottom of the image
It makes sense because we try to fit a bigger image into a smaller container. Of course, we have to crop the original image at some parts, and by default, the object position is in the middle, so you can see the middle of the image. We can change this {object-position: top} Let's see the result
You can also see the documentation for the CSS object-fit property
And that's it. Let me know if you find this article helpful to you, and I'll share part 2 of the images with web developers soon. We'll cover some of the advanced concepts, like loading images based on different devices ( desktop, iPad, mobile, etc.), cropping images with CSS, etc