As web developers, we are often given the task to load assets to websites and applications.
Most of the time, 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 customize the compression level ( custom width in pixels ).
Resizing
Picresize is my favorite tool, I use it almost every day, ( 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 the file in different format including png | jpg | gif
I highly recommend you to try it out and bookmark it on your favorite browser, it will come in handy, trust me.
The last but not least good 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 in the comment section or on twitter.
Also please share the post with your friends :) * *
Top comments (2)
I couldn't agree more with the importance of image optimization in web development. It's common to encounter large or improperly formatted assets, especially when working without a dedicated design team. That's why having access to free online tools for image optimization is invaluable for developers.
By using tools like jpg compress, developers can easily manipulate assets to ensure they're optimized for fast loading times and optimal performance. Whether it's reducing file sizes, adjusting compression levels, or converting between formats, these tools make the process quick and hassle-free.
Having a variety of optimization options at our disposal allows us to fine-tune assets before deploying them to the browser, ultimately improving user experience and site efficiency.