NOTE: Moving this to a page on the www.alanwsmith.com site for an overview. Specifics will be added here when that's done. All the rest of this below is scratch notes for now

ffmpeg WebP Tests

Details

This is a series of webp tests from ffmpeg

EXAMPLE

This is what it looks like without any parmas (i.e. just `.webp` for the file name.) Not something you'd want to use. I'm only putting it here as a raw reference.

ffmpeg -i input.mp4 \
    -vf "$SIZE" \
    -loop 0 \
    -y alfa.webp

Here's the raw version followed by a version with `-vcodec libwebp` added. It sets the codec to the one designed for WebP. The improvment is dramatic and it'll be included as the baseline for all the rest of the examples.

The next step is to look at the `-compression_level`. Valid values are from 0-6 with 4 being the default. Here's 0-6 in order.

the quick brown fox

HTML

<p>the quick brown fox</p>

JavaScript

const images = {
    raw: [],
    baseline: [],
    c0: [],
    c1: [],
    c2: [],
    c3: [],
    c4: [],
    c5: [],
    c6: [],
}

let loaded_images = 0

const checkLoaded = () => {
    loaded_images += 1
    if (loaded_images == 9) {
        showImages()
    }
}

const showImages = () => {
    console.log('showing')
    for (let image in images) {
        for (let i = 0; i < image.length; i++) {
            const id = `${image}${i}`
            console.log(id)
            const el = document.getElementById(`${image}${i}`)
            if (el) {
                el.appendChild(images[image][i])
            }
        }
    }
}

const init = () => {
    console.log('init')
    for (let name in images) {
        for (let i = 0; i < 4; i++) {
            images[name][i] = new Image()
            images[name][i].src = `samples/${name}.webp`
            images[name][i].addEventListener('load', checkLoaded)
        }
    }
}

document.addEventListener('DOMContentLoaded', init)

Notes

I use '-vcodec', 'libwebp' for everything after the default baseline since it's literally designed for the conversion
Setting `-lossless 0` had no effect from the baseline
Setting `-lossless 1` turned it on and increased file size by 20x. Removing that from the outputs.
-compression_level (0-6, default is 4) is: a quality/speed tradeoff. Higher values give better quality for a given size at the cost of increased encoding time. values go from 0 to 6. I'm not checking timings in this run, just the quality.
Based on that description, I move compression_level to 6 for everything except the initial baselines
Default `-quality` is 75
The presets might be more pronounced on other content types