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="" width="300px" height="200px" alt="alternate text">
Rule #2
Include the line:
img {max-width:100%}
The CSS for the images on this page:
img.l-img {
max-width:100%;
float:left;
margin: 1rem
}
img.r-img {
max-width:100%;
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 XnConvert. It's in the Linux repository and Windows users can download from several locations. It is cross platform so Apple users might be in luck.
Linux Users: If you can't see the avifs 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'">
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.