imageFormatFallback.js
imageFormatFallback.js is a litte script to provide fallback image formats for browsers by using a simple HTML attribute.
With this you can add an image with <img src="img/maingron.webp" formats="webp,png" alt="Maingron Image"> and it will be shown in every browser.
In comparsion to srcset, this also works in the Internet Explorer (Please don't use Internet Explorer) and in many very old browsers.
The script tests if the browser supports the image format in src="*". If it's not supported, it uses the first supported format listed in formats="*". The script is developed so that the website won't load any slower on modern browsers. It will only delay loading of images a few milliseconds, if the given format is not supported (Which is good).
Tested supported browsers:
- Firefox 8 and later
- Google Chrome 9 and later
- Internet Explorer 9 and later
- Safari 3 and later
- Opera 12 and later
Examples
Below you can see examples of different image formats. Some will probably not be supported by your browser and be replaced by the script.
The text on the bottom left tells you the format used in the src-attribute, within the image you can see the actual format being used.
AVIF 
WEBP 
PNG 
JPG 
GIF 
BMP Github Site: https://maingron.com/github/imageformatfallbackjs
Sponsor this project on Github: