Are you tired of Google PageSpeed Insights nagging about image optimization? Those days are over now. We have just updated Innota and we've optimized our image optimization process.
Innota has always been about performance and Innota has always made it really easy to scale and optimize images. We have optimized JPEG images since day one, but our image optimization strategy hasn't been up to the world class standards we're aiming for.
We have just rolled an update to Innota and our image optimization process is improved dramatically and we're now optimizing both JPEG and PNG images.
The results are impressive!
Real World Example
Here's a JPEG image of a frozen lake taken on a 1st gen Moto G. It's slightly edited in Snapseed. Click the thumbnails for full size image to see the images in better detail.
The left image is the original image, and the right one is optimized in Innota. If you look closely you'll see some small differences in the images.
The biggest change is the size of the images. The original image is 1025kB and the optimized is 345kB. That's almost one third of the original without any noticeable differences!
So how is this possible? One thing is that JPEG images include a lot of extra information that is not visible to the viewer, like which camera was used to take the picture, camera settings, possibly coordinates where the picture was taken and so on. Innota removes all this data to make the file size smaller.
Innota also uses a tool called jpegoptim to optimize the image size without sacrificing that much of the quality.
Using Optimization in Innota
Optimizing images in Innota is really simple. And you can choose not optimize if you don't want to, but we really recommend this to make your pages load faster.
When you upload an image you can choose to optimize it before we save it. Optionally, you can even scale the image before saving if you have no need for the full size image. This is great if you're uploading images straight from your phone and only want to serve scaled down images.
If you use image() function to get a scaled version of your image, the image will be automatically optimized after it's been scaled to your preferred size.
You can read more about images and scaling in the documentation.
