Which image formats are best for the web used by App Development Company in Birmingham

Images are a fundamental part of any website. But when working with them, the necessary balance between their quality and the size of their discharge must be taken into account. A website with high quality images will consume a lot of bandwidth and will be slow to render in browsers, which can penalize the behavior: users will leave the website if it takes too long to show.

 

Therefore, it is necessary to know the different formats of images that can be used in a web and to know in which occasions to choose one or the other. The most commonly used formats by App Development Company in Birmingham are three: JPG or JPEG, GIF and PNG. All three are bitmap image formats, that is, they represent an image by encoding the color values ​​and the transparency of each pixel as opposed to vector formats (such as SVG) that store lines, points, and polygons To create the image.

 

The great advantage of bitmap formats is that they allow for a great compression of information, resulting in lightweight files. However, when zoomed in, the image may become distorted or blurred, with the pixels being appreciated. Therefore, knowing how to optimize images so they look good and have little byte size is a job that requires care and knowledge.

 

A bitmap image is just a grid with two pixel dimensions (high and wide). As an example, an image of 200 x 200 pixels has a total of 40,000 pixels, each of which will have an RGBA value (Red, Green, Blue, Alpha Channel or Transparency) and this information will occupy a total of 4 bytes 32 bits) per pixel. So an image of 200 x 200, without any optimization or understanding, will have a size of 160,000 bytes = 156 Kbytes. You can easily see that this size is too large for web standards in a small image. That is why image formats that compress the information are used by Web Design Company in Birmingham.

 

Then the three image formats will be described and then give a series of guidelines on when to use each one. Finally, we'll see how we can optimize images using image editing software like Adobe Photoshop or GIMP.

 

JPG or JPEG (Joint Photographics Experts Group)

 

The images usually have .jpg or .jpeg extension and it is the most used format currently. It is a lossy or lossy compression algorithm (which does not allow the reconstruction of the original from the compressed file), which is based on the fact that the human eye better captures the changes in brightness than those of color and that better perceives these changes in zones Of homogeneous color that in the edges of the objects of the image. The mathematical algorithm on which it is based removes all information not essential to the human eye.

 

JPG dedicates, in principle, 24 bits to each pixel to store its information, with which it can work with more than 16 million different colors. But when applying the understanding, we can choose a series of parameters to control the conversion as the degree of compression, which is indicated with a percentage. As a rule it is considered that 80% is a high quality image, 50% of medium quality and 10% of low quality. In the web it is common to work with values ​​between 70 and 80%.

 

In addition, JPG allows to save the images in progressive mode, that is, the image is loaded in several phases, an option of interest when working with slow connections, but produces somewhat heavier files. It is also possible to smooth the image to avoid too pixilated edges, although this usually causes blurring of the whole image.

 

JPG format is recommended for working with images with thousands or millions of colors: photographs, gradient images ... But it is not suitable for images with text, simple shapes or containing large monochrome blocks because it generates noise-filled edges. In addition, a JPEG image can not support transparency.

 

Graphic Interchange Format (GIF)

 

It was the first image format used on the Web by SEO Company in Birmingham, as it was created by thinking precisely of a method of compressing images to be shared in computer networks. The images have a .gif extension.

 

Unlike JPEG, GIF is a lossless compression format, that is, it allows reconstruction of the original because it stores the color and transparency information of each pixel and does not distort the image. However, it only works with 8 bits for each pixel, which allows to have only 256 different colors. Faced with this color limitation, GIF uses a number of dithering methods to simulate colors that do not exist within the limited color palette that GIF has available.

 

But GIF has a feature that makes it unique within these three image formats: it allows to be animated. A GIF can have multiple images or frames that are painted in different periods of time by simulating a video. For that reason, its use is currently increasing on the Web. It is also possible to make images with transparent background although in a somewhat limited implementation, since it can only have two values: all pixels are transparent or opaque, you can not specify a transparency value for each of them.

 

When you create a GIF with an image editor, you can also choose two additional features. Although it has been said that, by default, GIF uses 256 colors, it is possible to vary this color palette and define that it uses 32, 16 or 8 colors only, achieving even smaller image sizes. You can also create an interlaced GIF that allows slow devices to load an image that is built gradually on the screen without waiting for it to be painted line by line.

 

GIF is ideal for creating limited color images such as icons, buttons, text-in-picture and, above all, for simple graphic animations.