Several file-types are used for web graphic optimization. Each of these file-types (.jpg or .gif for example) has a different way of compressing the graphical data.
Tiff type files are non-lossy, they do not compress the graphical-data in any drastic way. Non-lossy or lossless-compression is seldom used in web design because the un-compressed images take too long to download. While file-compression causes some data to be lost compressed-graphics are smaller and transfer more quickly from a remote-server to the local-machine.
Optimized Web Graphic File-Types
For graphics where you have many colors and shades, try using jpegs. When .jpg files are compressed file-size is reduced by blending nearby colors together. Highly compressed jpg files often look blurry.
When a file is saved as a gif, the image is compressed by limiting the color palette (sum-total of all colors) that it uses. A highly compressed gif file will look pixelated and have as few as two colors. Gif-files support transparency & multiple frames (used for animation).
png8-bit files function very much like .gif files only via a different algorithm. png24-bit files support gradient transparency or ‘translucence’. png24-files have a larger file-size to dimension ratio than .gif, .jpg, and .png-8bit files; however, they are very versatile. png24-bit graphics are great for image-sprites and background-gradients. If a png24 is too large, consider a .jpg with a color-matched background.
Transparency Tips for Web Graphic Optimization
To keep your transparencies looking great: Manually adjust which of the 256 colors appear as transparent when you export a gif or png8-bit file. png24-bit files are simpler, make sure to have a transparent stage / artboard / canvas when saving and your translucence should be preserved. Oddities can often arise when saving transparent gifs due to dither and compression-mode. Practice will make perfect when you work with transparency and optimized web graphics.
Using a contrasting background color similar to how a green/blue-screen is used in video editing can help you to manually adjust which colors to make transparent in the optimized-graphic more accurately. A contrasting color in the background before saving can also help distinguish which areas are to be transparent and avoid noise from anti-aliasing.
Use a color that is not being used in the main image when using a contrasting background to render transparencies to avoid poking-holes in graphic-elements which should be opaque.
Are you taking up extra space with redundancy?
Using transparency in web-graphic, will not only make a site load quicker but will offer flexibility when using that graphic in later projects.
- Why have wide gradient images when you can have a single 1px-wide gradient image and use your css styling to tile the 1px-wide image infinitely.
- Why bother with a bunch of black-pixels in the background of your gif/png image when the image is over an area with a black background-color?
Consider your options wisely before exporting graphics. As more users browse from wireless networks instead of LAN-lines light files and efficient web graphic optimization are as important as ever.
Every little bit counts!