Image Files

[Badger]

I have a question regarding images.

I have had some logos designed and I have the .gif files and also the Adobe Illustrator source file. My problem is that when I upload them to my new website they are not anamorphic (think that's the right term) and they lose a lot of quality when shrinking and enlarging the image. What file type do I need to use to keep the quality the same no matter what the size?

TIA

[ferret]

If you have photoshop then convert the image to RGB from Indexed olour (the gif format) before resizing, jpeg preserves quality when resizing where .gif files do not.

In Photoshop something like Image > Mode > RGB and then resize and save it out as a jpeg or gif, whatever you want.

[Badger]

great, many thanks.

[VectraMan]

To keep the quality when resizing they need to be a vector format, not a bitmap format. I'm guessing Illustrator files probably are, not sure.

GIFs are an ancient 256-colour format (almost as ancient as HTML), and so should be burned.. And no JPEGs do not keep the quality when resizing, although the results are probably less bad than with GIFs.

If you've got the original source that's where to start. It's always best to start from the highest quality version you have.

[ferret]

jpg files do keep their quality really nicely when resized down. No need for vector images there. If resizing up then yes, you would need source files.

[VectraMan]

jpg files do keep their quality really nicely when resized down. .

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.

[Durbs]

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.

??? 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. Perhaps your app defaults to a certain compression setting (mine does, it'll default to 80% on a jpg resize)? And in this case then yes, additional compression will be applied and the results wont look the same as the original.

As for JPEG lending itself to logos - yes, it is perfect for this and if a good looking EPS looks ropey when converted to JPG then you have done the conversion wrong.

Had my logos professionally redrawn a while back and got them supplied in the various vector and PDF formats along with JPG and GIF versions. Which one is the worst by far? The GIF, the rest are pin sharp.

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

[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...

[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.