This note explains the most commonly used formats on the web, in which case each and apply what they have comparative advantages images.
Often, we tend to minimize the importance of images in the layout of the website. Or if we think of them, do so only from an aesthetic point of view.
But the images are one of the most important components of a page. Actually, the pictures are what gives weight to the site, in terms of size of the file occupies, measured in kilobytes or megbytes, because what weighs the code, i.e. the logical structure of the site is negligible.
Consequently, the images that we include in our design are crucial to determining the loading times of our website. Formats supported are universally Three: gif, jpeg (or jpg) and png.
Other formats such as bmp or tiff were quickly discarded because of excessive final weight. As the sample values are relative to the resolution, i.e. the number of color dots per inch, but serves as a sample, a graph of 500 pixels by 375 pixels in png format weighs 361 kb. The same file in gif format weighs 54.21 kb six sometimes less, and 69.03 kb jpeg (just a little more than in gif format) format.
The gif images are named after the first letters of its original name: Graphics Interchange Format. The format was created by a company in 1987. The idea was to create a format that reduces the sizes of graphics files which previously were bmp (or bitmaps-hence its name or bitmap), but without sacrificing many colors and image quality.
Gif images become more compressed than the bmp, which it was in a smaller size, to equal benefits. Achieving such a reduction was imposed at a time when most users connections possessed little bandwidth, based on telephone modems, which did not exceed 54 kilobytes per second.
Another advantage of the gifs files is that achieve animated graphics. Nothing spectacular, believe that you will achieve a film with a gif graphic, but you can achieve small animations. A clear example is emoticons, those tiny little icons greeting, or wink an eye. With its limitations, are an interesting movement to achieve a site possibility.
Apply which in each format, and what comparative advantages we have
The jpg files are named, again, as a result of the first letters of Joint Photographic Experts Group. Its popularity began with the era of digital photography, for all digital cameras, or most of them record your photos with this format.
The key feature of this format is that while there is quality loss for example when moving from one format to JPEG-bmp, it can be administered graduate level file compression, making it highly versatile.
The jpeg images are based on the RGB colors (red, green, blue is red, green and blue), so the pictures make their variation of color in varying degrees of these three components. For this reason and excessive loss of quality is reached when the image is enlarged, it is not recommended to work printed texts.
Therefore, graphic designers when they design printed, do not use this format. But for imaging sites, is a format more suitable as good visual quality with low relative weight is achieved.
Finally, the format png (Portable Network Graphics) is the latest development. It has been designed by Adobe, and the basic program to work these graphs is the Fireworks, although there are many others. The quality is very high, but usually a little heavier than a gif or jpeg. However, it is becoming more and more popular because it supports transparency.
That is, you can design a graphic in png format with a transparent background, and thus, when placed on a colored background or dithering, and would not be limited to square or rectangular images. By admitting transparencies, we can design irregular images, and then to place them on the site, the part of non-image file takes no color, i.e. it is transparent. PNG itself is square or rectangular and others, but “cloaking” because we can put whatever we want, in any form, but spaces without drawing take the background color.
When we include a graphic on a website, we must not shrink the size to fit on our page layout as the design. It is best to reduce it with a good editor (such as Photoshop or Fireworks) and give the size and resolution necessary before placing it on the page.
Including images on a web page, we place you the tags (labels) properly, i.e. include image name, description, and alternative.
All these factors contribute to a good indexing of the site and, therefore, in a good position because they are textual elements that are read by the robots of search engines. Good positioning ultimately means more traffic to the site and more potential customers.
For this reason, it put the image name that includes any of the keywords the site, or at least a relevant name to content depicting, avoiding names like “12335.jpeg”, and including something like “printer-deskjet- Epson-RX4500 “.