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)

The Rules

To Add an Image to a Page and Make it Responsive

If you want to add a responsive image to a page, to make it expand and contract with the width of the visiting browser:

Rule #1 Do not add the width and height measurements to your image code.
<img src="pathtoimage" width="300px" height="200px" alt="alternate text">

Rule #2 Include the line:
img {max-width: 100%} in your style sheet.
or a desired relative width:
img.l-img {width: 33%}

The actual html code for the Sunrise Image:
<img src="images/sunrise.jpeg" class="l-img" alt="sunrise pic" title="Sunrise over the Ocean.">

The actual CSS

img.l-img {
float:left;
max-width: 100%;
margin: 1% 1%;
box-shadow: 0 2px 4px #000003
}

The Media Querie for Resizing at Smartphone Widths

I choose to set the break point a little early for the larger SmartPhone screens

@media (max-width : 430px)
   img.l-img  {
	float:none;
	display:block;
	max-width:100%;
	margin:2% auto }
}

Apple iPhone 11	414 
Apple iPhone 11 Pro	375 
Apple iPhone 12	390
Apple iPhone 12 mini 360

Apple iPhone 14 Plus	428 
Apple iPhone 14 Pro	393 

Apple iPhone 15 Plus	430 

Swapping to Make Images Responsive

Another way to use images on responsive web design 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)

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:1% 1%;
border:solid #000 1px;
box-shadow:2px 2px 4px #000004;
float:right}

img.image2, img.image3 {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.

@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}
}

Pretty simple. FOR YOU, YOU SAY!! 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.

We demonstrate the swapping process with 5 images in our Template #402 - 6 Page Kit Click to Download

You can use the same technque on other page elements like links and iframes as demonstrated on our Anchor Tag Images page.

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)