As web developers, we are often given the task to load assets to websites and applications.
Most of the times, unless you are working with a dream team of designers, the assets available are often either too large, or incorrectly formatted.
Likely there are so many ways for developers to manipulate assets, before shipping them to the browser.
Here is a short list of free online tools i use myself on daily basis for image compressing
Image processing
1.Tiny PNG
Tiny PNG is a super powerful fast online tool to compress your .png or even .jpg files, you just need to drag and drop your photo and it compresses it automatically, with up to 60% of file size reduction.
2.JPEG-optimizer
JPEG optimizer is another great tool to compress jpg files, in the UI you can upload your photo and make and customise the compression level ( custom width in pixels ).
Resizing
Picresize is my favourite tool, i use it almost everyday, ( i used it to resize the header image of this post). In this tool you can do the following :
- Crop
- Rotate
- Flip on both axis
- Resize with given % or custom values
- Save file in different format including png | jpg | gif
I highly recommend you to try it out and bookmark it on your favourite browser, it will come in handy , trust me.
The last but not least best practice to optimize images in your website, is knowing what format to use for which kind of asset, there are plenty of resources out there explaining the difference between png and jpg, if you are curious about the topic let me know on twitter or email, i will be glad to point them out.
Here is a good resource to test the loading time of your assets :
On imgx you just need to copy paste the url of your website, and receive a detailed report of your website load speed. Highly recommended
That's all folks,
*If you liked this post or you feel a good free resource ( no signup required) should be added to this list, please let me know on the comment section or on twitter . Also please share the post with your friends :) *