Optimization
Image quality is important to me. I try to keep images clean when resizing and sometimes, when I find an image I really like, I know better than to use it if it's too small to resize cleanly or if it's of poor quality - ie blurry, pixelated, stretched, distorted.
However, even a good quality picture can turn out not-so quality an icon if you don't utilize image optimization. I find that certain filetypes have specific issues if optimization isn't used. For example, JPEGs tend to dull down vibrant colours, blur text and create fuzzies around objects. Preview
Whereas GIFs tend to become grainy, fuzzy and gradients become distorted. Preview
But optimization can solve some of those issues.
Regularly, when you're done with an icon you might just hit "Save" or "Save As" from the File menu but this can cause distortion in the icon, especially if you hit "Save As" and change the filetype. Instead of doing that try this.
If you want to save your completed icon as a jpg open the "File" menu, go to "Export" and click "JPEG Optimizer." The Optimizer screen will pop up and you'll be on the "Quality" tab where you will see a box to set "Compression Value." The lower the compression the better the quality, but the larger the file size. I almost always leave this set at 1 for icons, however, because a single icon rarely comes close the the file size limit. Preview
You don't need to change any other settings but, if you want, you can click the "Format" tab and change the formats. You'll see animations showing how your file will load for each format and there is a few KB difference in size between them which is usually usually insignificant.
Go ahead and click "Okay" then choose the location and name you want to save your file, then Save. You'll notice text will appear clearer, vibrant colours brighter and there won't be fuzzies around objects and people. Preview
I recommend using JPEGs for almost all of your icons and saving GIFs for icons which are animated. The GIF file type supports less colours than JPEG, even when you use the optimizer. An image can lose colours, quaity and clarity if saved as a GIF.
However, To optimize a GIF open the "File" menu, go to "Export" and click "GIF Optimizer." The Optimizer screen will pop up and you'll be on Transparency tab. You'll notice the GIF and JPEG optimizers do not have many of the same tabs because of the file type and abilities difference. JPEGs do not support transparency. Right now, we don't need to save anything as transparent so we click the check box next to "None." Already we can see, in the preview box, that our GIF image is losing quality. Preview
Since we're not dealing with transparency, we skip that tab and go to colours. You'll see where it asks how many colours you want to use and we always want to use as many colours as possible - 256 - when we're concerned about quality. Below that it asks how much dithering we want. For experimenting, leave this at 0 so you can see how dithering affects your image later on.
You'll also see that the GIF optimizer has 3 different colour selections from which to choose: web safe, Optimized Median Cut and Optimized Octree. Websafe contains the fewest colours, therfore giving us the poorest quality. Optimize Median Cut if intended for very few colours and Optimized Octree attempts to reproduce the original colours of your image. However, our image still has too many colours, even if we select, Optimized Octree. Preview
Now you can play with the dithering. Dithering is a process where pixels are aligned to give the impression that there are more colours in thei mage than there really are. By raising the amount of dithering, the image starts to look a little better but the gradient colours in our background do not look smooth. For this image, it would be a wiser move to save as a JPEG. Preview
Like the JPEG Optimizer, the GIF optimizer has a Format tab where you can choose how the image will load. This format makes a slightly difference in file size but matters more when a slow connection loads your image. The "Download Times" tab simply estimates how long it will take a variety of connections to download your image. Preview
Even though our image is of poor quality we'll go ahead and save it for practice (but don't overwrite the original!). Click "Okay." When the Save box pops up, typed in your desired filename and choose the location you want to save the image, then click "Save." Preview
Go back to the original image and run it through the JPEG Optimizer. Open the "File" menu, go to "Export" and click "JPEG Optimizer." The Optimizer screen will pop up and you'll be on the "Quality" tab where you will see a box to set "Compression Value." Leave it at 1 and click "Okay." Preview
Save your image with the filename and location you desire and take a look at it. As JPEG which supports more colours the gradient colours of the background are smoother and cleaner looking without any choppyness. Preview
Image Compression
Image compression is the same as Optimization but instead of trying to produce the best possible quality, you try to limit the file size. Our second Optimized JPEG is 91KB. Let's say you want to upload it to a site but the limit is 60kb. Open the JPEG Optimizer again through the "File" menu, go to "Export" and click "JPEG Optimizer." The Optimizer screen will pop up and you'll be on the "Quality" tab once more but this time we'll need to have our compression set higher than 1. If you look beneath the "After" preview box you'll see Compressed: and then the number of Bytes our file certainly is. We want that to be lower than 60000. Preview
Start raisng the compression. When the compression is set at 4 the image becomes around 57KB. If you look closely at the preview box, you might see a little bit of quality loss, but not much. Try setting the compression at 20 or 40 and notice the quality loss. Preview
Change the compression back to 4 and click "Okay." Type your filename and choose your desired location before selecting "Save" and your compressed JPEG is saved and ready to upload at our imaginary site. Preview
In Photoshop, image compression and optimization can be acheived by using "Save For Web."
Δ = New
∇ = Updated
Back | Digg this | Post to del.icio.us
