Using Images in Flexbox

The way you display images on your website could make or break its performance. When using them in flexbox, follow a couple of rules, place them in child containers and you will simplify the process.

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 actual width and height measurements to your image code.
<img src="" width="300px" height="200px" alt="alternate text">

Instead use:
<img src="" width="300" height="200" style="aspect-ratio : 300 / 200 " alt="alternate text">

Rule #2
Include the line:

img {max-width:100%} /* Open Space*/
 or
img {width:100%} /*Inside container*/
 
The CSS for the image on this page:
img.l-img {
max-width:100%;
height: auto; /* Crucial for aspect-ratio */
float:right;
margin: 1rem
}

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 created them install gThumb. It's also in the repository.

Just in Case

Some of the older browsers in third world countries 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'">

Note: Use as an inline attribute.

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.

Image Swapping

The loading speed of your web page will play a major role in determing how many viewers will stick aroung waiting to see it. Shoot for less than 3 seconds max or most will have moved on.

One way to speed the process on mobile devices is by providing smaller versions of the same image at loading time.

We provide a somewhat archaic method of swapping using media queries. Once you understand what's going on you can pursue more modern methods.

The HTML

This is the actual code from Template 504:

<img class="img1" src="images/pugs1-300.webp" loading="lazy" width="300" height="347" style="aspect-ratio : 300 / 347 " alt="Card Image" title="Image w300" onerror="this.src='images/pugs1-300.jpg'">
    <img class="img2" src="images/pugs1-250.webp" loading="lazy" width="250" height="289 " style="aspect-ratio : 250 / 289 " alt="Card Image" title="Image w250" onerror="this.src='images/pugs1-250.jpg'">