{"id":282,"date":"2011-10-27T08:16:21","date_gmt":"2011-10-27T08:16:21","guid":{"rendered":"http:\/\/www.ubuntupirates.com\/?p=282"},"modified":"2011-10-27T08:16:21","modified_gmt":"2011-10-27T08:16:21","slug":"how-to-compress-png-images-to-speed-up-your-website","status":"publish","type":"post","link":"https:\/\/www.jameseduard.com\/?p=282","title":{"rendered":"How to compress PNG images to speed up your website"},"content":{"rendered":"

If you have a blog or a website with a lot of content sometimes the images can take a toll on the load time of the pages. There are a number of steps you can take to speed things up. If you analyze the loading of your website you might notice that the images take up a huge part of the load time. Let\u2019s take a look at how you can compress your .png<\/em> images to improve on this figure.
\nWe\u2019ll use the tool pngcrush for this purpose. pngcrush<\/em> is a free and open source command line tool that, as the name suggests, compresses PNG images. Take a look at the projects website<\/a> for detailed information on how to use it. We will cover the basics in this article.
\nInstallation<\/strong>
\nMost modern distributions of Linux such as Fedora and Ubuntu have pngcrush<\/em> available directly in their default repositories. So, to install it on you Ubuntu computer execute the following command:<\/p>\n

# sudo apt-get install pngcrush<\/em><\/pre>\n
On Fedora do the following:<\/strong><\/p>\n
# yum install pngcrush<\/em><\/pre>\n
Usage
\n<\/strong>
\npngcrush optimizes a PNG graphics file by reducing the size of the files IDAT chunk. The process is not simple. The great thing about pngcrush<\/em> is that the authors of the tool have simplified things for you. They ship it with a great option \u2013 brute. When you use this option you effectively tell pngcrush to try and use the most suitable method to compress the image at hand. There are about 114 different filters that can be used, so this option is mighty useful. Here\u2019s how you would use it to compress an image:<\/p>\n
# pngcrush -brute -e \u201c.compressed.png\u201d image01.png<\/em><\/pre>\n
The two options used here are -brute<\/strong> which I just explained, and -e. The second option tells pngcrush what extension to add the the filenames. So after the process of crushing is complete the compressed version of the file image01.png will be called image01.compressed.png.<\/em> you can change the extension if you like.<\/strong><\/em>
\nYou can also slightly modify the above command to compress several PNG files in a directory. Execute the following command:<\/p>\n
# pngcrush -brute -d \u201c\/var\/www\/html\/website\/images\/\u201d *.png<\/em><\/pre>\n
 
\nThe above command uses a new option, -d. This option tells pngcrush where to place the compressed image files after the compression is complete. The above command will compress all the PNG file in the current directory and place them in \/var\/www\/html\/website\/images\/.
\nI strongly suggest that you read up more about this tool and its options on the projects website. There are a lot of options that might help you speed up the process of compression or do a better job of it. Put the new images into your website and watch your pages load faster.
\nDownload here: http:\/\/pmt.sourceforge.net\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
If you have a blog or a website with a lot of content sometimes the images can take a toll on the load time of the pages. There are a number of steps you can take to speed things up. If you analyze the loading of your website you might notice that the images take<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,23,13],"tags":[179,22,82,180,181,182,183],"class_list":["post-282","post","type-post","status-publish","format-standard","hentry","category-application","category-linux","category-opensource","tag-apt-get","tag-linux","tag-opensource","tag-pngcrush","tag-sudo","tag-web-design","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=\/wp\/v2\/posts\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=282"}],"version-history":[{"count":0,"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=\/wp\/v2\/posts\/282\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jameseduard.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}