How optimize website

Optimizing yoour website is one of the required steps that allow you to increase the performance and the site load speed. In this how to article you'll learn some techniques for optimizing your website by compressing the images for a web site.

Resize image

The first thing you have to do is to resize your images. Using large size pictures and resizing them directly with the img width and height html properties allow you to have the images in your desired size, but a lot of bandwith will be wasted. In this case in fact the images with the original format will be uploaded from the server to the browser and only then the browser will resize them. For this reason you have to resize all the images directly server-side. You have always to remember that the larger the image the larger the required bandwith. Having the images already stored in the desired size is a main step. If you want to resize images you can use any graphic software, photoshop is one example.

Resize images using photoshop

Photoshop is a great tool that allows you to resize your images very easily and efficiently. To resize images in photoshop, you have just to open your image, then go to the Menu under Image - Image size. In this new view you can set the new width and height sizes. By default the width and height lock mode is enabled, this means that when resizing one dimension, the other will be resized too. In this way your image will not be distorted.

You can save then your image in the jpg or png format.

Compress your images

The next step you have to do is the image lossless compression. This is a very useful step that will reduce your image disk-size of 20-40% with a lossless compression. There are several free online services that allow you to do a image lossless compression. One of this online service is the tinypng one. You can find this online service at this link: tinypng.com. Here you can upload your images and tinypng will return the compressed formats that you can download and use.

Browser image caching

A further step to improve your website performance is to enable the browser image caching. In apache you can do it very quickly with the htaccess directive using the mod_expires module.

Create a new .htaccess file and put inside it:

In expiresdefault you can set the cache expires time.

Conclusions

The use of  techniques will considerably improve your site performance. In the next article we'll see other tecniques that can further improve your website load speed by enabling a dinamic page caching and image embedding.