How lossless compress to .avif?

[alexeygritsenko]

Hi, Google PageSpeed Insights now advises saving images to .AVIF. Could you provide an example of lossless .avif?

[dlemstra]

If you want to create a lossless .avif file you should set the Quality of the image to 100.

[alexeygritsenko]

I tried it. The file becomes larger than a jpg. I don't think Google will pat me on the head for this.
code:

internal class Program
{
    static async Task Main(string[] args)
    {
        Directory.CreateDirectory(Path.Combine("output", "jpg"));
        Directory.CreateDirectory(Path.Combine("output", "avif"));

        var input = Directory.GetFiles("input");
        foreach (var file in input)
        {
            var fi = new FileInfo(file);
            string pathJpg = Path.ChangeExtension(Path.Combine("output", "jpg", fi.Name), "jpg");
            string pathAvif = Path.ChangeExtension(Path.Combine("output", "avif", fi.Name), "avif");

            using (var image = new MagickImage(file))
            {   
                await MakeGooglePageSpeedInsightsHappy(image, pathJpg);
            }

            using (var image = new MagickImage(file))
            {
                await SaveAsAvif(image, pathAvif);
            }

            await Console.Out.WriteLineAsync(file);
            await Console.Out.WriteLineAsync("source: " + (new FileInfo(file).Length / 1024) + " kb");
            await Console.Out.WriteLineAsync("jpg:    " + (new FileInfo(pathJpg).Length / 1024) + " kb");
            await Console.Out.WriteLineAsync("avif:   " + (new FileInfo(pathAvif).Length / 1024) + " kb");
        }

        await Console.Out.WriteLineAsync("End.");
        Console.ReadKey();
    }

    static async Task SaveAsAvif(MagickImage image, string path)
    {
        image.Quality = 100;
        image.Format = MagickFormat.Avif;

        using (var output = new MemoryStream())
        {
            await image.WriteAsync(output);
            output.Position = 0;

            using (var fileStream = File.Create(path))
            {
                await output.CopyToAsync(fileStream);
            }
        }
    }

    static async Task MakeGooglePageSpeedInsightsHappy(MagickImage image, string path)
    {
        if (image.Format == MagickFormat.Png)
            image.ColorAlpha(MagickColors.White);

        image.Format = MagickFormat.Jpg;

        using (var output = new MemoryStream())
        {
            await image.WriteAsync(output);
            output.Position = 0;

            var optimizer = new ImageOptimizer();
            optimizer.LosslessCompress(output);

            using (var fileStream = File.Create(path))
            {
                await output.CopyToAsync(fileStream);
            }
        }
    }
}

output:

input\about-site-main.png
source: 52 kb
jpg: 51 kb
avif: 68 kb
input\moscow-pic.jpg
source: 190 kb
jpg: 130 kb
avif: 425 kb
input\walp.jpg
source: 4217 kb
jpg: 4129 kb
avif: 10927 kb
End.

[dlemstra]

You asked for lossless compression. I don't think you should be using that? Jpeg is lossy so avif should probably also be lossy?

[alexeygritsenko]

LosslessCompress() method is worked as lossy?

[dlemstra]

The LosslessCompress method has no support for avif files. And you should lower the Quality value to get a smaller size.