
Things about Web Images I Just Learned - epi0Bauqu
http://www.gabrielweinberg.com/blog/2009/06/things-about-web-images-i-just-learned.html
======
aarongough
A few other real points of pain that I learnt while implementing dome dynamic
resizing code in Rails recently:

* IE will _not_ display JPEG images that have some types of embedded meta-data. This includes previews, which a lot of editing programs do include.

* IE and Safari both freak out on JPEG images that are in the CMYK colorspace. Conversion to RGB and removal of color profiles will fix this problem.

These are generally not big a deal when you're creating images yourself, but
whenever you're accepting user-generated images these points could really bite
you. I know they caused me a lot of pain!

Hope this saves someone at some point!

~~~
jonknee
"IE and Safari both freak out on JPEG images that are in the CMYK colorspace.
Conversion to RGB and removal of color profiles will fix this problem. "

I've had trouble with IE and FireFox and CMYK, Safari works fine. At least on
Macs, I haven't tried Safari for Windows.

~~~
aarongough
Hmm, I didn't have any problem with FireFox but in my case Safari was causing
problems! Perhaps it was something to do with the inclusion/lack of color
profiles in the JPEG?

My policy now is that any user-supplied image is stripped of all meta-data and
converted to the RGB colorspace. Since I've started doing that I haven't had a
single issue!

------
zepolen
My input: _Never update images, ever._

Apart from the fact that web browsers are notorious for over eagerly caching
images no matter what http headers are specified, you have no control over
external http proxies and their versions of your images.

So never allow someone to update an image, only allow delete and create
actions, using a fresh new url each time.

------
robotrout
img{-ms-interpolation-mode:bicubic} This is why I read HN! One line of code to
fix one of my sites!

~~~
epi0Bauqu
Unfortunately, it still doesn't work for IE6, on which you need to use the
good ol' AlphaImageLoader (sizingMethod='scale') if you want to support that
browser: <http://msdn.microsoft.com/en-us/library/ms532969.aspx>

------
justin_vanw
Things I have learned:

optipng: png files are often not optimally small, even for what can be done by
an automated process. Run optipng on the png's on your site, you'll be
suprised.

example (compare before and after idat sizes): find /usr/share/gnome -iname
_.png -print0|xargs -0 optipng -o7 -simulate

advancecomp: a zlib implementation that tries harder to compress, but with
output that is still totally compatible.

use like: advpng -z -4 $file

advpng should only be used _after* optipng, since optipng won't want to save
the file if it is larger, even if the idat is smaller. since optipng can only
use the regular zlib, the smallest files come from optimizing the idat, then
optimizing the compression.

Just going through a regular debian desktop install, you will see png files
that shrink over by over 90%. This is, of course, a lossless operation.

~~~
woadwarrior01
How does this compare to pngcrush ? I run pngcrush with "-rem alla -reduce
-brute" flags.

~~~
justin_vanw
I don't know. I think optipng is basically optimal for what it does. If you
use the -o7 flag, I believe it uses every available combination of settings
that a png file can have, as well as using the minimal color space.

However, what would be really cool is something which would dither down, based
on some of the research that is going on in that field. I saw a java applet
once that could dither almost anything to 256 colors with barely any
noticeable degradation. For something like the iphone, or any other memory
limited/bandwidth limited device this would be awesome.

------
aditya
+1 on CSS sprites, definitely one of the biggest wins in terms of faster page
loads and reducing connections to your webservers.

------
seshagiric
To add to the list: \- always try to serve images at the size they are drawn
\- see if background images with just solid color, can be replaced by
background 'color'

------
callmeed
Smushit looks cool, but I've never really had a problem optimizing images with
Photoshop. You have a lot of fine-grained control over compression and file
size. If you discard the profile properly when doing a save for web, I'm not
sure how it "doesn't fully optimize" images.

As for PNG files, I'd rather have the transparency and ability to tinker with
different backgrounds than have to re-export a set of icons every time.

~~~
epi0Bauqu
Sure, I might not have used the proper settings, though generally I've clicked
around all the setting until the lowest file size appears at the bottom
(without losing image quality).

If you don't mind me asking (out of curiosity), if you run smush.it on one of
your optimized pages, do you get any reduction?

~~~
rossriley
I've just tried it on a few of mine and had zero savings. So I'm not sure what
it is doing that is different to Photoshop.

------
dc2k08
If anyone has Adobe FireWorks, you can dramatically compress an image using
their save facility too. That's really all I open it for.

------
cousin_it
Love your new UI for selecting the search mode, so smooth and obvious. Except
the icon for "Mostly Info Sites" didn't ring intuitive to me - it wasn't even
immediately clear that those three things are books. I'm not really in a
position to make suggestions because your project is so awesome, but... maybe
use an open book instead?

~~~
epi0Bauqu
Thanks! We looked at some book icons (including open books). We were afraid it
might get confused with book search. Also, I liked the idea that multiple
books might convey different types of encyclopedic knowledge. That is, it
covers more than one subject. But if people don't get they are books, that is
not good :)

