104

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.)?

0

4 Answers 4

81

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.

7
  • 1
    +1 TIFF in browsers is an unsure thing - even more so with CMYK ones. I suggest conveting to JPG or PNG.
    – Pekka
    Feb 1, 2010 at 13:44
  • I kept TIFF images in local system only. As per the specification, i should not convert into another format.
    – ASHOK
    Feb 1, 2010 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 1, 2010 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. apple.com/safari/download
    – Richard Ev
    Feb 1, 2010 at 14:03
  • 1
    Chrome Extension: chrome.google.com/webstore/detail/inline-tiff-viewer/…
    – Doug Weems
    Apr 30, 2018 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.

2
  • 2
    Sorry it would be very large. So i am posting image loading part only 1) <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="100%" HEIGHT="100%" CODEBASE="apple.com/qtactivex/qtplugin.cab"> <PARAM name="SRC" VALUE="tiffdocument.tif"> <PARAM name="SCALE" VALUE="aspect"> </OBJECT> 2) <img width=200 height=200 src="tiffdocument.tif" alt=""> like that
    – ASHOK
    Feb 1, 2010 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, 2016 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

1
  • 3
    Can you include any source, in case this information becomes outdated?
    – kenorb
    May 16, 2016 at 10:59
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;

    }
}
2

Not the answer you're looking for? Browse other questions tagged or ask your own question.