ryan/squoosh
1
0
Fork 0
forked from external-repos/squoosh
Code Pull Requests Activity

Additional AVIF options (#987)

Browse Source 
* Separate colour & alpha options for AVIF

* Adding broken noise synthesis

* Build files

* Updating build

* Changing speed default

* Remove old comment

* Better speed default
This commit is contained in:
Jake Archibald
2021-04-29 11:19:24 +01:00
committed by GitHub
parent e900d33092
commit 33c0c3b034
13 changed files with 131 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/features/encoders/avif/client/index.tsx
View File

@@ -27,14 +27,15 @@ interface State {
lossless: boolean;
quality: number;
showAdvanced: boolean;
maxAlphaQuality: number;
separateAlpha: boolean;
alphaQuality: number;
chromaDeltaQ: boolean;
grayscale: boolean;
subsample: number;
tileRows: number;
tileCols: number;
effort: number;
sharpness: number;
denoiseLevel: number;
aqMode: number;
tune: 'ssim' | 'psnr';
}
@@ -53,7 +54,13 @@ export class Options extends Component<Props, State> {
const { options } = props;
const lossless = options.cqLevel === 0 && options.minQuantizerAlpha === 0;
const lossless =
options.cqLevel === 0 &&
options.cqAlphaLevel <= 0 &&
options.subsample == 3;
const separateAlpha = options.cqAlphaLevel !== -1;
const cqLevel = lossless ? defaultOptions.cqLevel : options.cqLevel;
// Create default form state from options
@@ -61,8 +68,10 @@ export class Options extends Component<Props, State> {
options,
lossless,
quality: maxQuant - cqLevel,
maxAlphaQuality: maxQuant - options.minQuantizerAlpha,
grayscale: options.subsample === 0,
separateAlpha,
alphaQuality:
maxQuant -
(separateAlpha ? options.cqAlphaLevel : defaultOptions.cqLevel),
subsample:
options.subsample === 0 || lossless
? defaultOptions.subsample
@@ -72,6 +81,7 @@ export class Options extends Component<Props, State> {
effort: maxSpeed - options.speed,
chromaDeltaQ: options.chromaDeltaQ,
sharpness: options.sharpness,
denoiseLevel: options.denoiseLevel,
tune: options.targetSsim ? 'ssim' : 'psnr',
};
}
@@ -111,20 +121,18 @@ export class Options extends Component<Props, State> {
const newOptions: EncodeOptions = {
cqLevel: optionState.lossless ? 0 : maxQuant - optionState.quality,
minQuantizerAlpha: optionState.lossless
? 0
: maxQuant - optionState.maxAlphaQuality,
cqAlphaLevel:
optionState.lossless || !optionState.separateAlpha
? -1
: maxQuant - optionState.alphaQuality,
// Always set to 4:4:4 if lossless
subsample: optionState.grayscale
? 0
: optionState.lossless
? 3
: optionState.subsample,
subsample: optionState.lossless ? 3 : optionState.subsample,
tileColsLog2: optionState.tileCols,
tileRowsLog2: optionState.tileRows,
speed: maxSpeed - optionState.effort,
chromaDeltaQ: optionState.chromaDeltaQ,
sharpness: optionState.sharpness,
denoiseLevel: optionState.denoiseLevel,
targetSsim: optionState.tune === 'ssim',
};
@@ -147,9 +155,9 @@ export class Options extends Component<Props, State> {
_: Props,
{
effort,
grayscale,
lossless,
maxAlphaQuality,
alphaQuality,
separateAlpha,
quality,
showAdvanced,
subsample,
@@ -157,6 +165,7 @@ export class Options extends Component<Props, State> {
tileRows,
chromaDeltaQ,
sharpness,
denoiseLevel,
tune,
}: State,
) {
@@ -193,15 +202,8 @@ export class Options extends Component<Props, State> {
<Expander>
{showAdvanced && (
<div>
{/*<label class={style.optionToggle}>
Grayscale
<Checkbox
checked={grayscale}
onChange={this._inputChange('grayscale', 'boolean')}
/>
</label>*/}
<Expander>
{!grayscale && !lossless && (
{!lossless && (
<div>
<label class={style.optionTextFirst}>
Subsample chroma:
@@ -214,16 +216,30 @@ export class Options extends Component<Props, State> {
<option value="3">Off</option>
</Select>
</label>
<div class={style.optionOneCell}>
<Range
min="0"
max="63"
value={maxAlphaQuality}
onInput={this._inputChange('maxAlphaQuality', 'number')}
>
Max alpha quality:
</Range>
</div>
<label class={style.optionToggle}>
Separate alpha quality
<Checkbox
checked={separateAlpha}
onChange={this._inputChange('separateAlpha', 'boolean')}
/>
</label>
<Expander>
{separateAlpha && (
<div class={style.optionOneCell}>
<Range
min="0"
max="63"
value={alphaQuality}
onInput={this._inputChange(
'alphaQuality',
'number',
)}
>
Alpha quality:
</Range>
</div>
)}
</Expander>
<label class={style.optionToggle}>
Extra chroma compression
<Checkbox
@@ -241,6 +257,16 @@ export class Options extends Component<Props, State> {
Sharpness:
</Range>
</div>
<div class={style.optionOneCell}>
<Range
min="0"
max="50"
value={denoiseLevel}
onInput={this._inputChange('denoiseLevel', 'number')}
>
Noise synthesis:
</Range>
</div>
<label class={style.optionTextFirst}>
Tune for:
<Select