Thumbnail output file size questions

[tqisjim]

Although generating thumbnails is probably a common operation with ImageMagick. I apparently don't know what I'm doing. My outputs are 80x80 thumbnails of jpg photos. With a simple Crop+Scale operation, the output thumbnails vary between 38K - 44K.

Even a dummy like me can figure out that a lossless bitmap is 80*80*3 or 18.8K. But I understand that JPG's are not effective for small images. So I started experimenting. After a few hours, the 18.8 BMP remains the smallest output file I can create using ImageMagick.

Questions and observations:
1. Is BMP a safe format for web browsers? (OK a little off-topic)
2. Are there any formats that consist of compressed BMP?
3. The GIF outputs are about 20K. I would've estimated 7.4K: 80*80+1K
4. Anyways, ImageMagick's GIF conversions look terrible.
5. I thought PNG was the magic bullet. The default compression outputs 30K, which I couldn't improve upon.
6. I played with the type => Palette which neither reduces file size nor improves the GIF output.
7. I tried using JPG with different quality settings. Low quality outputs look really terrible, but the output
size does not seem to change much.

I'm a little embarrassed because thumbnail conversion seems so fundamental. If I'm particularly ignorant, can anyone recommend a good tutorial?

-Jim

[snibgo]

A jpeg or png of 80x80 pixels should be, as you say, less than 18k bytes. Can you post the exact command you are using, and an example output (EDIT: and corresponding input)?

I would never use BMP for web. Yes, there are compressed BMP formats, but I'm not sure how well they are supported. JPEG or PNG is generally best.

Photos (and even many non-photos) generally compress better in jpg than png.

[Bonzo]

If you are using -resize add a -strip which will remove the EXIF data and any colour profile. You can try -thumbnail but depending on your version -thumbnail will stip everything automaticaly or everything apart from the colour profile.

Most web browsers do not support bmp images

You could add some sharpen to your thumbnails:

Code: Select all

convert input.jpg -auto-orient -thumbnail 80x80 -unsharp 1.5x1+0.7+0.02 -quality 80 output.jpg

[tqisjim]

Thanks. As soon as I stripped the color profiles, everything works as expected.

[tqisjim]

Based on my experience from last month, I changed most of my scripts to use the Thumbnail method instead of the Scale method. Today I got a call from a distraught user, so I am revisiting this discussion.

Here are two links:

http://www.tqis.com/tqis/oa/misc/_imscript.img
http://www.tqis.com/tqis/oa/misc/_imscriptstrip.img

Please view both links using Firefox (or IE) and Safari. Here is the script using PerlMagick:

$i = new Image::Magick ;
$i->Read( defaultdocs( 'oa/misc/meijerlogo.jpg' ) ) ;
# $i->Strip() ;
print $i->ImageToBlob() ;

The difference between the two scripts is the commented Strip method. I concluded that Safari utilizes the color tables for rendering. Can anyone else shed some light?

[snibgo]

Some browsers respect colour profiles, while others (notably IE) don't. I would expect them to move in the direction of respecting profiles.

For browsers and other software that displays images while respecting profiles, if you simply strip the profile, you can expect the image to look different. Most (EDIT: all?) display software that ignores profiles will assume sRGB.

So, for images with embedded profiles that you want to put on the web, it is generally best to convert to sRGB. Then you can safely strip the profile.

Code: Select all

convert _imscript.img.jpg -profile sRGB.icm +strip _imstripped.jpg

I don't know how to do this in Perl.

Beware of doing lots of conversions with lossy JPG. You might prefer to do all processing with PNG, with only the final conversion to JPG.

[snibgo]

FYI: I recently surveyed which browsers and other programs respected ICC colour profiles, and put a table of results on http://www.snibgo.org/improf.htm

[Bonzo]

Interesting results Alan.

I have multiple browsers and your different colour spaces come up as:

IE8: Full colour - green, pink and white - green, pink and white - gray - red - missing image ! - bright full colour.

Firefox 3.6.3: Full colour - Full colour - green, pink and white - gray - red - Full colour - bright full colour.

Chrome 6.0.4: Full colour - green, pink and white - green, pink and white - gray - red - Full colour - bright full colour.

Safari 4.0.5: Full colour - Full colour - green, pink and white - gray - red - Dark blue - bright full colour.

[snibgo]

Thanks, Anthony.

As you note, different software displays non-sRGB images differently, sometimes bizarely.

[tqisjim]

Hello.

I'm trying to replicate your command line technique. FWIW, _imscript.img is the name of the script. The original source image is
meijerlogo.jpg. Based on your recommendation, I typed in the following:

$ convert meijerlogo.jpg -profile sRGB.icm foobar.jpg
convert: delegate library support not built-in `meijerlogo.jpg' (LCMS) @ profile.c/ProfileImage/807.

Separate problem?

[snibgo]

Yes, that's a separate problem. See http://www.imagemagick.org/script/binary-releases.php for installing binary relases, or a related page for building from source.

[tqisjim]

FWIW, I found the following link:

http://www.imagemagick.org/Usage/formats/#profiles

Within that description, I saw the following caveat:

If there is no embedded profile then the first "-profile" is the input profile. A second "-profile" then defines the output profile.

I'm guessing this is causing the error in my previous post, although the "delegate library support" error message is too cryptic for a layperson like myself.

It seems like the following gave the results I'm looking for:

$ convert meijerlogo.jpg -colorspace rgb -strip foobar.jpg

The resulting image is available here:

http://www.tqis.com/tqis/oa/misc/foobar.jpg

Hopefully, the -colorspace command solves the problem. But if I misunderstood the previous posts, I would still like some clarification.

[snibgo]

It's looking for the LCMS ("Little Color Management System", I think) delegate. (A delegate is a program that ImageMagick calls to do some work.) Without that, the "-profile sRGB.icm" won't work.

Changing colorspace to RGB will do an approximate conversion, which might satisfy your users. For a more accurate conversion, you should install LCMS and use "-profile sRGB.icm".

[tqisjim]

Indeed: http://www.littlecms.com/

Going back to the browser discussion. I just realized that Firefox renders the full size image differently from Safari. After performing the profile conversion, the color rendering is nearly identical. So performing this conversion on a CMYK image not only reduces the image file size by 75%, it also resolves a rendering bug in Firefox and other browsers?

Probably that's what you were saying in the first place.

[snibgo]

By default, Firefox ignores ICC v2 and V4 profiles, but you can turn them on for v2, and it will then render identically (as far as I can see) to Safari.

Ignoring profiles isn't a bug, it's the way that most browsers are designed.

Organisations that use logos generally distribute them in various digital forms, including profile-free for the web. Ideally, you should use one of those, instead of converting.