Skip to content

Commit

Permalink
Small changes to readme. Minor print ln changes based on filetype
Browse files Browse the repository at this point in the history
  • Loading branch information
adrianboston committed Nov 29, 2021
1 parent 4ad12cb commit 48b6658
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 14 deletions.
40 changes: 29 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

## SYNOPSIS

`./srset [-rjnzh] [-q quality] [—t type] [-s sizes] [-o out path] filename`
`./srset [-rjnvzh] [—t type] [-s sizes] [-o outpath] filename`

`./srset [-rjnzh] [-q quality] [—t type] [-s sizes] [-o out path] file hierarchy`
`./srset [-rjnvzh] [—t type] [-s sizes] [-o outpath] file hierarchy`

## DESCRIPTION

Expand All @@ -18,10 +18,12 @@ The options are as follows:

-r **recurse** the provided directory. ignored for single file.

-o an **output** directory for the resized image. Otherwise the files are saved to the directory of the specified input file path. defaults to /`tmp/srcset/`
-o an **output** directory for the resized image. defaults to /`tmp/srcset/`

-t the **type** of image conversion (png, jpg, ... ); defaults to the same type as the original image found in the input path.

-m the minimum size of image that will be processed; otherwise an image will be skipped. Ignored for single files. Specifed in Kilobyes. The default is `50`.

-s the sizes tag used in the **srcset** image tag. defaults to `(min-width: 768px) 50vw, 100vw`

-j whether to use parallel or threaded **jobs** on image conversion.
Expand All @@ -30,27 +32,34 @@ The options are as follows:

-z run a test or dry run. File paths are traversed but no images are generated and no new file path is created. The `<img>` markup will be generated to the console.

-v use verbose output.

-h display the help.

## The problem
## THE PROBLEM

Generating multiple responsive images using Photoshop, Lightroom or other GUI application is an irksome task for opposable-thumbed humans. Further, the needed `<img>` tag referencing multiple images in the `srcset` attribute is long and tedious to generate. On the other hand, the sweet RUSTy *srcset* is a generator that can be be easily added into a automated build workflow. And that long `<img>` tag with the full set of `srcset` images is the standard output which can then be dropped into the target html file(s).

In addition and of interest, *srcset* permits the use of an image in its largest and highest resolution format TIFF format -- that is often the second step after Nikon, Canon and other 'raw' native formats -- from which `convert` can generate the final HTML-ready images. Or you can stick with the tried JPEG, PNG and GIF.

## Background
## BACKGROUND

Images are important UI/UX aspects but usually the largest payload of a web site or page. As it turns out, speed is User Experience too. Google suggests that a web page load in under 3 seconds or users will abandon the site. Amazon correctly measures this in amount of dollars lost per second. With Mobile the situation is aggravated: the connection is slower and expensive; users are even more likely to abandon the site.

In comes the HTML5 `srcset` attribute to help, whether Mobile or desktop Web. The html `<img>` tag takes an optional set of images that should be scaled versions of the original. The Mobile or Web browser selects an image given its current width and resolution capabilities. 'srcset' recommends images that don't waste expensive Mobile bandwidth yet provide a image suitable for the device's resolution. In desktops the browser will select an image based on its current width (opposed to the device's width). In other words, the `srcset` attribute permits the use of an image that is not too big yet not too small. The `srcset` attribute is ignored and `src` is used in legacy browsers.

## Functions
## USE

`srcset` is built using Rust known for its speed plus it leverages modern multi-core architectures. Use the `-j` directive to turn on parallel jobs.

`srcset` requires a file path, whether filename or file hierarcy. If a filename, that single file will resized. If a file hierarchy, the files within that directory will be resized. Specifying the option `r` it will walk the file hierarchy resizing any found images.

The utility resizes each image using the same compression as the original image; however, specify the desination type using the `-t` directive. *srcset* permits the use of an image in TIFF format -- that is often the second step after Nikon, Canon and other 'raw' native formats -- from which `convert` can generate the final HTML-ready images. Or you can stick with the tried JPEG, PNG and GIF.

`srcset` requires a file path, whether filename or file hierarcy. If a filename, that single file will resized. If a file hierarchy, the files within that directory will be resized. Specifying the option, `r` the utility will walk the file hierarchy resizing any found images.

The resized images are held into their own file directory; the name of the directory matches the original file. The name of each resized image contains the width of the image and placed into the directory. The original file is copied and renamed to `legacy`. For example, given an image named `my_image` the following directory will be constructed.
Due to the large number of resized images, they are organized into a file structure. The name of the directory matches the original file. The name of each resized image contains the width of the image and placed into the directory. The original file is copied and renamed to `legacy`. For example, given an image named `my_image` the following directory will be constructed.

```
srcset my_image.jpg
- my_image/
legacy.jpg
320w.jpg
Expand All @@ -63,8 +72,17 @@ The resized images are held into their own file directory; the name of the direc
1440w.jpg
```

The file hierarchy makes it easy to handle the large number of resized images required by the srcset tag.
The resulting tag is:

```
<img src="my_image/legacy.jpg" srcset="my_image/320w.jpg 320w, my_image/480w.jpg 480w, my_image/640w.jpg 640w, my_image/768w.jpg 768w, my_image/960w.jpg 960w, my_image/1024w.jpg 1024w, my_image/1280w.jpg 1280w, my_image/1440w.png 1440w" sizes="(min-width: 768px) 50vw, 100vw" alt="A file named my_image">
```

Warnings and erros can be piped into a file to avoid cluttering the console. The most common warning is skipping a file due to its small size less than the `-m` directive.

srcset examples/simple/test.png 2>srcset.err

As a safeguard against specifying a previously scanned directory, `srcset` will skip over any files named `legacy`, `320w`, `480w`,.... `1440w`.


### Useful Resources
Expand Down
15 changes: 12 additions & 3 deletions src/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ use std::path::{Path, PathBuf};
struct ProgOptions {
inpath: PathBuf,
outpath: PathBuf,
is_file: bool,
extension: String,
sizes: String,
is_recurse: bool,
Expand All @@ -33,6 +34,8 @@ fn main() {
// The defaults!
let mut inpath_str = "".to_string();
let mut outpath_str = "/tmp/srcset/".to_string();

let mut is_file = false;
let mut extension = "".to_string();
let mut sizes = "(min-width: 768px) 50vw, 100vw".to_string();
let mut is_recurse = false;
Expand Down Expand Up @@ -111,15 +114,17 @@ fn main() {
if inpath.is_file() {
is_nested = false;
is_recurse = false;
is_file = true;
}

let outpath = PathBuf::from(&outpath_str);
if outpath.is_file() {
println!("Selected outpath cannot be a file.");
std::process::exit(1);
}


let prog_options = ProgOptions{inpath: inpath, outpath: outpath, extension: extension, sizes: sizes, min_size: min_kb * 1024, is_recurse: is_recurse, is_jobs: is_jobs, is_nested: is_nested, is_test: is_test, is_dir: true, is_verbose: is_verbose};
let prog_options = ProgOptions{inpath: inpath, outpath: outpath, is_file: is_file, extension: extension, sizes: sizes, min_size: min_kb * 1024, is_recurse: is_recurse, is_jobs: is_jobs, is_nested: is_nested, is_test: is_test, is_dir: true, is_verbose: is_verbose};

let inpath = Path::new(&inpath_str);

Expand Down Expand Up @@ -206,8 +211,12 @@ fn process_image(path: &Path, prog_options: &ProgOptions) -> anyhow::Result<()>
// `open` returns a `DynamicImage` on success.
let img = image::open(path)?;

println!("<< {:?}", path.strip_prefix(prog_options.inpath.as_path()).unwrap());

if prog_options.is_file {
println!("<< {:?}", path);
} else {
println!("<< {:?}", path.strip_prefix(prog_options.inpath.as_path()).unwrap());
}

let wh = img.dimensions();
let (w,h) = wh;

Expand Down

0 comments on commit 48b6658

Please sign in to comment.