XML Feeds
Link: http://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29
Sprites allow you to combine many images into a single file, reducing both the number of requests and bandwidth required to deliver pages.
I had 51 images, each was about 10K, so the total was about 510K.
These images had dimensions of about 250px width and 125px height.
I wanted to combine them all into a single image, and generate the CSS to compute the offsets into the sprite.
Code:
#!/bin/bash | |
| |
# Remove the prior appended image | |
rm appended.jpg | |
| |
# Create a list of all the original jpg files | |
ls *.jpg > jpg_files | |
| |
# Resize all the images to ensure they have the same height and width | |
for f in $(cat jpg_files); do | |
convert "$f" -resize 250x125! +repage "$f"; | |
done | |
| |
# Break the list into rows of 10 images | |
split -l 10 jpg_files jpg_row. | |
| |
# Generate the ImageMagick command to append the images into rows | |
c=convert | |
for f in $(ls jpg_row.*); do | |
h=`cat "$f" | tr '\n' ' '` | |
c="$c"' ( '"$h"' +append ) ' | |
done | |
# Combine the rows into the appended image, reduce the quality to save space | |
c="$c"' -background transparent -append -quality 70 appended.jpg' | |
`$c` | |
| |
echo '.tag{height:125px;width:250px;overflow:hidden;background-color:transparent;background-image:url("appended.jpg");}' > ap.css | |
| |
# Generate the CSS | |
r=0 | |
for f in $(ls jpg_row.*); do | |
c=0 | |
for g in $(cut -f 1 -d '.' "$f"); do | |
echo ."$g"'{background-position:-'$((c*250))'px -'$((r*125))'px;}' >> ap.css | |
c=$((c+1)) | |
done | |
r=$((r+1)) | |
done |
The final image was about 260K, still large, but the quality is good. Compressed for transfer, this image will serve well.
This code isn’t generalized, if you would like to use it, you’ll need to adjust the image dimensions and the number used to calculate the offsets.
Permalink