Things about Web Images I Just Learned | Hacker News Reader

Things about Web Images I Just Learned

gabrielweinberg.com

154 pointsepi0Bauqu19 comments

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!

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

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!

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.

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

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

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.

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

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.

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

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'

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.

PNGOUT (http://advsys.net/ken/utils.htm#pngout) and PNGCRUSH (http://pmt.sourceforge.net/pngcrush/) are similar utilities that can compress PNG files even further.

The idea is that you do all your invasive stuff (like reduce colors etc.) in Save for Web in Photoshop (or similar) and then let one of the two programs do its job, which will visually not alter the image.

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?

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.

This is a bit off topic, but am I the only one who thinks yahoo could have picked a better name for that service? :-D I can see why they might try to emphasize the "dot" in the smush.it logo (for separation of the last four letters). But having the "it" in the logo be brown, as well as the brownish background on the main page doesn't help. Part of me hopes that someone just really wasn't thinking, and the other part says they are doing this on purpose. I wonder which part is correct. If it is the latter, color me unimpressed.

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

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?

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 :)

Reply on news.ycombinator.com