Dark Mode Toggle

Using Images in Flexbox

The images on this website are simple placeholders used to demonstrate their manipulative capabilities in flexbox. Please excuse the lack of aesthetic effort!

The Rules

Flexbox allows the use of the float property for positioning images inside its child containers. You cannot use it in parent containers!

If you want to add an image to a page in flexbox and make it responsive, follow the same rules you would in conventional CSS:

Rule #1
Do not add the width and height measurements to your image code.

<img src="image.png" width="432px" height="500px" alt="alternate text">

Instead use:

<img src="image.png" width="432" height="500" style="aspect-ratio: 432 / 500 " alt="alternate text">

Rule #2

Include the line:
img {max-width:100%} 

The CSS for the images on this page:
img.image1c, img.image2c , img.image3c  {
max-width:100%;
height: auto;
display:block;
float:none;
margin: 1dvw auto;
border: none;
box-shadow:none }

/*Swap Images at Various Viewing Widths*/
img.image2c , img.image3c {display:none}
img.image1c {display:block; }
Pugs Pugs Pugs

Optimizing Images

The best way to optimize your images these days is to convert them to one of the newer file formats. The two most popular are avif and WebP.

If your images need resizing Linux Users are in luck. Use the graphics program Krita from the software repository. Load the image. Choose Image. Scale Image to New Size.

For converting to the newer file formats use Switcheroo. It's in the Linux repository.

Linux Users: If you can't see the avifs or webPs after you create them install gThumb. It's also in the repository.

Swapping Images - HTML

<img class="image1c" src="images/pugs1.webp" width="432" height="500" style="aspect-ratio: 432 /500" alt="Pugs" title="Image w432" onerror="this.src='images/pugs1.jpg'">

<img class="image2c" src="images/pugs1-300.webp" width="300" height="347" style="aspect-ratio: 300 /347" alt="Pugs" title="Image w300" onerror="this.src='images/pugs1-300.jpg'">

<img class="image3c" src="images/pugs1-231.webp" width="231" height="267" style="aspect-ratio: 231 /267" alt="Pugs" title="Image w231" onerror="this.src='images/pugs1-231.jpg'">

The Media Query

@media  (min-width: 641px) and (max-width: 800px) {
img.image2c, img.image3c {display:none} /*Hide 2 and 3*/
img.image1c {display: block} /*Show img.image1c */
}

Just in Case

Some of the older browsers might not support the new file formats, so it's a good idea to include a fallback version of the image that displays on error.

There are a lot of fallback codes posted on the internet. I tried several before finding one that actually worked.

Here's the one we use in this mini site:

<img src="theimage.avif" alt="Alternate Text" onerror="this.src='theimage.png'">

Image Heavy?

For pages that display a lot of images, add the attribute loading="lazy" so they don't all load at once.

<img src="theimage.avif" alt="Alternate Text" loading="lazy" onerror="this.src='theimage.png'">

A better option to consider is preloading (Head Section of Page):

<link rel="preload" as="image" href="images/pugs1.webp">

Note: If you've set up your Localhost and want to drive yourself NUTS this can all be tested on Lighthouse (Dev Tools).

Add Message On Hover

To display a message when the mouse cursor hovers the image, use the title attribute.

<img class="yourclass" src="theimage.avif" alt="Alternate Text" loading="lazy" title="Your Message"  onerror="this.src='theimage.png'">

NOTE: All attributes will transfer to the fallback image onerror.

🔺