Our quest for the perfect website has finally come to an end. We began with some basic theory about domains and web hosting, in the first four chapters. Then I taught you some tricks which I use to check up web hosts, without even signing up for an account, in chapters five to nine. Finally, in chapters ten to fifteen, we are taking a look at various methods to be used to get the most out of our hosting. The aim of choosing the best possible web hosting company is to have a site that provides a great browsing experience to our visitors. To this end, good hosting, such as the one provided by Site5, needs to be coupled with a spot on website optimization. Therefore, we took a look at topics such as: easily migrating from one host to another when needed; offline editing and using cache plugins and optimizing HTML. There is one aspect of website optimization that we only briefly touched upon. And it’s probably the most important aspect of the art of pushing Web properties to an extreme: image optimization. Unoptimized images can make a site extremely slow, to a degree that even the fastest dedicated server and state of the art cache plugin won’t help at all. We’ll be taking a look at two aspects of image optimization for websites. The first and most important is how to reduce the size of your images without compromising their quality. That includes all images on your site, both images in posts and background images. The second is combing images into CSS sprites to reduce the number of requests a visitor’s browser makes to the host. Starting with the first of these two tasks, let’s consider some tools that will help with saving those precious kilobytes. We’ll check both a paid resource, Adobe Photoshop and a free Online Image Optimizer.
Optimizing Images With Photoshop
1.1 First, open the image that you want to optimize for the web using Adobe Photoshop and then go to ‘File -> Save for Web & Devices‘. We can save our picture in three different formats: JPEG, GIF or PNG-8. You should use GIF only for animated images. For all other types, you will use either JPEG or PNG-8. Choosing between these two formats is a matter of trial and error. Sometimes JPEG gives excellent results with very small file sizes and PNG-8 fails miserably. Other times, it’s the other way round. In general, JPEG is better for very complex images, where as PNG-8 works best with simpler ones.
1.2 I will try saving the file as a JPEG first. (1) From the drop down menu choose ‘JPEG‘ as the file type. (2) Make sure that progressive is selected. (3) Enlarge the image to 200%, so that you can check the quality accurately. (4) Play with the quality setting from 10 to 80. (5) While adjusting the quality control keep an eye on the size of the image. You should aim for a size that is no more than 30Kb and a quality that is no less than 30. This is known as the thirty-thirty rule. However, this is really just a guideline, not a rule that is set in stone. Sometimes you have no choice but to go for larger files, if the picture is huge and detailed. Other times, such as in this case with the teddy cyborg, a quality on 10 can give excellent results and help save a lot in file size. (6) Save the optimized image.
1.3 Saving a JPEG image as a progressive image is very important. While this will not help reduce the file size further, it will create the illusion that your site is loading faster than it actually does! Check this picture below, to see what I mean. An ordinary JPEG file loads from top to bottom making the download time very obvious to the user. A progressive JPEG loads from low to high quality. Users will hardly notice that anything is being loaded while browsing a site optimized with progressive images.
1.4 To save the image as PNG-8 instead of JPEG, (1) select ‘PNG-8‘ as the file type, (2) set transparency options as shown in the picture below. I highly discourage you to use transparent pictures unless absolutely necessary. Note that JPEG can’t be used for images with any level of transparency. If you need to use this feature of PNG-8, make sure that you pick a color that is as close as possible to the background on which the image will sit, under ‘Matte‘. (3) Set the zoom to 200% so that you can carefully check the quality of the picture. (4) Play with the number of colors in the picture. Start out with the highest number which is 256 and keep going down. Try to choose the best possible compromise between a low number of colors and good quality of the image. (5) Keep an eye on the size of the image while tweaking. (6) See whether the PNG-8 or the JPEG result offer the best trade off between quality and file size. Save the optimized image in the file format that you ultimately wish to keep.