https://github.com/imagemin/imagemin
https://github.com/jcupitt/libvips
compress images tools:
- ImageOptim
- MozJPEG
- Progressive JPEG
- pngquant
- SVGO
- Instead of crazy huge animated GIFs, deliver H.264 videos (or WebM for Chrome, Firefox and Opera)!
- gif: https://github.com/pornel/giflossy
image optimisation
- Choose the right format
- Size approriately
- Adapt intelligently
- Compress carefully
- Prioritize critical images
- Lazy-load the rest
- Take care with tools
Tools and libraries like ImageMagick, libjpeg, jpegtran, jpeg-recompress and imagemin support exporting Progressive JPEGs.
SVG can be powerful for icons, offering a way to represent visualizations as a sprite without the quirky workarounds needed for icon fonts. It has more granular CSS styling control than icon fonts (SVG stroke properties), better positioning control (no need to hack around pseudo-elements and CSS display) and SVGs are much more accessible.
Tools like svg-sprite and IcoMoon can automate combining SVGs into sprites which can be used via a CSS Sprite, Symbol Sprite or Stacked Sprite. Una Kravetz has a practical write-up on how to use gulp-svg-sprite for an SVG sprite workflow worth checking out. Sara Soudein also covers making the transition from icon fonts to SVG on her blog.
Always comprese from the original image. Recompressing images has consequences.
When editing your source files,store them in a lossless format like PNG or TIFF,so you preserve as much as quality as you can.
Resizing and decoding images are expensive operations for a browser on average mobile hardware.
Serve the smallest images for your target screen sizes and resolutions, taking advantage of srcset and sizes.
Omitting the width or height attributes on an image can also negatively impact performance. Without them, a browser assigns a smaller placeholder region for the image until sufficient bytes have arrived for it to know the correct dimensions. At that point, the document layout must be updated in what can be a costly step called reflow.