Optimizing images on website is important part of website development as lower image size will result in less data user have to download when visiting your website and thus resulting in improved speed of it. Learn how to painlessly optimize them in this article.
In this article we are not gonna explain the differences of image formats commonly used on websites as that is different subject and will be described in another article following this one but only how to optimize them and reduce their size.
Common formats used on websites in this 2018 are still jpeg and png and they come with different advantages and disadvantages depending on your use, but their size is what will always matter for one website.
You can optimize images without any loss of quality and with reduction of image quality and thus much lesser size when compared to lossless image compression.
One of the great online service for lossless image compression we are gonna describe is TinyJPG which offers free and premium compression services of your jpg, jpeg and png images without any hustle or annoying ads or registrations.
Procedure is quite simple you visit their website drag or drop your images and after compression of them is over you download them. Simple as that. We need to mention that if you are free user you have limit on batch upload up to 20 images in one go and one image can not exceed 5mb size uploaded for compression.
Good thing about TinyJPG is that they offer API access for their compression services and if you are developer you will be able to integrate compression of jpg and png images directly into your website or service.
While TinyJPG is offering lossless compression in terms of that quality of images will not be damaged or reduced results are quite excellent and image size is greatly compressed. For example image size of above displayed original image was 351.7KB and after compression size of it was reduced to 93.6KB ! If you ask us it is pretty good result and without any loss of image quality!
So if you are persistent in image quality displayed that on your website are perfect in quality terms and still get them compressed in size TinyJPG is for you.
What happens when you want to control ratio between image quality and compression and as we all know on one website we do not have images that are relevant to our content but also background images, icons and others and their quality do not have to be 100% since for example you can reduce size of your background image and mask lesser quality with css rule background-overlay which will add nice shadow effect and make the image display perfect. Example can be seen on our homepage where image size is 1920x1080 pixels compressed to 75% thus image became much smaller and thanks to grey effect that loss of quality is not noticeable.
Squoosh came out from Google kitchen and is offering free image compression service for popular image formats but compared to TinyJPG it does not have batch image compression ability and you have to compress images one by one, but great thing about this service is that you can select image quality, compressor type for images and few other options and this will give you more control over final image result. From our experience setting compression level to 75% is great ration between quality and compression when using Squoosh. We can tell you also that it does the job really good!
In example bellow we have compressed our logo jpg image 1920x1080 pixels with 75% compression and reduced original image size from 107KB to 37KB . Pretty amazing!
Now you have all you need to manage your website images in both scenarios one without loss of quality TinyJPG and one with full control over image quality Squoosh. If you think that some service deserves its place in this article let us know in comments below.