One way to make our site faster is by reducing HTTP requests is combining the files. For graphics and images being used in a site one way to achieve this is by using CSS Sprites, where all icons and backgrounds are combined into one single image and by using background-image and background-position CSS properties we are able to display only the desired image segment.
Reason tells that the smaller the files the faster a site would load. Well it is true, but only if we first have made certain with our previous steps that they aren't unreasonably too many. In the case of a site that we want to make it to load faster, we usually start first by images, which are by rule the biggest part of a page.
Compressing images can be achieved by many ways, that not necessarily means that the correct way is always picked. There are many algorithms lossless (.gif, .png) and lossy (.jpg), the first doesn't lose any of the original information, while the last sacrifice a little quality for the final filesize. Although if they are used properly, nearly all users are unable to spot any difference between the original and the compressed image. The general rule applied here is that we use .jpg for photographs, persons, landscapes, etc and .png for graphs, drawings etc.
This article covers of course only the top of the iceberg of the very important Web's chapter, the one of website optimization in order to load faster, we will explain in detail each technique in future articles. Stay tuned!