Conversion Tools & Fallback Images
Open the lesson folder
In our starter files, open the index.html page from this lessons folder:
> 6.Conversion-tools-image-fallbacks
Introduction
Now we know more about the different file types available, we can add them into our projects. Also, how to add fallback images if there is no browser support.
For this, the picture element can be used to provide various images with different formats. We still provide the source elements, but this time we declare the file type. The browser or device will then check if it is supported, and if not, it will be skipped.
Project folder
For this example, we have both a jpg and a webp image:
The index.html file has some common file types noted we can check for:
<!-- image/webp, image/svg+xml, image/png, image/jpeg, image/gif -->
Providing a fallback format
The following example lists our webp and jpg image:
<picture>
<source type="image/webp" srcset="images/bridge.webp" />
<img src="images/bridge.jpg" />
</picture>
We can provide a webp image to use if supported. Otherwise, the jpg can be selected as a fallback.
Test this in the browsers developer tools, under the network panel. You should see the webp image if supported.
The webp format is widely supported so you should see this listed. This provides a file size saving when compared to the jpg image:
| FILE | SIZE |
|---|---|
| bridge.jpg | 138 |
| bridge.webp | 113 |
This is really useful, but when we are looking for images to use in our projects, we don’t always have the option to download our images in different formats.
Image conversion
This is fine if the image is available in a format you require. If not, there are some tools to help us convert and compress images.
Depending on your operating system, you may even have a built in soultion. For example, a Mac has the Preview software available.
At its most simple, this tool, and also others, have a resize option:
preview > tools > adjust size
Don’t worry if your not using a Mac, we have more options soon, and also many other programs have similar options available.
This can help us reduce the file size if the images are too large, also displaying the file size savings.
Most programs also let us export the images too. In the Preview program:
preview > file > export
We can change the image format and also adjust the quality levels:
There are also lots of other tools you can download, and you will find a huge amount available if searching app stores or online.
Available tools
ImageOptim
A popular tool is ImageOptim. ImageOptim is for Mac and Linux which you can download. This is a collection of tools which it combines to remove any unnecessary data from your images.
And also applying compression techniques too. There is also an online version, but they do charge for this service.
Tinify
Another free service is Tinfiy. Despite the URL, this also accepts other file formats such as jpeg and webp images, which we can drag and drop onto the website.
Compressor
Another web based drag and drop service is Compressor.
Along with png and jpg, this also accepts svg, svg, and webp file types. We can select lossy or lossless compression, and also custom settings where we can resize and set the image quality too.
Img2Go
Img2Go is an online compressor and optimizer. It includes a range of tools such as backgrund removal, AI upscaling, watermarking, resizing, and many more. Although a free plan is available, some services may be limited to the paid options.
This tool also allows us to convert the image type to other formats, along with comverting to documents too.
These are just some of the many tools available both to download, and also online tools too, so we should never be stuck with an incorrect image file format.