You are here:Home » HTML/CSS » How to optimize images

How to optimize images

In the last post I discussed about <image> tag and its different attributes .We even made a program in which we used <image> tag to showcase our awesome pic of Eiffel tower in our program. But what an image really? An image is a collection of pixels.
So what is a pixel?
A pixel is the smallest picture element containing information that makes up all digital images.
A pixel is the building block of a digital image and typically a photo contains pixels that are made up from 24-bit pixels. Basically, this means that each pixel can be made up from 8 bits of red, blue and green colour information. The 8 bits from each primary colour is actually 256 individual tones or hues, which can be combined into a pixel that can be any 1 of around 16.7 Million different colours.
When it comes to viewing a photo on your computer screen you are also viewing pixels. Your computer screen is made up of it's own pixels and a typical screen size is 1024 x 768 (786432 pixels) or just under 0.8 Megapixels. A computer screen can usually display either 16 bit or 24 bit colour and as we just mentioned 24 bit is ~16.7M colours. Computer screens generally display at 96dpi (dots per inch)
.
What is an image format?Image file formats are standardized means of organizing and storing digital images. Image files are composed of digital data in one of these formats that can be rasterized for use on a computer display or printer. An image file format may store data in uncompressed, compressed, or vector formats. Once rasterized, an image becomes a grid of pixels, each of which has a number of bits to designate its color equal to the color depth of the device displaying it.

What are image file sizes? Image file size is positively correlated to the number of pixels in an image and the color depth, or bits per pixel, of the image. Images can be compressed in various ways, however. Compression uses an algorithm that stores an exact representation or an approximation of the original image in a smaller number of bytes that can be expanded back to its uncompressed form with a corresponding decompression algorithm. Considering different compressions, it is common for two images of the same number of pixels and color depth to have a very different compressed file size. Considering exactly the same compression, number of pixels, and color depth for two images, different graphical complexity of the original images may also result in very different file sizes after compression due to the nature of compression algorithms. With some compression formats, images that are less complex may result in smaller compressed file sizes. This characteristic sometimes results in a smaller file size for some lossless formats than lossy formats. For example, graphically simple images (i.e. images with large continuous regions like line art or animation sequences) may be losslessly compressed into a GIF or PNG format and result in a smaller file size than a lossy JPEG format.

So what are image compressions?
There are two types of image file compression algorithms: lossless and lossy.
Lossless compression algorithms reduce file size while preserving a perfect copy of the original uncompressed image. Lossless compression generally, but not exclusively, results in larger files than lossy compression. Lossless compression should be used to avoid accumulating stages of re-compression when editing images.
Lossy compression algorithms preserve a representation of the original uncompressed image that may appear to be a perfect copy, but it is not a perfect copy. Often lossy compression is able to achieve smaller file sizes than lossless compression. Most lossy compression algorithms allow for variable compression that trades image quality for file size.

What are different image file formats supported by major browsers? I will give the description of all the image file formats in a plain simple trying to be as uncomplicated as possible.\

JPEG(Joint Photographic Experts Group) = The JPEG or jpg file format is a very popular image file format because it uses a lot less hard drive space then other formats, but it does have limitations. The JPEG format compresses the picture every time it is saved and that means the file size and picture quality are reduced every time it is saved. There is nothing that you can do to stop picture compression in the JPG or jpg format. If you are interested in maintaining a pictures quality at the highest level, you do not want to use .jpg or .JPG. While other formats have better text quality, JPG/jpg does work well enough in many cases. It is Internet compatible. The average JPEG pictures is about 1.0 mega bites (1943x1702 24-bit RGB color image). jpeg is a lossy compression(in most cases).
GIF(Graphics Interchange Format) = GIF is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects. It also uses a lossless compression that is more effective when large areas have a single color, and ineffective for detailed images or dithered images.
PNG(Portable Network Graphics) = The PNG  file format was created as the free, open-source successor to GIF. The PNG file format supports 8 bit paletted images (with optional transparency for all palette colors) and 24 bit truecolor (16 million colors) or 48 bit truecolor with and without alpha channel - while GIF supports only 256 colors and a single transparent color. Compared to JPEG, PNG excels when the image has large, uniformly colored areas. Thus lossless PNG format is best suited for pictures still under edition - and the lossy formats, like JPEG, are best for the final distribution of photographic images, because in this case JPG files are usually smaller than PNG files. The Adam7-interlacing allows an early preview, even when only a small percentage of the image data has been transmitted. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. PNG is designed to work well in online viewing applications like web browsers so it is fully streamable with a progressive display option. PNG is robust, providing both full file integrity checking and simple detection of common transmission errors. Also, PNG can store gamma and chromaticity data for improved color matching on heterogeneous platforms. Some programs do not handle PNG gamma correctly, which can cause the images to be saved or displayed darker than they should be. Animated formats derived from PNG are MNG and APNG. The latter is supported by Mozilla Firefox and Opera and is backwards compatible with PNG.
TIFF(Tagged Image File Format) = The TIFF image format uses a huge amount of disk space. A typical TIFF picture uses about 6MB to 18MB. TIFF pictures will fill your hard drive very quickly but your pictures will be and stay at an extremely high quality. The TIFF format is well known to support a number of compression types. You can create a TIFF without compression or with something like LZW or CCITT G4. This format is great for the images that you are saving for history's sake, old family pictures, etc.. Large, non-streaming, files may not be suitable for the Internet, but suitable is one thing compatible is another thing. TIFF files are Internet compatible. There are a number of TIFF plug ins to different web browser; these can easily be found on the net using google. They may or may not support the same compression types or TIFF variants... but still, if you look around carefully you are bound to find something that will do the job. The average TIFF pictures is about 9.9 mega bites (1943x1702 24-bit RGB color image).
RAW = The RAW image format is exactly what it says. It is the raw image recorded directly from the cameras image sensor with no adjustments or corrections. It is ready to be adjusted and edited on your computer. Most people don't want to do that for every picture they take. This format is aimed at the professional photographer who wants the absolute best quality from every picture and is willing to work on each and every picture. Every camera manufacturer has their own version of RAW. It is not Internet compatible.

Let's see the difference between major file formats through an example because a picture is worth thousand words:
example image

Let's take a look at pros and cons of all major image file formats through an example:
image formats
That's was all for this post. In the next post I will discuss about fonts and why they are important in making a great web page.

0 comments:

Post a Comment