I have set some rules of my own when handling images for the web.
- Use as least images as possible.
- If you can create the same effect through CSS, use CSS instead of an image.
- Never load image you won’t display!
By following the rules above, you will really reduce the size of your website.
Proceeding. There are 2 types (I group them myself) of images present in a website.
1.] Images you post as “content” or media for your articles, galleries or slideshows. These images are commonly big in both dimension and file size.
2.] Images used in CSS as design. Commonly seen as background images.
It’s best to “optimize” the images for the web. Optimizing means reducing the file size of the image. You can do it through image processing software like Photoshop, or Gimp.
After optimizing all the images, the next thing to do is to create a “Sprite”. If you will look into your CSS file, you will notice that it has many “background-image”, it means that it is loading many background images. So what we will do is create a big image where all the background images are included request the big image once. This might sound hard to do and actually “before” it is really hard to do as you need to generate the CSS manually. But now it’s easy to create a sprite.
Here are a few online generator sprites that might come handy for you:
Fortunately, the theme I am using is already applying sprites although all the images aren’t included on a single sprite. My theme is using multiple sprites to load images. I think it’s good enough so I will skip the spriting part.
Anyway, here’s the result after optimizing the images.
The image shows us the following:
- Number of requests reduced from 50 to 43
- Total file size reduced from 788kb to 662kb
- “DOM”-loaded time reduced from 3.5 – less 6 seconds to 3 – less 5 seconds.
So are already passed the 5-second mark. But take note that I am from the Philippines our internet speed here is really slow! I believe that the website will load on less than 3 seconds for most visitors.