diff options
| author | Sebastiano Tronto <sebastiano@tronto.net> | 2023-03-06 22:24:32 +0100 |
|---|---|---|
| committer | Sebastiano Tronto <sebastiano@tronto.net> | 2023-03-06 22:24:32 +0100 |
| commit | 5b4f601fc74a1ed607fb93fea7cabc4cc3a1f5ba (patch) | |
| tree | 1c58a774c46705ca0da707b85d60749d59b6707a /src/blog/2023-03-06-resize-pictures | |
| parent | 3579773d924c2866f6a1663fc34c4d3694ac1df2 (diff) | |
| download | sebastiano.tronto.net-5b4f601fc74a1ed607fb93fea7cabc4cc3a1f5ba.tar.gz sebastiano.tronto.net-5b4f601fc74a1ed607fb93fea7cabc4cc3a1f5ba.zip | |
Resized images + blog post
Diffstat (limited to 'src/blog/2023-03-06-resize-pictures')
| -rw-r--r-- | src/blog/2023-03-06-resize-pictures/resize-pictures.md | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/src/blog/2023-03-06-resize-pictures/resize-pictures.md b/src/blog/2023-03-06-resize-pictures/resize-pictures.md new file mode 100644 index 0000000..c28340f --- /dev/null +++ b/src/blog/2023-03-06-resize-pictures/resize-pictures.md | |||
| @@ -0,0 +1,86 @@ | |||
| 1 | # Resizing my website's pictures with ImageMagick and find(1) | ||
| 2 | |||
| 3 | I have noticed that most of the pictures I have uploaded on this website | ||
| 4 | are incredibly large: | ||
| 5 | |||
| 6 | ``` | ||
| 7 | $ du -h -d 1 sebastiano.tronto.net | ||
| 8 | 42M sebastiano.tronto.net/gemini | ||
| 9 | 42M sebastiano.tronto.net/http | ||
| 10 | 42M sebastiano.tronto.net/src | ||
| 11 | 100M sebastiano.tronto.net/.git | ||
| 12 | 225M sebastiano.tronto.net | ||
| 13 | ``` | ||
| 14 | |||
| 15 | Stupid modern phones and their multi-megapixel cameras! | ||
| 16 | I definitely do not want my minimalist blog to waste your bandwidth, | ||
| 17 | I have to fix this. I could just go through all my pictures and resize | ||
| 18 | them with something like [gimp](https://www.gimp.org/) - there are like | ||
| 19 | 10 of them. But that's boring. Let's do it with the command line instead. | ||
| 20 | |||
| 21 | ## ImageMagick | ||
| 22 | |||
| 23 | The obvious question is: how do we even edit an image file | ||
| 24 | with the command line? Luckily, there is a tool for that: | ||
| 25 | [ImageMagick](https://imagemagick.org/). This piece of software | ||
| 26 | does a ton of things, and I do not use it very often. So I always | ||
| 27 | need to look up what I want to do. | ||
| 28 | |||
| 29 | One way to invoke ImageMagick is by calling the `convert` command, | ||
| 30 | which can take a | ||
| 31 | [`-resize`](https://imagemagick.org/script/command-line-options.php#resize) | ||
| 32 | option, followed by a | ||
| 33 | [`geometry`](https://imagemagick.org/script/command-line-processing.php#geometry) | ||
| 34 | argument. After checking the online manual, I understood that the | ||
| 35 | command I was looking for was: | ||
| 36 | |||
| 37 | ``` | ||
| 38 | $ convert picture.jpg -resize "750>" picture.jpg | ||
| 39 | ``` | ||
| 40 | |||
| 41 | which resizes `picture.jpg` by scaling it down to at most 750px width - | ||
| 42 | keeping the ratio between width and height, and leaving it untouched if it | ||
| 43 | is already smaller. The value 750 was chosen after a couple of attempts, | ||
| 44 | it seems a good compromise between quality and size. | ||
| 45 | |||
| 46 | And now I just have to do this for all the pictures. Of course, running | ||
| 47 | the same command 10 times with a different argument is out of question. | ||
| 48 | |||
| 49 | ## find(1) | ||
| 50 | |||
| 51 | *(No "man page reading club" this time, but don't | ||
| 52 | worry, the series will be back soon.)* | ||
| 53 | |||
| 54 | A standard UNIX command, [`find`](https://man.openbsd.org/find) allows | ||
| 55 | you to scan a folder for files with certain properties (for example, | ||
| 56 | a certain name pattern) and perform actions on them (for example, | ||
| 57 | running a command). The OpenBSD and GNU versions of find have some | ||
| 58 | differences, check your local manual page. The commands I use | ||
| 59 | here have been tested on the GNU version, but should be standard. | ||
| 60 | |||
| 61 | To look for file and simply print their name, we can use `-name`: | ||
| 62 | |||
| 63 | ``` | ||
| 64 | $ find src -name \*.jpg -or -name \*.png | ||
| 65 | src/me.png | ||
| 66 | src/favicon.png | ||
| 67 | src/speedcubing/cubing.png | ||
| 68 | src/blog/2023-01-28-windows-desktop/settings.png | ||
| 69 | src/blog/2023-01-28-windows-desktop/tiling.png | ||
| 70 | src/blog/2022-09-10-netbooks/darkstar.jpg | ||
| 71 | src/blog/2022-09-10-netbooks/final.jpg | ||
| 72 | src/blog/2022-09-10-netbooks/scramble.jpg | ||
| 73 | src/blog/2022-09-10-netbooks/hd.jpg | ||
| 74 | src/blog/2023-02-25-job-control/jobs-diagram.png | ||
| 75 | src/blog/2022-12-30-blog-ready/pc-planner.jpg | ||
| 76 | ``` | ||
| 77 | |||
| 78 | Now we can use `-exec` to run a command on each of these files, | ||
| 79 | using `{}` to refer to the file's name: | ||
| 80 | |||
| 81 | ``` | ||
| 82 | find src \( -name \*.jpg -or -name \*.png \) -exec convert {} -resize "750>" {} \; | ||
| 83 | ``` | ||
| 84 | |||
| 85 | We get a couple of warnings about grayscale images, but whatever. | ||
| 86 | This seems to have worked. | ||
