Compressing images for load time ...

without losing too much detail

[Liane]

How do you compress an image (like a map) without losing too much of the detail? The images are about 523 X 290 pixels.

[TallTroll]

Most images on the web are already compressed. Both JPEG and GIF files are compressed formats. There is also a new standard, PNG which I don't know too much about, but I assume that it is based on a new compression algorithm.

You will get different quality/size ratios from the different file formats. Try taking your raw image, and saving it at different qualities, and in different formats, until you get a combination you are happy with.

Quality image software like Adobe Photoshop or something often has a "Save for Web" option, and a choice of file types

Depending on whether your map is quite colourful and detailed, or lots of lines and monochrome, you will get different results. GIF usually works best for low colour/line type images, JPEG for photo type images

[tedster]

There is a decent free utility available online from Spinwave [spinwave.com] for "crunching" both gifs and jpgs down to a small file size. Before I coughed up the bucks for PhotoShop, this was a haven for me.

[bufferzone]

You can open the image in photoshop, then save for web. Now you can play around with the different settings, to create the smallest possible image in an acceptable quality. Try in gif, jpg and png, with different colordepth

Regards
Kim

[bill]

...and for those of us who might not have the PhotoShop budget...ULEAD's SmartSaver [ulead.com] has done a great job for me over the years. However, a lot of the newer graphic packages do have similar features built in nowadays.

[caine]

Liane,

From the MM school Fireworks is a great piece of software for optimizing pics for the web.

How big is the map, what size do you want it to be: both in k's and resolution, if it is small, but very complexe then high level >80 + jpg's, if it is large but simple then =<60 jpg or look at gifs, i'm not to sure about the mysteries around png's, i thought their were fireworks own extension.

[Eric_Jarvis]

Xat's Image Optimizer does a great job...it allows you to compress different areas of the image by different amounts

worth learning to use

[Liane]

Hi Caine,

The maps have all been designed to be between 520 to 525 pixels wide and vary in height. If you go to bareboats bvi dot com slash bvi underscore map dot html (put together of course) you can see an example of one of the maps. The individual maps of the 4 major islands will be similar in size but with a lot more detail.

I'm embarassed to tell you that all I have is the basic photoshop package that came with my imac two and a half years ago so there are not a lot of options. I design all images in Appleworks, copy and paste to photoshop to make into a jpeg.

O.K. ... so I am challenged in many ways, but it seems to work to a certain extent!

[DiAl]

If you download the HVS opimisation Photoshop plugin tool from [digfrontiers.com...] you will do well for optimising images to the smallest file size without loss of quality.

[ggrot]

I suspect that if all you are doing is an after the fact lossy compression, you can probably find something out there that is free. I've seen websites where you upload the picture and it shows you different compression options. I think linux has a built in graphics editor that can do this. There are probably other tools as well. Check out download dot com and see what can be found. If that's all you need the software to do, there is little reason to burn $100 on a brand new PSP or $400(or whatever ghastly price its at now) for photoshop.

[Marcia]

Surprising that Irfanview [irfanview.com]is still free. It's a graphics viewer, but also has an excellent compression feature for jpeg files.

[angiolo]

I use Photoshop 6.0 to better edit the image. Usually to compress a little bit more the files I reduce a little bit the contrast; I don't know why, but reducing the contrast you reduce the size in the optimized image.

After having saved the file for the Web, I use Image Ready (Included in Photoshop) to optimize it.

[4eyes]

Liane,

That map can be best saved as a GIF file, with colour set to 16 colours.

This reduces the size to less than 10K

[Liane]

Thanks everyone. I suppose my terminology was incorrect ... (she says red faced) but 4eyes somehow understood what I needed to do and *WOW* what a difference in load time! That map went from 95K to 27K and loads super fast now. I have very bad eyesight and can still read it so it must be o.k.

Many, many thanks!

[fonzerelli 79]

You should try

[webservices.adobe.com...]

You can convert gifs to jpegs and lower the file size.

You can also compare all options.

Cheers

[IanKelley]

Regardless of which compression software you use (from my experience ULead's is the best) the first thing you should do is use your image editing program to progressively lower the color depth (we're talking about .gifs here) before saving.

I say progressively because this causes less quality loss (i.e. first to 256, then 128, then 64, then 48, etc...) Just keep going until you see a major loss of visual quality. Doing this and THEN using an image compressor will do amazing things for your graphics.

Keep in mind that the most popular screen resolution right now is 800x600. This means if your resolution is set at over 1024x768 (and why wouldn't it be?) then you'll want to check for visual quality loss at 2x because that's closer to how the image will appear for most people.

[kapow]

Hi Liane

It seems as though you have achieved what you want. But I just thought it might be fun for the forum if you provide a url for the original source image. Then some of us might like to post up urls of our best attempts of optimising your image for you. We would all get to see the results. This would speak volumes about the best approach.

Who's game? :)

[Liane]

Actually, I drew the map myself after scanning a rather poor map from an old atlas. (I didn't want to be accused of stealing anyone's images).

I can upload it to a page if you like. Just let me know when and I'll give you the url.

I'd love to see what those who know what they are doing can do with it! I drew it using Appleworks and then copied and pasted it to Adobe Photo Shop (very basic) which came wih my 2 1/2 year old imac.

[keyplyr]

Another free web based image optimizer is NetMechanic:
[netmechanic.com...]
...does either .gif or .jpg and even switches file types. Also has an HTML toolbox for checking page load time, HTML syntax, browser support and link validity.

If you keep your cookies cleared, you can keep using it indefinitely.

D C

[4eyes]

Liane

Give us the link to the image, let us have a little fun!

[kapow]

Liane
Perhaps it would be good to start a new thread (since this one is quite long) inviting all to have a go at your image. <gauntlet> I, will be extolling the virtues of MM Fireworks with my attempt.</gauntlet> :)

[mivox]

Hang on a bit... I'm checking out options for handling this in the most straight forward manner possible. Such a "competition" could become a nightmare freelancer-self-promotion-a-thon, and while I would LOVE to see the results, I need to figure out the best way to handle it.

Thanks for your patience everyone!

[kapow]

I see your point Mivox. Is there a way this can be done with some rules? e.g.
- All sample images to be posted on an otherwise blank webpage.

Sorry - I am not very aware of what the sensitivities are with such issues. I don't mind conforming to any rules. It would just be great if there was a way that we all could see what different software (and people) can do.

[mivox]

I'm waiting to get an original file from Liane... here's my plan:

I'll put the original uncompressed image on my web server space, and post the URL in a new thread...

Then, anyone interested in "competing" can download the file, have their way with it, and stickymail me with the URL of their compressed image, what program & settings they used to compress it, etc...

Then I'll upload the "finished" images to my server as well, and post links to each image, along with who did it and how they pulled it off...

Keep your eyes open for the new thread. (This is interesting enough to me, if Liane decides not to allow use of her map, I'll come up with another "original" image with roughly the same specs to use...)

[kapow]

Sounds good to me Mivox.
Lets have some fun (and learn something):)

[Liane]

Hi everyone,

Sorry I was so long in responding. Have had a few dragons to slay in the past few days. I have uploaded one of the original images to one of my pages and trashed the compressed image. I've sticky mailed Mivox with the url.

I'm really looking forward to seeing what you folks can do!

[mivox]

THE RACE [webmasterworld.com] IS ON!

[mivox]

I'm going to lock this thread down... Everyone's results will be posted on Saturday, with links to their graphics and an brief explanation of what software and settings they used. :)

I'm sure we're all very curious to see what everyone is coming up with... but patience is a virtue. ;)

I may post an occasional update in the contest thread [webmasterworld.com] so everyone has a general idea how things are going...