#picture #html5 #convert-images #convert #image #wepb #optimization

bin+lib html5-picture

Batch optimizes your images to wepb. Generates html5 picture tags.

10 releases

0.2.2 Jan 8, 2022
0.2.1 Sep 8, 2021
0.1.1 Jun 23, 2021
0.0.5-rc.1 Mar 7, 2021
0.0.5-alpha Feb 14, 2021

#977 in Images

27 downloads per month

MIT license

49KB
1K SLoC

html5-picture

Batch optimizes your images to cwepb. Generates html5 picture tags.

Under development. Please have a look into the docs.rs documentation for now.


lib.rs:

The documentation is still a work in progress, so if you have questions, you are welcome to create an issue. :-)

Purpose

Supports the binary within this package. Contains functions to easily generate different sizes of a picture that can be used on webpages. Also offers the possibility to convert them into webp format and is able to create <picture> tags for the given images.

Currently this crate is only capable of converting png files to webp using cwebp. So make sure that webp is installed on your computer.

Installation

The binary can be installed via cargo install html5-picture. As stated before, make sure webp is installed before using.

Usage

Use html5-picture --help for an overview of all parameters.

Examples

Conversion with three scales and 70% quality

If you want to create three different sizes of the images in ./assets with a conversion quality of 70%, enter the following command:

html5-picture ./assets 3 -q 70

This will convert your images and save them to ./assets-html5picture. This folder is also the working directory make sure to not modify it while the application is running.

Conversion with given installation folder

If you pass -i <folder_name> as parameter, the resulting files are moved from the working directory to the given <folder_name> after conversion and scaling.

html5-picture ./assets 3 -q 100 -i ./assets-build

In this example the images are installted to ./assets-build.

Force overwriting

Using the -f or --force-overwrite flag will overwrite existing webp or HTML5 picture tag files.

html5-picture ./assets 3 -q 100 -i ./dist -f

Writing picture tag files to disk

With the -p option, it is possible to save the <picture> tags to disk. However it is recommended to use it in combination with -m, which sets the mountpoint in your tag files for you.

html5-picture ./assets 4 -i ./dist -p ./html5-tags -m /some/web-server/mountpoint

Read input files by JSON

Upcoming feature. The pictures can be defined using JSON format. html5-picture will read it from stdin. This enables definition of all attributes such as alt per image.

Dependencies

~20–30MB
~401K SLoC