105

How do I handle TIFF images in HTML pages?

I have tried using the embed tag, object id, img, etc. But, I am unable to display the TIFF image in the HTML page.

I am not using Java, .NET, or any other alternatives in my project.

UPDATE: Safari supports TIFF image loading. How can I load TIFF images in other browsers (IE, Mozilla, Firefox, etc.)?

Macintosh Fan
  • 355
  • 1
  • 4
  • 18
ASHOK
  • 1,475
  • 4
  • 14
  • 14

4 Answers4

82

This comes down to browser image support; it looks like the only mainstream browser that supports tiff is Safari:

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Where are you getting the tiff images from? Is it possible for them to be generated in a different format?

If you have a static set of images then I'd recommend using something like PaintShop Pro to batch convert them, changing the format.

If this isn't an option then there might be some mileage in looking for a pre-written Java applet (or another browser plugin) that can display the images in the browser.

Richard Ev
  • 52,939
  • 59
  • 191
  • 278
  • 2
    +1 TIFF in browsers is an unsure thing - even more so with CMYK ones. I suggest conveting to JPG or PNG. – Pekka Feb 01 '10 at 13:44
  • I kept TIFF images in local system only. As per the specification, i should not convert into another format. – ASHOK Feb 01 '10 at 13:49
  • 1
    As per the Image format support in Browser, i can use safari to display the TIFF image. Is it right? – ASHOK Feb 01 '10 at 13:55
  • 1
    @ashok: The Wikipedia page claims that Safari can render TIFF images. I'd recommend downloading it (assuming you're using Windows) and trying it out. http://www.apple.com/safari/download/ – Richard Ev Feb 01 '10 at 14:03
  • I would convert to PNG (that way you don't have to lose detail like in JPG... plus you are going to massively reduce the filesize you are serving up to the client. XnView provides awesome conversion utilities if you need a free app. – scunliffe Feb 01 '10 at 14:10
  • Thank you so much. Thanks to every one to support me. I could load TIFF image in safari browser – ASHOK Feb 01 '10 at 14:14
  • 1
    Chrome Extension: https://chrome.google.com/webstore/detail/inline-tiff-viewer/kkfncbfgbghoklckdmeljdjohpkknlma – Doug Weems Apr 30 '18 at 14:22
17

I found this resource that details the various methods: How to embed TIFF files in HTML documents

As mentioned, it will very much depend on browser support for the format. Viewing that page in Chrome on Windows didn't display any of the images.

It would also be helpful if you posted the code you've tried already.

roryf
  • 29,592
  • 16
  • 81
  • 103
  • 2
    Sorry it would be very large. So i am posting image loading part only 1) 2) like that – ASHOK Feb 01 '10 at 13:58
  • 2
    It doesn't work in the recent Chrome as it says: _This site uses a plugin (image/tiff) that is unsupported_. – kenorb May 16 '16 at 10:58
4

Tiff images can be displayed directly onto IE and safari only.. no support of tiff images on chrome and firefox. you can encode the image and then display it on browser by decoding the encoded image to some other format. Hope this works for you

Pradeep Yadav
  • 41
  • 4
3

You can try converting your image from tiff to PNG, here is how to do it:

import com.sun.media.jai.codec.ImageCodec;
import com.sun.media.jai.codec.ImageDecoder;
import com.sun.media.jai.codec.ImageEncoder;
import com.sun.media.jai.codec.PNGEncodeParam;
import com.sun.media.jai.codec.TIFFDecodeParam;
import java.awt.image.RenderedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import javaxt.io.Image;

public class ImgConvTiffToPng {
 
    public static byte[] convert(byte[] tiff) throws Exception {

        byte[] out = new byte[0];
        InputStream inputStream = new ByteArrayInputStream(tiff);

        TIFFDecodeParam param = null;

        ImageDecoder dec = ImageCodec.createImageDecoder("tiff", inputStream, param);
        RenderedImage op = dec.decodeAsRenderedImage(0);

        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();

        PNGEncodeParam jpgparam = null;
        ImageEncoder en = ImageCodec.createImageEncoder("png", outputStream, jpgparam);
        en.encode(op);
        outputStream = (ByteArrayOutputStream) en.getOutputStream();
        out = outputStream.toByteArray();
        outputStream.flush();
        outputStream.close();

        return out;

    }
}
Community
  • 1
  • 1
Roberto Rodriguez
  • 3,179
  • 32
  • 31
  • from where can I download `com.sun.media.jai.codec`? I tried to look for it over the web and there was no JAR – roeygol Dec 19 '18 at 08:43
  • 2
    @roeygol It comes from the discontinued Java Advanced Imaging SDK at https://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-java-client-419417.html#jai-1_1_2_01-oth-JPR – brantgurga May 14 '19 at 20:55