Speed Up Your Website By Optimizing Images: "
Page speed is a ranking factor in the Google Search engine. According to Google officials it is currently used in 1 out of 1000 queries. I think it was Matt Cutts who said that speed acted as a tie breaker in situations. It is however likely that speed will play a bigger role in the future. But it is not only the search engine marketing and visibility aspect that plays a role here. The Majority of visitors likes a fast loading website. Depending on value or need to access those contents they may be inclined to wait, or leave the page if it loads to slow.
Webmasters have lots of options to reduce the page loading time of their websites. This includes removing unnecessary scripts, using compression, minifying HTML, CSS and JavaScript files, merging files where possible but also to optimize images that are hosted on the server.
The difference between an optimized image and an unoptimized image can make a big difference in page loading times. Think of it this way: If you can halve the size of each image hosted on your web server, without reducing the visible image quality, then you have cut the image loading time by halve as well (well halve is not entirely correct but lets use that figure for the sake of the argument).
The two main image formats used on the web are png and jpg. Jpg images are usually well compressed and there is little to gain by reducing their quality further. The image quality drops significantly at a point.
Png images on the other hand offer lots of room for improvement, if they have been saved as true color png images. Lets take a look at the following two images for the sake of this argument.
Do you see a difference in image quality? The second image’s size is 64 Kilobytes, that is 102 Kilobytes less than the size of the first image.
The program interface looks like this on startup. I have already made the relevant changes to the lower half. In particular, you need to switch to the PNG tab, select Optimal 256 Colors Palette, best compression (slow), NeuQuant neural-net (slow) and PNGout Xtreme (very slow) for the output files.
You then click the Batch icon at the top which opens an overlay window. Click on Add Images (or the small arrow next to it) to load images directly or by folder. Please note that you should only load png images. It does not help to convert jpg images to png, considering that they are still linked as jpg images on the web.
Make sure you select a second folder for the output images. A click on start optimizes all images loaded in the window.
Webmasters can then upload the optimized images to their web server.
Please note that the reduction to 256 colors may not work for all image types. It works well for screenshots and other images that we publish here at Ghacks.
The best option for WordPress based websites was to process one image folder at a time. WordPress saves image uploads in monthly folders. The whole process per folder was to copy all png images from a folder to the local system, add those images to Riot, process them in Riot and reupload them to the server in the same directory after comparing some of the input and output images.
© Martin for gHacks Technology News, 2010. | Permalink | Add to del.icio.us, digg, facebook, reddit, twitter
Post tags: optimize images, optimize png, riot, webmaster, webmaster tips, website loading time
"
Page speed is a ranking factor in the Google Search engine. According to Google officials it is currently used in 1 out of 1000 queries. I think it was Matt Cutts who said that speed acted as a tie breaker in situations. It is however likely that speed will play a bigger role in the future. But it is not only the search engine marketing and visibility aspect that plays a role here. The Majority of visitors likes a fast loading website. Depending on value or need to access those contents they may be inclined to wait, or leave the page if it loads to slow.
Webmasters have lots of options to reduce the page loading time of their websites. This includes removing unnecessary scripts, using compression, minifying HTML, CSS and JavaScript files, merging files where possible but also to optimize images that are hosted on the server.
The difference between an optimized image and an unoptimized image can make a big difference in page loading times. Think of it this way: If you can halve the size of each image hosted on your web server, without reducing the visible image quality, then you have cut the image loading time by halve as well (well halve is not entirely correct but lets use that figure for the sake of the argument).
The two main image formats used on the web are png and jpg. Jpg images are usually well compressed and there is little to gain by reducing their quality further. The image quality drops significantly at a point.
Png images on the other hand offer lots of room for improvement, if they have been saved as true color png images. Lets take a look at the following two images for the sake of this argument.
Do you see a difference in image quality? The second image’s size is 64 Kilobytes, that is 102 Kilobytes less than the size of the first image.
Using Riot to optimize images
You can use lots of different programs to optimize images. They all come with the capabilities but differ highly in their batch optimization capabilities. Riot is a free portable software that can process images in batch. (see Image Resizer And Optimizer Riot)The program interface looks like this on startup. I have already made the relevant changes to the lower half. In particular, you need to switch to the PNG tab, select Optimal 256 Colors Palette, best compression (slow), NeuQuant neural-net (slow) and PNGout Xtreme (very slow) for the output files.
You then click the Batch icon at the top which opens an overlay window. Click on Add Images (or the small arrow next to it) to load images directly or by folder. Please note that you should only load png images. It does not help to convert jpg images to png, considering that they are still linked as jpg images on the web.
Make sure you select a second folder for the output images. A click on start optimizes all images loaded in the window.
Webmasters can then upload the optimized images to their web server.
Please note that the reduction to 256 colors may not work for all image types. It works well for screenshots and other images that we publish here at Ghacks.
The best option for WordPress based websites was to process one image folder at a time. WordPress saves image uploads in monthly folders. The whole process per folder was to copy all png images from a folder to the local system, add those images to Riot, process them in Riot and reupload them to the server in the same directory after comparing some of the input and output images.
© Martin for gHacks Technology News, 2010. | Permalink | Add to del.icio.us, digg, facebook, reddit, twitter
Post tags: optimize images, optimize png, riot, webmaster, webmaster tips, website loading time
"
Comentários
Postar um comentário