Presented here are overviews, examples and links to tutorials covering many of the technologies involved in web development and design.
RESOURCES - IMAGE OPTIMIZATION/MANIPULATION:
Images can be aesthetic or useful, eye-candy or navigational aids. They can communicate a concept or evoke an emotion. Visually, they can be simple or complex.
The Tech Stuff
The two things all images have in common is that A) they all display at 72 x 72 pixels per square inch and B) pixels take time to load.
Image compression is the process of taking an image and removing as much useless information as possible to reduce the size of the file that gets processed by the browser.
When a photograph is scanned to create a digital image for use on the Web, it is divided up into rows and columns containing data called pixels. Computers "see" in terms of vertical columns and horizontal rows. They can't really display a curve, because it isn't truly either a vertical column or a horizontal row. What we see as a curve is actually a series of pixels, of varying levels of intensity and hue, that the computer arranges in such a way as to create the illusion. The more variants in color, contrast and brightness the computer has to work with, the more effective the illusion of a curve will be.
The same process is used to create blends or gradients, areas where the shading changes from light to dark or from one color to another. The process is known as "dithering."
So What Do I Care?
No matter what kind of images your site uses, onr thing they can't be is large in file-size because that makes them slow loading. The load-time for a page is the sum of all the images and HTML on it (HTML is usually only a small fraction). Just because an image has a physically large appearance does not mean it has to have a big "footprint" (download time). That is exactly what compression is all about.
To reduce the size of the image's file, the key is to remove as many unnecessary pixels as possible, while still maintaining the image's integrity (color, shape, shading, blends and gradients). Some of the shades or colors in the image may be too subtle for the human eye to notice or too indistinct for the average computer monitor, at the default settings, to display. These are useless pixels and can be removed without any noticeable harm to the image.
For those interested in learning the more about image optimization: