Reduce the number of images

One of the ways to speed up your website is to minimize the number of files your web page needs to load (HTTP requests) before it can fully display your web page to your visitor. When your web page needs a lot of sitewide images(images used on most every page of your site) to load to display your web page correctly it can cause a lot of extra server load and cause the browser of your visitor to block the rendering of your web page until all files are finished loading. This is why it’s important to minimize the number of image files your site uses. Don’t worry, this can be easily accomplished. Let me first bring to your attention which images you should focus on.

Focus on images used for design or functions

For most websites, the area where the biggest progress can be made is in how images for design or particular functions are used. Most often, people use a ready-made theme bought from a designer. What is noticeable is that some of these themes use a lot of individual images for design purposes. This is mostly unnecessary since we can use CSS sprites and regular CSS code for almost any visual aspect of a web page nowadays. Below are some solutions to handle these types of images to improve your page speed.

Using CSS image sprites

Using CSS sprites allows you to combine several images into one bigger image but still use every separate image individually on your page. This can greatly lower the number of separate image files your web page has to call and thus greatly increase your page speed by minimizing the number of HTTP requests. For example, you can combine 30 images to 1 image. By doing this the browser only has to download 1 bigger image instead of 30.
By using X and Y coordinates in a CSS code to define the position of every separate image used from the sprite on your website you can place your images where you want them to be. Use the CSS Sprites Generator to create CSS sprites with your own images, which also provides a guide to set the sprite up on your page.

Inline images (Using Base64 Code)

Another great way to minimize the number of files your web page uses is to inline images in the HTML code instead of using a image file. You can do this by converting your image files to Base64 code with this tool and replacing the image with the Base64 string. Replacing your image with this code will give you the exact same visual image as calling the image file. It is noticeable, however, that the file size of a Base64 string is usually a little bigger as the original image. But you’d still benefit from converting your images to Base64 code because of less HTTP requests. But don’t overdo it.

Transform your logo into pure CSS code

You can actually create logo’s out of pure CSS code without using an image file. It’s a lot of work though, it is not recommended using this method unless you love working with CSS. Go here for some examples and here if you want the code of these logos to get an idea how to create your own logo in pure CSS.

Ignore your photos

Although you should definitely lazy load and optimize them, your photos used in articles or other types of informational pages should usually be left alone when it comes to minimizing HTTP requests. These types of photo files are often only used on one single page and it would be a lot of work if you would have to create a sprite or Base64 code for every one of these separate photos.