Forum Moderators: open
also, are there any new types of compressions being developed that may enhance the speed of web page image loading greater than what is currently available?
thank you
The algorithms for compression have been improved significantly in recent year. ImageReady (the Photoshop companion application) is now quite amazing. It started out good but now that we're up to version it's truly amazing. But the best results need human intervention.
Sometimes a static Flash file (swf) is the best because of the vector possibilities. But it all depends on the image content and how well any one algorithm can trick the human eye.
Now to get the smallest PNG files I can get, I have a utility that runs the original image through a pallet optimizer (pngrewrite), then calls one optimization program (pngout) to run both the original image and the results of the pallet optimizer. And finally a third optimization program (pngcrush) to optimize the original and output of all other optimization programs. With some tweaking, I can even have it convert a GIF image to PNG.
A bit excessive? Maybe. But I happen to like the results I get.
[libpng.org...]
Kaled.
can someone post file size figures on how small they can compress a 32 x 32 pixel image in the best quality available, and do so using the three seperate formats? This will prove which compression is actually superior, and maybe also enlighten us on how to do it? :)
And a 32x32 image of what, a single color, a gradient, a photorealistic image or line art? And what about the color depth? Do you want to preserve as much information in a lossless format in case you need to edit the image later? Because the types of image and your situation will determine which file format is best to use.
Oh and for those who are interested in my little utility, here it is. First create a main directory to store the utility files (in my case PNG/), then place a copy of the the following utilities: pngrewrite, pngout and pngcrush. Underneath the main directory, create two subdirectories finished/ and original/. Finally create the following two batch files.
crush.bat
@echo off
del /q finished\*.*
for %%x in (originals\*.png) do call processer %%~dpnx
pngcrush -brute -reduce -rem alla -d finished originals\*.png
processor.bat
rename %1.png %~n1-1.png
pngrewrite %1-1.png %1-2.png
pngout %1-2.png %1-3.png
pngout %1-1.png %1-4.png
After that it is just a matter of putting the original files in the original\ subdirectory, run 'crush' from the main directory, then sort through the finished\ subdirectory and pick the version with the best compressed results (usually -3 or -4).
for your program, how much of a file size decrease do you see on avergage per file?
Why are you so insistent for a one-size-fits-all format in the first place?
The browser would read the first bits to decide how to decompress the file.
Really, there's no other application like this from what I know. And the more you understand the three formats technically, the more fine tuned your control.
But it won't do spectacular tricks for you on automatic pilot. How can software decide what "looks" best, or exactly where in a particular image the palette needs to use more colors and where it can afford to just use a couple?
[edited by: tedster at 3:38 am (utc) on Mar. 31, 2005]
not trying to be obssessive, just want a general idea of what is out there... something i might not know
1. Choosing the number of colors (of course)
2. Hand edit the color lookup table
3. Use a channel to influence the color assignments for each pixel
4. Vary between perceptual, selective, adaptive and web color palettes
5. Apply web color restrictions by a percentage
6. Control dithering by type (diffusion, custom pattern, random noise) and by percentage
7. Interlaced or regular format
8. Choosing "lossy" compression by a percentage, and by channel influence
Each of these is a technical possibility, but the choices also depend on a trained eyeball. And them there's the kind of thing you can achieve just by preparing an image before you get to the compressed format. The more you know the tricks that these formats use to compress an image, the more you can help them out with some judicious pre-prep.
I can often take a photo-realistic image, even one with a gradient sky for instance, and create a gif that beats a jpg visually and in total file size. Not always - it depends on the color range of the original and other things. But there is no hard and fast rule. Sometimes line art works better as a jpg than a gif, especially if a degree of subtlety is required for the final effect.
We can probably expect better and better technology, but someone still has to tweak the dials and eyeball the results. I honestly expect WYSIWYG HTML editors to put out valid html long before we see a magic image compression application.
The biggest issue I see is images that need sharp text over a glorious photographic image. The best results I've seen come from a background photo in jpg and a foreground gif or png for the text, with transparency.
Thanks for css-p to making this possible. You can get the advantages of both formats.
also do you know of any other guides like the one you gave for other formats besides just .gif?
im sorry if i sound greedy, i just want to become very familiar with the techniques so that the graphics are implemented in the best possible way.
Each of these is a technical possibility, but the choices also depend on a trained eyeball.
This is the true bottom line on compression. No single format excels over another, it's more about what you want to do and how it looks when done. This is why I simply refuse to use auto exports of any kind, including FireWorks, ImageReady, or Flash.
Both jpg and gif create a palette for a given image, and map out the coordinates of each color. In the case of jpg, it interpolates many values to eliminate some of the colors, but it's a mathematical automated process. Like any automated process, it often misses the mark. Generally if you can get the color palette of an image low enough, a .gif will sometimes exceed the quality of a jpg.
Example: ever saved a jpg with large white areas and found speckles in the white areas where there should be none? Sometimes you can just save it as a .gif, force black and whites to stay black and white, and the image comes out superior to a jpg.
I've also come across another odd difference: had a project where I was forced (by customer constraints) to put an image in a table. The composite image had graphic non-image white areas as previously described, so I needed to make one cell hold a small .gif portion of the image, while the larger cell held a continuous tone jpg. Worked fine on every single browser . . .
. . . except Safari for Mac. The .jpg images were completely different in color than the gifs, night and day. Wound up making the whole mess .gifs, and large than it needed to be.
And guess what platform the customer preferred. :-)
However, if you want a scalable animation - and sometimes just a scalable still frame - Flash can trump anything a pixel-based image will be able to accomplish.
any other guides
Not really, I've been looking to write up something that puts a chunk of what I've learned all in one place. If I get around to it, I will post it in our Graphics and Multi-media Forum.
For the most part, I think that Adobe's automated alogrithms are the way to go with jpg and gif today. There is a bit of manual image pre-prep than can help just a bit, but the advantage is usually minimal enough that in a production environment, I don't bother. On an art site, or when creating an important "image" page, then I might.
Quick pre-prep trick for improving jpg compression:
Import the source image into L*a*b color space. This space puts the detail into the L channel and lets the a & b channels hold all the color minformation. You can often blur the daylights out of both the a & b channels without losing any information the eye really needs. This color blurring helps jpg squish things further.
I'm talking about Gaussian Blur of 3 and 4 pixels. Try that on an RGB channel and you'll trash the image. If there are sharply contrasting color edges, you can avoid color bleed by selecting those edges and running a Gaussian Blur on the inverted selection.
Then when you go back to RGB space, jpg compression can do a better job.
If image size is not a big issue for a given image, you can sometimes bring out amazing subtly in an image by first going to L*a*b and working the contrast and sharpening filters on the L channel.
