Optimizing the images you include at your website is a great way to improve the overall speed of your website. Images weather they are in JPEG, PNG or GIF format which have not been compressed for the web can really slow your website down and have a serious impact on the web visitors user experience at speed of the website.
With more and more people visiting websites using smart phone and tablet devices on mobile connections it has become even more imporant to compress the size of the images you publish to your website.
We have put together a colection of online image optimization tools which are free and easy to use which can compress the file size of JPEG, GIF and PNG images by up to 50% without degrading the quality of the original image.
We understand you can achieve some great compression rates using Photoshop or RIOT and other 3rd party software.
This blog post will only focus on online tools which do not require the installation of any software. As long as you have access to the internet and web browser you can use one of the free tools included in this blog.
Why should You optimize your Images
- Compressed images mean a faster website which will improve the overall user experience for the website visitor.
- We live in a mobile world where people access websites via smart phones or tablet devices on mobile connections. If your website loads slowly due to a large number of uncompessed images the visitor is less likely to wait for the site to load and will go elsewhere.
- A faster website and better user experience can improve the position of your website in the search engine listings for Google and Bing. for more information read the article using site speed in web search ranking.
- You will save bandwidth which may reduce the cost of your hosting bill.
Kraken
We really like the Kraken tool as it does it's job well. It has a clean, user friendly interface which allows you to upload 1 MB JPEG, PNG or GIF files plus you can choose from two diffrent compression modes including lossless and lossy. Once the image is compressed the output is displayed to let you know how many KB's you have saved. You can then downlaod the file (s) to your computer. You can also upload multiple files to be compressed at once and downlaod them in a zip archive. Very handy tool if your on the move and want to quickly optimize some images for an article or to send via email.
JPEGMini
JPEGMini is the next image optimzation tool we would recommend to anyone looking to quckly and easily compress JPEG images. Like Kraken JPEGMini has a simple user interface where you can drop JPEG format files onto the website which then get automatically compressed. JPEG Mini offers compresion rates of between 1.5 x to 2.0x. The only downsize to using this tool is that you are restricted to JPEG images only as with Kraken you can compress JPEG, PNG or GIF image files.
Compressor.io
Compressor.io like the above has a really simple interface where you can drag and drop your JPEG, GIF, PNG or even SVG files onto the website which automatcially get compressed on the fly. Once the files have been optimized you can downoad them to your PC. We also have found that Compressor.io offered better compression rates without loosing image quality compared to JPGmini. Another big bonus this online tool has to offer is that is supports four diffrent image formats.
Tinypng
Tinypng is one of our favourite online image optimizer tools. First of all it's got a cool panda plus it's really simple to use. You just drop your PNG or JPEG images onto to the website and watch the application work its magic by automatically compressing the images. The PNG compression from Tinypng is also great, really impressed with some of the results we have got from this tool. It also now supports JPEG image formats.
What can I do to improve the delivery of images and speed up my website?
As noted above you can use one of the above online image compression tools to optimize the images you have published at your website or you may also want to consider one of the following options which can really help with speeding up your website by delivering static content including images, CSS and java script files in a much more efficient way.
Content delivery network
A CDN or content delivery network automatically distributes the static files included at your website (JPEG, PNG, GIF images, JavaScript, CSS files) across multiple servers located around the world.
When someone visits your website the static files are served from the server located closest to the user. Example if a user is visiting your website from the UK they will be served the static content from a UK based CDN server.
Htaccess browser caching
A majority of websites including Joomla make use of a .htaccess file. You can include a few simple lines of code in the .htaccess file which will tell the visitors browser to cache the images included at your website on the visitors local computer browser cache for specific amount of time. This can range from days, weeks, months or years.
The great thing about using this approach is whenever a user visits your website it will look up the images locally first when the website is loaded. By adding a few simple lines of code to the .htaccess file you and your visitors will see some major website speed improvements. For more information about making use of this caching approach read the article leverage browser caching
Don't go crazy with images
These are more common sense tips rather than technical tips. Think about the number of images you include in the articles published at your website. Is adding 40 x 500KB JPEG images to one page really adding value to the website and the visitors user experience. Only add what you need and make sure the images are compressed. Test the website or page on a mobile connection to see how long it takes to load or via a speed testing tool.
Images included In the Joomla template
A majority of templates for Joomla make use of images to make the template look more visually appealing to the visitor. A template can really slow a website down.
Every time the website is opened the template is also rendered in the visitor’s browser. This means that the design may load between 10 or 20 separate images via the template.ccs file plus JavaScript code plus much more each time the website is opened. So your website not only has to load images included in the articles but also from the template which can all add up to a large number of image requests which need to be downloaded to the visitors browser.
We tried very hard to only include a limited number of optimized images in the templates we have created at the website for Joomla to ensure they load super-fast for everyone across all devices and connections.
