Alternative configuration/algorithm for compressing images If you get an error, the error log will be saved.
As an example - mozjpeg + jpegoptim or jpegtran + mozjpeg or any other algorithm. You can even minify images by using a combination of compression algorithms. For PNG: pngquant, optipng, pngout, webp, pngcrush, tinify.
Install the sharp package… npm install sharp The example above shows PNG but you could pass any type into there and it will converted to whatever format is declared in the URL. This gave me so much power when building my site, as fitting an image into a space just wasn’t a problem.įirstly, the html with png fallback for browsers that don’t support webp: Īs you can see the URL of the image has all the parameters which generate the 3 images types.
This would massively cut down the work I had to with css.įirstly, I created a route that accepted the name of an image, and variables such as size, crop and type. It can also crop your images for you just as css background-size:cover would do. Not only can sharp transform your image into a different size, quality and format. No more duplicating images on the server for all different sizes or types.Īll you need was one image and sharp will do the rest. Sharp can convert images pretty quickly and claims to be the fastest tool out there to do so, but what makes it incredible is that it can convert images on the fly, lightening fast. I’m thinking ‘great this is exactly what I need!’ Sharp is a NodeJs package that can convert images of all sizes into ‘ web-friendly JPEG, PNG and WebP images of varying dimensions’. I started Googling ‘outputting images as webp NodeJs’ and one that kept cropping up was sharp. I was used to creating websites in PHP, so I knew there was functionality which could output image in webp format, usually requiring a copy to made on the server and then called via some. Webp Images can be up to 26% smaller than PNG’s, so coupling this fancy new image format with lazy loading felt like I was on to a winner in terms of the performance that could be achieved utilising both.īuilding my site for the first time using NodeJs I had no idea what I was in for in terms of tools that would help match my Pagespeed performance dreams. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. There were two things I wanted to achieve firstly, the obvious, lazy loading, but the other was more curious, I wanted my images to be webp.įor those that don’t know about Google’s image format here is a snippet from the webp page explaining it better than I ever could:
I was pushing for a perfect Google PageSpeed score(check out my article ‘ How to get over 90 on Google Pagespeed Insights’ to find out why) and before hitting the Lighthouse run report button I knew I would have to do something to make my images load without hurting my score. This is the kind of tool you dream about as a Developer.