Este post también está disponible en: Spanish

Images have weight on Internet, and here I mean their importance as a visual element, as well as the number of kilobytes consumed.

All photographs, logos or graphics on our pages should have adequate dimensions -width and height-, be placed in the right position and, primarily, have a proper file size.

In printed media is vital that a photograph has the highest quality. But online, what matters is to achieve an ideal compression, reducing enough the quality of the image.

A site with heavy images takes too long to open and the only thing that tests is the patience of users.

There are three basic standard formats for photos or images on the Internet: JPG, GIF and PNG.

In Photoshop the command “Save for Web …” opens the options to define the format in which we want to save our image once it is cropped and ready.

In the same window we see options for achieving the right balance between quality and file size of the image.

In retoNet our favorite format for photographs is PNG-24 (Portable Network Graphics) because its compression maintain good image quality and transparency effects work without problem. One drawback is that only modern browsers support this format.

GIF (Graphics Interchange Format) is the ideal format for illustrations or logos. It displays a maximum of 256 colors, and therefore it is not good for photographic images. It preserves well the transparency of images, but without the quality of PNG.

JPG or JPEG (Joint Photographic Experts Group) is the most common format for handling digital photographs. Their level of compression discards image data selectively, although it is not useful for transparent images.

In Sitepoint, Irish designer Jennifer Farley, gives visual examples of each format.

In each format, you can choose the level of compression / quality loss you want. The higher the quality, the heavier is the image. The key is to reduce the quality at reasonable levels, at least good enough for the Internet.

A photo with more than 50 kb is seen as a large image on the Internet, especially if one considers that the page will have other graphical elements.

And one piece of advice: every time you save a picture for Internet, always use the original image. Otherwise we will be compressing images previously compressed with very poor results in terms of visual quality.

What is your method? Which format do you prefer?

  This content has been Digiproved © 2010