Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable zopfli on oxipng #1413

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 117 additions & 79 deletions codecs/oxipng/Cargo.lock

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions codecs/oxipng/Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ wasm-opt = ["-O", "--no-validation"]
crate-type = ["cdylib"]

[dependencies]
oxipng = { version = "9.0", default-features = false, features = ["freestanding"] }
oxipng = { version = "9.0", default-features = false, features = ["freestanding", "zopfli"] }
wasm-bindgen = "0.2.73"
log = { version = "0.4.11", features = ["release_max_level_off"] }
wasm-bindgen-rayon = { version = "1.0", optional = true }
Expand All @@ -22,4 +22,4 @@ lto = true
opt-level = "s"

[features]
parallel = ["oxipng/parallel", "wasm-bindgen-rayon"]
parallel = ["oxipng/parallel", "wasm-bindgen-rayon", "oxipng/zopfli"]
19 changes: 17 additions & 2 deletions codecs/oxipng/pkg-parallel/squoosh_oxipng.d.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 5 additions & 2 deletions codecs/oxipng/pkg-parallel/squoosh_oxipng.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion codecs/oxipng/pkg-parallel/squoosh_oxipng_bg.wasm.d.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 17 additions & 2 deletions codecs/oxipng/pkg/squoosh_oxipng.d.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 5 additions & 2 deletions codecs/oxipng/pkg/squoosh_oxipng.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion codecs/oxipng/pkg/squoosh_oxipng_bg.wasm.d.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 22 additions & 1 deletion codecs/oxipng/src/lib.rs
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
#[cfg(feature = "parallel")]
pub use wasm_bindgen_rayon::init_thread_pool;

use oxipng::{BitDepth, ColorType, Interlacing};
use oxipng::{BitDepth, ColorType, Deflaters, Interlacing};
use std::num::NonZeroU8;
use wasm_bindgen::prelude::*;
use wasm_bindgen::Clamped;

Expand All @@ -12,6 +13,9 @@ pub fn optimise(
height: u32,
level: u8,
interlace: bool,
deflater: u8,
iterations: u8,
compression_level: u8,
) -> Vec<u8> {
let mut options = oxipng::Options::from_preset(level);
options.optimize_alpha = true;
Expand All @@ -20,6 +24,23 @@ pub fn optimise(
} else {
Interlacing::None
});
match deflater {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice to introduce a type here first, like we have in the resize module, so we can match on semantically meaningful words rather than numbers.

Also, invalid numbers should be panic()’d, not just use a default value.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review @surma !

Is this what you were thinking of e3bb3a9 ?

0 => {
options.deflate = Deflaters::Libdeflater {
compression: compression_level,
}
}
1 => {
options.deflate = Deflaters::Zopfli {
iterations: Option::unwrap(NonZeroU8::new(iterations)),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
iterations: Option::unwrap(NonZeroU8::new(iterations)),
iterations: NonZeroU8::new(iterations).unwrap(),

}
}
_ => {
options.deflate = Deflaters::Libdeflater {
compression: compression_level,
}
}
}

let raw = oxipng::RawImage::new(width, height, ColorType::RGBA, BitDepth::Eight, data.0)
.unwrap_throw();
Expand Down
46 changes: 45 additions & 1 deletion src/features/encoders/oxiPNG/client/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { inputFieldChecked } from 'client/lazy-app/util';
import { EncodeOptions } from '../shared/meta';
import { defaultOptions, Deflaters, EncodeOptions } from '../shared/meta';
import type WorkerBridge from 'client/lazy-app/worker-bridge';
import { h, Component } from 'preact';
import { inputFieldValueAsNumber, preventDefault } from 'client/lazy-app/util';
import * as style from 'client/lazy-app/Compress/Options/style.css';
import Range from 'client/lazy-app/Compress/Options/Range';
import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
import Select from 'client/lazy-app/Compress/Options/Select';

export async function encode(
signal: AbortSignal,
Expand All @@ -30,7 +31,11 @@ export class Options extends Component<Props, {}> {
const options: EncodeOptions = {
level: inputFieldValueAsNumber(form.level),
interlace: inputFieldChecked(form.interlace),
deflater: inputFieldValueAsNumber(form.deflater),
iterations: inputFieldValueAsNumber(form.iterations, 5),
compressionLevel: inputFieldValueAsNumber(form.compressionLevel, 11),
};

this.props.onChange(options);
};

Expand All @@ -57,6 +62,45 @@ export class Options extends Component<Props, {}> {
Effort:
</Range>
</div>
<label class={style.optionTextFirst}>
Deflater:
<Select
name="deflater"
value={options.deflater}
onChange={this.onChange}
>
<option value={Deflaters.libdeflater}>Libdeflater</option>
<option value={Deflaters.zopfli}>Zopfli</option>
</Select>
</label>
{this.props.options.deflater == Deflaters.libdeflater && (
<div class={style.optionOneCell}>
<Range
name="compressionLevel"
min="1"
max="12"
step="1"
value={options.compressionLevel}
onInput={this.onChange}
>
Compression level:
</Range>
</div>
)}
{this.props.options.deflater == Deflaters.zopfli && (
<div class={style.optionOneCell}>
<Range
name="iterations"
min="1"
max="15"
step="1"
value={options.iterations}
onInput={this.onChange}
>
Iterations:
</Range>
</div>
)}
</form>
);
}
Expand Down
11 changes: 11 additions & 0 deletions src/features/encoders/oxiPNG/shared/meta.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const enum Deflaters {
libdeflater,
zopfli,
}

export interface EncodeOptions {
level: number;
interlace: boolean;
deflater: Deflaters;
iterations: number;
compressionLevel: number;
}

export const label = 'OxiPNG';
Expand All @@ -22,4 +30,7 @@ export const extension = 'png';
export const defaultOptions: EncodeOptions = {
level: 2,
interlace: false,
deflater: Deflaters.libdeflater,
iterations: 5,
compressionLevel: 11,
};
3 changes: 3 additions & 0 deletions src/features/encoders/oxiPNG/worker/oxipngEncode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,8 @@ export default async function encode(
data.height,
options.level,
options.interlace,
options.deflater,
options.iterations,
options.compressionLevel,
).buffer;
}
Loading