[magick-users] png size (again)

[Carl Karsten]

I am making images for a web site, and silly me thought it would be a good idea 
to use transparency so the image could have a nice shadow. I didn't realize the 
ramifications of this choice until today.  But here I am, and no one will die, 
so I am going to try to make the best of it.

I skimmed the archives, read over
http://imagemagick.org/Usage/formats/#png_quality, installed pngcrush and 
optipng, saw the note about pngnq and semi-transparent which scared me away.

I have been trying this and that for a few hours, currently am using convert ... 
-quality 90 foo.png; optipng foo.png

And yet, my images are still 500k to 2mb, and I have about 20 of them, which 
means someone surfing my site will have to dl about 20mb of images.

I have not yet started experimenting with things "recommended for small 
thumbnail images" but will go down that path as soon as I post this.

What I am hoping for is someone can take a look at the types of images I am 
working with and give me some "I would use theses options" advice.  I made a 
page that is just the images, each image being a link to it's master image.

http://www.chicagomidwestwineshow.com/imgwork/headers/

Below is the script of convert commands I use.

Carl

ps, if you have looked over the page of pictures, you probably get the theme: 
wine.  I need 5 more.  If anyone has anything I can use on a commercial site, 
and you or your friends are in Chicago, I can offer up tickets to the event.

Anthony, if you can make it over here, you have more than earned your admission :)

# mkhead.sh
# takes one input file, makes one header

# find /home/juser/wineshow/static/img/flkr/cropped/ \( -iname "*.jpg" -or 
-iname "*.png" \) -exec /home/juser/wineshow/imgwork/converts/mkhead.sh {} \;

set -ex

COLOR="#84815b"
# LOGO=../../static/img/logos/08WineShowLogo.gif
LOGO=/home/juser/wineshow/static/img/logos/08WineShowLogo.gif

CROPPED=$(basename $1)
EXT=png
FINAL=${CROPPED%.*}.$EXT

# get the source file
cp $1 $CROPPED

# make a green box, left side rounded corners
if [ ! -f header1.png ]; then
convert -size 200x165 xc:$COLOR \
     xc:none -fill $COLOR \
             -draw 'roundRectangle 0,0 415,165 20,20' \
             logo: -compose SrcIn -composite \
	header1.png
# display header1.png
fi

# make a transparent logo
if [ ! -f 08WineShowLogo_a.png ]; then
# convert 08WineShowLogo.eps -trim +repage 08WineShowLogo.png
convert $LOGO -transparent white -resize 1000x150 08WineShowLogo_a.png
fi

# make a green->transparent gradiant that will be overlayed onto the 'wine pic'
if [ ! -f header2.png ]; then
   convert -size 165x600 gradient:$COLOR-none -rotate -90 header2.png
# display header2.png
fi

# put the gradiant on top of the image
convert $CROPPED \
	-scale x165 \
	header2.png  -composite \
	header3.png
# display header3.png

# add the 2 halfs together
# add logo.
convert header1.png header3.png +append \
	08WineShowLogo_a.png -geometry  +25+5  -composite \
	header4.png
# display header4.png

# add a shaddow around the whole thing
convert header4.png \( +clone  -background black  -shadow 80x3+5+5 \) +swap \
           -background none -flatten  \
	-quality 90 \
	header5.$EXT

ls -sh header5.$EXT
# display header5.$EXT

# copy the file to it's final home
cp header5.png /home/juser/wineshow/static/img/flkr/final/$FINAL
optipng /home/juser/wineshow/static/img/flkr/final/$FINAL