Common question when speaking about web site optimization is: where should I start. As I mentioned before almost every technology used in the building of a web project can be improved. The bad news is that this improvement needs effort and when it comes to changing some code that’s already written that’s bad. The good news, as it exists, is that in the most cases most of the traffic of a site comes by images and/or other media and their optimization doesn’t have to deal with coding and can simply be optimized.
Optimize every image
The first thing that you can do to improve your site image is to optimize them. Sometimes the files you put on the site as they are JPEG, GIF and PNGs can be improved just by using some software that strips useless information from their headers and using various algorithms to smooth the similar pixels. As you may know in the case of PNG and GIF this is particularly natural. Stoyan Stefanov a lead Yahoo! developer is know as guru when it comes image optimization. You can check more detailed information about software and tools on his blog here. The reality is that you don’t need extra info into the images, as useless information about the camera, which is often setup into the image header, and when it comes to the web that’s really good. In fact according to some researches this can spend you more than 30% of traffic.
Use CSS sprites
What are CSS sprites? Well you possibly already know. I’ve written some articles about that, so I won’t mention it again, but what’s the point. The CSS sprite usage helps you merge all the images you use into your site into one single image and to manipulate the site’s outlook only by changing the element background position. That’s really nice, it requires a bit concentration to track different elements background, but it’s not difficult at all. In fact there are some tools that can help to automate this. The good thing is that thus you replace all the background images with one single image and thus with one single request. So if you’ve one CSS file with twenty background images by using one CSS sprite there is only two requests instead of twenty one requests. Even more, you can go even further with this optimization technique and to replace the CSS sprite call by http by built into the CSS file base64 string. With that simple trick you got only one! request. Yes this becomes more difficult to maintain, but it’s really close to extreme optimization.
Use base64 to improve http request number when possible
That’s not a news, but however if you like to switch from multiple to one request the answer is base64. The good thing with base64 is that it can send to the client multiple images with single request and it natively eliminates the extra info from the image you convert. It has to be used with care, because sometimes even if it’s slower using multiple requests via HTTP for the images gives the user the feeling of faster site, just because the user sees response from the server earlier.
That’s all I can say about image optimization in one site. You can search in detail about tools and software, as well as other techniques explained here.
Related posts: