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.
Getting to the Point (Clarity)
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 unsuitable. Beyond that it was quick and easy to get going.
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
- https://github.com/seikichi/tiff.js/tree/master – Looks very good and was well recommended. This github page is how I found the UTIF.js option actually
- https://github.com/image-js/tiff – Also linked from the tiff.js page
- Chrome or Firefox extensions: this is only an option if you have control over your user base and can have them all install the extensions
- Generate thumbnails with PHP and ImageMagick
- ASP.NET users can generate thumbnails from TIFF files natively
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.
any angular 6 example ?
I need to render image based on URL returned from api which is tif format Eg:URL\sample.tif