How to add an Image to a web page
and make it responsive
The <img> tag is used to add an image to a web page:
<img src="path/imagename" alt="text">
The image tag does not require a closing tag.
Required attributes are:
src="" (include path and filename)
alt="" (brief description of image)
Optional:
title="" (Brief description that appears when hovered)
If you want to add a responsive image to a page, to make it expand and contract with the width of the visiting browser:
The Rules to
Add an Image to a Page
Rule #1 Do not add the actual width and height measurements to your image code.
<img src="pathtoimage" width="300px" height="200px" alt="alternate text">
Instead use:
<img src="pathtoimage" width="300" height="200" style="aspect-ratio: 300 / 200 ; height: auto" alt="alternate text">
See: Lighthouse
Rule #2 Include the line in your style sheet:
img {max-width: 100%} (in open space)
or
img {width: 100%} (within a container)
The HTML
The actual html code for the Sunrise Image:
<img src="images/sunrise.jpeg" class="centerimg" alt="sunrise pic" title="Sunrise over the Ocean.">
The actual CSS:
img.centerimg {
display:block;
float:none;
max-width: 100%;
margin: 1dvw auto;
box-shadow: 0 2px 4px #000
}
Swapping to Make Images Responsive
Outdated, but another way to use images on web pages is to swap them out at various screen widths or break points using Media Queries in your style sheet.
You would create different size widths of the same image. Let's say 3 different sizes.(300px, 200px and 150px)
<img src="pathtoimage" class="image1" alt="image w 300px">
<img src="pathtoimage" class="image2" alt="image w 200px">
<img src="pathtoimage" class="image3" alt="image w 150px">
The following code in your style sheet would define how you want the images set in the page.
The line following the block of code would hide images 2 and 3 and allow the first one to show on the page.
img.image1, img.image2, img.image3 {
max-width: 100%;
margin:1dvw;
border:solid #000 1px;
box-shadow:2px 2px 4px #000;
float:right}
img.image1 {display: block}
img.image2, img.image3 {display:none}
@media all and (max-width: 768px) {
img.image2 {display :block}
img.image1 , img.image3 {display:none}
}
@media all and (max-width: 360px) {
img.image3 {display :block}
img.image1 , img.image2 {display:none}
}
Then you would create break points using Media Queries in the style sheet where you want to make a swap to a different size image.
Pretty simple. Seriously, once you get into building Media Queries in your style sheets, you'll be amazed at some of the crazy things you can do with CSS3.
You can use the same technique on other page elements like links and iframes as demonstrated on our Anchor Tag Images page.
Easy Captioning
The easiet way to caption an image is using the figure element with figcaption.
<figure style="margin: 0 0"> <img src="images/sunrise.jpeg" style="display:block;margin: 0 auto; float:none;" alt="Figure #2"> <figcaption style="text-align: center">Figure #2</figcaption> </figure>
You can place figcaption above or below the image. Adjust style settings as needed.
The New AVIF Image Format
I wouldn't have known about this if I wasn't a member of Medium.com but there is a new image format that allows you to create or convert images to about a 10th of their original size without any loss in quality or performance.
Think of the difference in loading speed.
It's the .avif format.
Linux Users can find a little program in the repository called Switcheroo for converting your bulky screenshots to avif or webP formats. It is is fairly easy to use. Before you install it Install gThumb so you can see the images after you convert them.
Just to be safe, should your page encounter a browser that doesn't support .avif, You can use a fallback version as shown here.
The Code
Fallback Code that actually works:
<img class="yourclass" src="image.avif" alt="Image 1" title="Text When hovered" onerror="this.src='image.png'">
The fallback will retain class , alt and title settings. Quote marks must be exact.
Optimizing Images
Optimizing is the process of reducing an image to the least number of bits per pixel and colors without sacrificing the quality of the displayed image. Large unoptimized images are a major cause of irritation for web surfers. Many good graphic creation programs include features for optimization.
Always check your images when HTML pages are uploaded to your web space. Many images will display quite differently over your web hosts server, than they do when viewed on your PC.
*Build Responsive Designed web pages and you won't need to worry about image sizes.
Note: To add an image to a page, see also: Paragraphs and Images. and Anchor Tag - Image)
Lighthouse
If you've started testing pages on your localhost with Lighthouse in Dev Tools, you know that omitting image dimensions produces Layout Shift errors.
The fix for an image that is 450 pixels wide and 461 pixels in height.
<img src="images/desired-image.avif" width="450" height="461" style="aspect-ratio: 450 / 461 ;height: auto" alt="Image">
Note that you omit px in width and height but provide an aspect-ratio so that the image scales in size.
You can preload the image so it doesn't add to your TBT score. (Place in head section)
<link rel="preload" as="image" href="images/desired-image.avif" fetchpriority="high">
You can also use loading="lazy" on images that are below the fold so that they only load if the user scrolls near them.
<link src="images/desired-image.avif" loading="lazy" alt="">
For a working example download one of our 00 Series Templates