Reply to: Image Files

[VectraMan]

What about vector formats? There's Flash that everybody has, but that's a bit overkill for one image. And then there's SVG, which I don't think anybody has ever used ever outside of a standards committee ;-) Are there any other vector formats you could use that the common browsers would support natively?

Does anybody have an answer for that, as I'd be quite interested to know?

[VectraMan]

The only real solution is to combine lossy JPEG storage of the image
with lossless storage of a transparency mask using some other algorithm.
Developing, standardizing, and popularizing a file format capable of
doing that is not a small task. As far as I know, no serious work is
being done on it; transparency doesn't seem worth that much effort.[/COLOR]"

I've done that. I had something that stored the colour channel in JPEG format, and an 8-bit alpha channel in a lossless format. Because alpha channels typically have long sections fully off, followed by long sections fully on, with perhaps a bit of blending at the edges, they compress really well with RLE. It means the overhead of storing an alpha channel in this way is typically very small.

I think Flash can do exactly that as well.

iirc, GIF isn't lossy. RLE

Yes, but it's 256 colours. If you convert a photograph to a GIF, it has to reduce it to 256-colours, which means it effectively is lossy compression, and loses a lot of quality as a result.

GIFs only really work when you have very simple blocks of solid colour, as then you can maintain quality and RLE works well. Any graduated fills, or anti-aliased edges, or blur effects, and things tend to go to hell very quickly. And to get any half way acceptable quality you have to dither the image, which stops RLE working at all, and breaks down completely if you ever try to resize the image.

[Durbs]

I know it's old-fashioned but couldn't you get a lossless TIFF for transferring between apps? PS and GIMP will of course read them.

Yup, TIFF would be a great format to store your original image as an alternative to JPG as its top quality and also, as expat says, universally readable.

[expat]

Ok got it, thanks Durbs.

All I've got is the .ai file and several .gifs made from the .ai file. I'm not too happy that the guy who created it (a designer no less!) knew it was for a website so should have really known that .gif files were pants for resizing.

I have Photoshop and GIMP available so should be able to get the right results.

I know it's old-fashioned but couldn't you get a lossless TIFF for transferring between apps? PS and GIMP will of course read them.

[Badger]

Ok got it, thanks Durbs.

All I've got is the .ai file and several .gifs made from the .ai file. I'm not too happy that the guy who created it (a designer no less!) knew it was for a website so should have really known that .gif files were pants for resizing.

I have Photoshop and GIMP available so should be able to get the right results.

[Durbs]

So, what I'm getting from this is that I should use the .ai file to produce .bmp or .png files for the images for my website. Correct?

Not .bmp - too big, your choices are .png,.jpg,.gif and see what works best for that particular image.

I always create a whacking great .jpg or png. Say i have my logo file, i'll export the logo as a big 800px width image for web use as i know it'll never need to be displayed at that size. Then i use this logo_original.jpg as the source logo for future web pages and just grab it and resize it to whatever in something like Fireworks.

Thats worked for me anyway and reason i dont generally use the source vector file each time is i know wherever i am, i'll generally have a package capable of resizing a .jpg/.png and not necessarily have the means to mess with a .ai file.

[Badger]

So, what I'm getting from this is that I should use the .ai file to produce .bmp or .png files for the images for my website. Correct?

[Churchill]

I'd like to hear your technical explanation as to how a lossy compressed image can be uncompressed, reduced in resolution and recommpressed in the same lossy format without losing any quality. And would you really use JPEG for a logo? It tends to make a bit of a mess of sharp edges and blocks of solid colour, being designed for photographs.

iirc, GIF isn't lossy. RLE

[Durbs]

Well I'm not an HTMList, so I wouldn't know.

Do browsers support JPEGs with alpha channels? I think that was part of the JPEG2000 spec, but again I don't know if any of that version of JPEG is in common use.

What about vector formats? There's Flash that everybody has, but that's a bit overkill for one image. And then there's SVG, which I don't think anybody has ever used ever outside of a standards committee ;-) Are there any other vector formats you could use that the common browsers would support natively?

Unfortunately no, there's no other real alternatives. Think JPEG2000 died because of bickering over who 'owns' jpg.

Microsoft were working on JPEG XR based on their own HD Photo technology but don't know whether it came to owt. Think it was aimed at photographers anyway, not web graphics.

Read the following on why JPEG couldn't easily support alpha transparency on http://www.faqs.org/faqs/jpeg-faq/pa...ction-12.html:

"The traditional approach to transparency, as found in GIF and some other
file formats, is to choose one otherwise-unused color value to denote a
transparent pixel. That can't work in JPEG because JPEG is lossy: a pixel
won't necessarily come out *exactly* the same color that it started as.
Normally, a small error in a pixel value is OK because it affects the image
only slightly. But if it changes the pixel from transparent to normal or
vice versa, the error would be highly visible and annoying, especially if
the actual background were quite different from the transparent color.

A more reasonable approach is to store an alpha channel (transparency
percentage) as a separate color component in a JPEG image. That could work
since a small error in alpha makes only a small difference in the result.
The problem is that a typical alpha channel is exactly the sort of image
that JPEG does very badly on: lots of large flat areas and sudden jumps.
You'd have to use a very high quality setting for the alpha channel. It
could be done, but the penalty in file size is large. A transparent JPEG
done this way could easily be double the size of a non-transparent JPEG.
That's too high a price to pay for most uses of transparency.

The only real solution is to combine lossy JPEG storage of the image
with lossless storage of a transparency mask using some other algorithm.
Developing, standardizing, and popularizing a file format capable of
doing that is not a small task. As far as I know, no serious work is
being done on it; transparency doesn't seem worth that much effort."

[VectraMan]

PNG is a good choice although you have to be careful of legacy browser support of that format. I've produced sites before that looked great in IE 7/8/FF etc but viewed in IE6 they went pear shaped due to the issues handling the transparency (can be sorted via CSS but something to bear in mind).

Well I'm not an HTMList, so I wouldn't know.

Do browsers support JPEGs with alpha channels? I think that was part of the JPEG2000 spec, but again I don't know if any of that version of JPEG is in common use.

What about vector formats? There's Flash that everybody has, but that's a bit overkill for one image. And then there's SVG, which I don't think anybody has ever used ever outside of a standards committee ;-) Are there any other vector formats you could use that the common browsers would support natively?

[Sysman]

I remember having problems with .png years ago when using old browsers. If your target users are likely to be using old kit, that could be a consideration.

[xoggoth]

I was put off png when I found they did not display on my laptop. No idea why but from the net I did not seem to be the only one. Anyone else had a problem?

[Durbs]

If you reduce the resolution, then by definition you've reduced the quality. Reduce a high resolution photograph of a magnificent vista down to one pixel, and you won't be able to see anything.

And 100% quality is a lie. JPEG is a lossy format; even opening and saving a file without making any changes loses quality each time you do it. 100% quality just means less bad; it doesn't mean don't lose any quality.

Of course for most purposes what's being suggest here may be good enough, and most people might never tell the difference. But from a technical point of view, if you always go back to the original, uncompressed (or lossless compressed) highest resolution bitmap and convert that, you'll get the best results. And if you have a vector format available, resize that to the size you need and save as a bitmap.

I would use PNGs for bitmap images as they're lossless compressed and have a proper 8-bit alpha channel, which means proper anti-aliased edges (which GIF can't do), and no blurriness introduced by lossy compression (which JPEG can't do).

Yup, you are right, 100% will still apply compression. But in my experience, when resizing an image for web useage (smaller), the visual loss is negligible.

PNG is a good choice although you have to be careful of legacy browser support of that format. I've produced sites before that looked great in IE 7/8/FF etc but viewed in IE6 they went pear shaped due to the issues handling the transparency (can be sorted via CSS but something to bear in mind).

But to answer the OP's question, if you have the original Illustrator files then use these as the source of the export and if you do not have the means to do it then ask whoever supplied you the files to provide you with a big JPG/PNG export of it that you should be able to size down with no visual loss. PDF is also good as you can zoom and screengrab at good quality from that.

[cojak]

I've been told only to use .gif files for block-colour simple drawing type pictures, jpeg for shading/photographic type pictures. I hardly use .gif any more - if I need to keep the size down I use .png these days...

When I had my photo done professionally EPS was only used for printed materials since the high quality meant the the file sizes were huge. You simply don't need them for the web because of the average monitor's screen resolution...

[VectraMan]

??? Making a non-vector format image larger, of course its going to suffer as it needs to add pixels. But making it smaller - i've never seen any noticable quality loss on shrinking a JPEG as long as you use 100% quality..

If you reduce the resolution, then by definition you've reduced the quality. Reduce a high resolution photograph of a magnificent vista down to one pixel, and you won't be able to see anything.

And 100% quality is a lie. JPEG is a lossy format; even opening and saving a file without making any changes loses quality each time you do it. 100% quality just means less bad; it doesn't mean don't lose any quality.

Of course for most purposes what's being suggest here may be good enough, and most people might never tell the difference. But from a technical point of view, if you always go back to the original, uncompressed (or lossless compressed) highest resolution bitmap and convert that, you'll get the best results. And if you have a vector format available, resize that to the size you need and save as a bitmap.

I would use PNGs for bitmap images as they're lossless compressed and have a proper 8-bit alpha channel, which means proper anti-aliased edges (which GIF can't do), and no blurriness introduced by lossy compression (which JPEG can't do).