Putting images onto the world wide websites is not as simple as taking the photograph and placing it on the website. Images need to be compressed to make it load fast that means your visitors do not have to wait on the images loading
There are two kinds of image compression, lossy and lossless.
Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original. However, this will only be visible at a closer look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image.
When you decompress a lossless image, you will get exactly the same image as the original. This compression uses greater amount of memory, so at times it may not be good for web.
JPEG is a format name and is a lossy compression, .jpg is the extension for it. This image type is lossy, and you can control the compression level in image editors.
It is good for saving images with millions of colours, like photographs, drawings with many shades, images containing gradients etc.
The top images is Jpeg and it's size is 15.6 Kilo Bytes To see what is meant download this image and make it bigger and you will see it pixellate. Less than a second to load
GIF This format is a bitmap, which means it's a grid made of tiny pixel squares. Data about every pixel is saved (so it's lossless), and you can save up to 256 colours. Pixels may also be transparent.
GIF may contain more than one frame, so it can be animated. (Not Recommended)
Since image programs can control the exact number or colours stored in a particular image, it is a good format for saving images with less colours, like charts, small graphics (bullets, website buttons), images containing text and other important details, flat-color drawings etc.
The centre image is a GIF Image and it size is 25.2 Kilo Bytes it has 256 colours. The image can be downloaded and make it bigger and it will not pixellate. Less than a second to load
PNG 8 This format was created to become the new and improved GIF, because GIF was patented, and thus not free. PNG has greater color-depth than GIF, it can store partial transparency, and can achieve greater compression. The third image is PNG 8 and it's size is 19.9 Kilo Bytes it has 256 colours. The image can be downloaded and make it bigger and it will not pixellate. Less than a second to load
The original image size of all images are 3488 pixels by 2616 Pixels and is 2.181 Kilo bytes, and was taken by Iain Tait Web Design at Alton Towers 2012.
PNG 24 and PNG 32 The fourth Image is PNG 24
It's best to save images in this format when it's both needed to preserve transparency and large amount of colours, or partial transparency. Since it's a lossless format, these
images are often not small enough for displaying on the web. but as the web gets faster more and more of the images will appear. This image is 62.7 Kilo Bytes, this image can be enlarged bigger than Gif or PNG 8 after downloading. One second to load
A graphic image can also be created using editing software such Photoshop, Fireworks, Illustrator, Gimp three dimensional images can also be created for the Web with editing programs such as Blender or Maya.
More photoshop tutorial will be added when time allows