Let’s start with something simple – there are three universally supported image formats: GIF, PNG, and JPEG. In addition to these formats, some browsers also support newer formats such as WebP and JPEG XR, which offer better overall compression and more features. So, which format should you use?
At first – we should do a good work with images itself (this part is so boring, so, I’ll just provide a short list of recommendations):
- Sizing. Developers / designers – make sure the images you deliver perfectly fit their required website dimensions. Even if the same image should be made into different sized thumbnails to fit different pages, it’s well worth creating all these different thumbnails rather than deliver a large image and rely on the browser to resize it.
- Quality. don’t be afraid to experiment with lower JPEG quality levels. For certain websites we found that using a 50% JPEG quality yielded a very reasonable result.
- Correct Format.Once again, PNG should be used for computer generated images (charts, logos, etc.), JPEG when you are showing a captured photograph.Notice that despite the common belief, PNG will outperform GIF in almost every other aspect.
- Use compression tools
- Useless data. Make sure you strip the meta-data off your images and user uploaded photos
- Using images when CSS3 can be used. This one point is more interesting, but still, we are far away from algorithms. Just make sure you use CSS3 whenever possible. If your graphics designer is responsible for the markup, make sure you ask for CSS3 based elements where it makes sense. This thing should go as a non-functional requirement.
- Incorrect image cache settings. we highly recommend using aggressive caching for all your website images by setting your images HTTP ‘Expires’ header to as far in the future as possible.
Delivering static icons one by one
Other than photos and thumbnails, your website most likely includes many icons (arrows, stars, signs, marks) and auxiliary images. Google’s search results page is comprised of over 80 (!) tiny icons.
A simple solution for this problem is to utilize a CSS Sprite, a single image that contains all your smaller icons. Your web page is modified to download this single image from your server and the page’s HTML uses alternative CSS class names to point to the smaller images within the larger one.
Now, instead of 80 images, Google’s visitors download just a single image. Their browser will quickly download and cache this single image from Google’s servers and all images will be immediately visible.
To be honest, would also highly recommend Font Awesome to be implemented at your page.