Display TIFF Files on a Web Site in Chrome and Firefox

Display TIFF Chrome Firefox

If you need to display TIFF files on the web, you might have problems. TIFF files used to be displayed by all browsers, but as they are not really suitable for web use, support has been dropping. See Image Support by Browser:  https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

This makes sense of course, if you are only trying to use the TIFF files as images as part of your layout or content. TIFF files are often much larger than what you want if you are trying to have a decent page speed score and good user experience. This is why TIFF support on the web is being dropped and Chrome and Firefox, of the major browsers no longer support the format. In fact only Safari and Microsoft Edge do.

Display TIFF Files on the Web

But what if you have a legitimate need for displaying this format? I recently created a file management application where the requirement was to be able to quickly upload an image and have it displayed in their gallery for download. Many of the images were for print materials and  therefore in the TIFF format, so they wouldn’t display on Chrome or Firefox. Instead they would open a download window upon loading the page.

We could have had a field for the main image and then a thumbnail, but the requirement was a streamlined process where they didn’t even want to title or caption the images – they just named the files intuitively for the listings. Generating a converted thumbnail upon upload wasn’t an option as the hosting environment was restrictive and didn’t have the ImageMagick extension for PHP enabled. They were unwilling to change hosts.

Are you having trouble paying attention this long? Maybe you need an ADHD test! Fine, I’ll get to the point.

After a lot of digging, I ended up finding UTIF.js which was created for the Photopea online photo editor. This library processes your TIFF files and allows you to display them in HTML. This was very easy to install and use. I had to modify the functionality a little bit as there was a delay in having all of the images loaded. Also some new images would be loaded via AJAX as the user navigates the folder tree That made the body onload implementation was unsuitable. Beyond that it was quick and easy to get going.

Display TIFF Files on a Website
This is a TIFF file

You can use TIFF images directly inside the <img> element and then, you just have to to call UTIF.replaceIMG() once at some point. Eg:

<body onload=”UTIF.replaceIMG()”>

<img src=”image.tif” /> <img src=”dog.tif” /> …

Other Options to Display TIFF files in Chrome and Firefox

3 thoughts on “Display TIFF Files on a Web Site in Chrome and Firefox”

  1. I’d love to know what modifications you made. I am working on trying to modify the calling of it to do it selectively on demand, as well as to keep the rest of the interface freed up while it’s processing multiple pages in a tif.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top