Posted on : 04-04-2010 | By : Andy | In : tech
- Compression typically looks for patterns and stores references to them. So, imagine you’re storing the following text which is 151 characters long:
He went to the store. She bought a car. He went to the bank. She bought a plane. He bought a turtle.
- To compress that, you might replace repeating patterns with a number. Our new text can be stored with references and a “key”, and now it’s 135 characters long:
\1 store. Sh\2 car. \1 bank. Sh\2 plane. H\2 turtle.[1=He went to the, 2=e bought a]
- When uncompressing the data, you replace the numbers with those patterns again:
He went to the store. She bought a car. He went to thebank. She bought a plane. He bought a turtle.
- Every time a repeating chunk of data shows up, you just store a reference to the original definition, which is shorter and thus saves space. (In this case, it saves you a total of 16 characters, or 10%.) Compression is actually a bit more mathematically complex than this, but that’s the basic concept. What’s important to know is that the more repeated strings you find, the more savings you get.
- .jpg files use something called “lossy” compression, which means that in order to find more repeated strings it will smooth out some of the data. (For music, .mp3 files also use “lossy” compression)
- Imagine the string 123456123456123456124456 If you used our old method, you’d only save 2 characters, or 8%:
- If you could afford to change one number in the last set (4>3) you would then have the same pattern repeated four times, making compression more efficient (6 characters, 25%). However, you would lose 4% of the data (1 character out of 24.)
- As you can see, the more data you’re willing to lose, the more you can artificially create repeating patterns, and the more space you can save.
How much compression to use?
- When you’re saving a .jpg, you set the compression level to tell the computer how much of the file you’re willing to “lose” in order to get smaller file sizes. The lower the number, the more data you lose. If you look at highly-compressed .jpg images you’ll see blotchy places called “compression artifacts” that are the result of the computer changing data in the file to make it match patterns better.
- For most web design, I typically set compression at 79 or 80. For smaller thumbnails where compression artifacts are less visible, I’ll often drop down to 75 to save more space. Any higher than 80 and your images get really big really fast for little quality difference. Any lower than 75 and images start to look really bad.
- Important: Recompressing images might amplify the effect. Let’s say you compress an image at 80, and lose 20% of the data in the file. If you open the image again, make a small change, and recompress it again at 80, you might lose up to 20% again, leaving you with 64% of your original file. Ouch! When editing images, you should always start from an uncompressed, high-resolution image file if at all possible.
Other file formats
- Sometimes, different types of compression save more space with less quality loss.
- JPEG: best for images with lots of complexity and colors. Usually photos are best compressed as .jpg files.
- PNG 8: images with text, straight lines, and few different colors. Graphic design elements are often best compressed as PNG 8 files.
- GIF: similar to PNG 8, except not as efficient in most cases. Usually, unless .png files are not supported, you should save images as PNG 8 instead of .gif
- There are other image formats, but these are the most common. .gif files support simple transparencies, and PNG 8 and PNG 32 can handle more complex transparencies.
How to do in Fireworks
- In Fireworks, use the “Optimize” panel to set the compression TYPE and Settings (screenshot). For .jpg files, usually all you want to adjust is the “Quality” setting: again, for web you will usually set it at around 75 for thumbnails and 79 for other site images.
- When you have this set, use the File > Export command. This will save the file with your selected compression setting AND it will use minimal metadata, which can also bloat the size of your files. If you use “Save As…” it will save all your meta data and might mess up your compression settings.
- Also in Fireworks, click the 4-Up button near the top of your editor. This will show you how the image will actually look once it’s been exported.
- Click on each box and set different compression settings in each one. This was you can compare what each setting would look like as well as what the final image size will be. You can often make a better decision based on this. (screenshot)