web graphic optimization lpnabc logo

Digital Graphic Optimization Techniques

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!

Thanks For Sharing!Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin