Giter Club home page Giter Club logo

imagemin-avif's Introduction

imagemin-avif

Avif imagemin plugin. Uses sharp.

Usage

const imagemin = require('imagemin');
const imageminAvif = require('imagemin-avif');

(async () => {
  await imagemin(['images/*.{jpg,png}'], {
    destination: 'build/images',
    plugins: [
      imageminAvif({quality: 50})
    ]
  });
})();

How to use with Gulp

import gulp from "gulp";
import imagemin from "gulp-imagemin";
import avif from "imagemin-avif";
import gulpIf from "gulp-if";
import rename from "gulp-rename";

import config from "./gulpconfig";

// your code here

function buildImagesAvif(images, force) {
  const isForce = typeof force !== "undefined" ? force : false;
  return gulp
    .src(images, { base: config.path.src.img })
    .pipe(gulpIf(!isForce, changed(config.path.dst.img)))
    .pipe(imagemin([avif({ quality: 50 })]))
    .pipe(rename((path) => (path.extname += ".avif")))
    .pipe(gulp.dest(config.path.dst.img));
}

const imagesAvif = () => {
  return buildImagesAvif(`${config.path.src.img}**/*.*`);
};

export {
    imagesAvif,
    // your other tasks here
};

API

imageminAvif(options?)

options

Type: object

quality

Type: number
Default: 90

Set quality factor between 0 and 100.

lossless

Type: booleand
Default: false

Use lossless compression mode.

speed

Type: number
Default: 5

CPU effort vs file size, between 0 (slowest/smallest) and 8 (fastest/largest).

chromaSubsampling

Type: number
Default: 4:2:0

Set to 4:4:4 to prevent chroma subsampling (requires libvips v8.11.0) otherwise defaults to 4:2:0 chroma subsampling.

imagemin-avif's People

Contributors

delfimov avatar benjibee avatar

Stargazers

Roman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.