How to add an Image to a web page
and make it responsive

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

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

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)

<img src="pathtoimage" class="image1-300" alt="alt text">
<img src="pathtoimage" class="image2-200" alt="alt text">
<img src="pathtoimage" class="image3-150" alt="alt text">

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.

Easy Captioning

The easiet way to caption an image is using the figure element with figcaption.

<figure style="margin: 0 0">
<figcaption>Figure #2</figcaption>
<img src="images/colspan.gif" style="margin: 0 0; float:left;" alt="Figure #2">
</figure>

You can place figcaption above or below the image. Adjust style settings as needed.

The New AVIF Image Format

<img class="yourclass" src="image.avif" alt="Image 1" title="Text When hovered" onerror="this.src='image.png'">

XnConvert is very easy to use. Drag or copy the image into the Input window. Set the Output window to AVIF and click Convert (Bottom of Window). You can do individual files or entire folders.

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)

 

Top