Having a website full of beautiful images is great and all but can be a huge bottleneck for page loading. So in this post I`ve gathered 10 Best Javascript Libraries & Tools For Image Optimization that will improve user experience, made website load faster and made it more accessible for users without a fast connection.

Lozad

Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API.

Smartcrop

It is the result of my experiments with content aware image cropping. It uses fairly simple image processing and a few rules to attempt to create better crops of images.

Resemble

Analyse and compare images with Javascript and HTML5.

Pixelmatch

The smallest, simplest and fastest JavaScript pixel-level image comparison library.

Compressor

A simple JavaScript image compressor. Uses the Browser’s native canvas.toBlob API to do the compression work. General use this to precompress a client image file before upload it.

Pica

Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS.

imagemin

Minify images seamlessly.

Zooming

Pure JavaScript & built with mobile in mind. Smooth animations with intuitive gestures. Zoom into a hi-res image if supplied.

Imgcache

JS library based on the File API to cache images for offline recovery.

SVGO

SVG files, especially those exported from various editors, usually contain a lot of redundant and useless information. This can include editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting the SVG rendering result.