Image Optimization

In simpler terms: you want to downscale your images before hosting them on your website. This is to improve load times and to avoid eating up your visitor's bandwidth. It's an issue I notice a lot browsing the personal web, and definitely took a lot of reading and tinkering for me to figure out!

As I described in this old entry of mine, after hitting the 50GB neocities storage early into my gallery creation process, I ended up using Squoosh.app to (manually, one-by-one) optimize massively oversized images. For example:

It worked, but I have a lot of images to resize/convert into different formats and it took a lot of button presses. And I have to do each twice- first to downscale the full image into a more reasonable size, and second into a smaller, WebP image for my thumbnails. I really did not do my wrists any favours doing it this way for so long.

After deciding to finally remake my professional portfolio so I can cancel my squarespace subscription (awaiting the domain transfer code, then I'm set...), I finally learned the few terminal commands needed to batch convert image sizes and formats. It's so easy. I don't know why I felt so intimidated. This would have saved me tens of hours of repetitive actions!

Here's my process for batch resizing images:

Keep in mind that I use Linux Mint (Cinnamon), so the commands may differ if you use a different OS.

I also highly recommend you work on duplicates instead of the originals while you're trying this out (and always have backups), so you don't accidentally and permanently alter your original files. You can't undo.

Install ImageMagick
cd into the folder that contains the images you want to alter
```
cd /path/to/folder
```
Imagemagick transformations are done with the command mogrify. Some tutorials say to use "magick mogrify", but the "magick" part of the command didn't work for me. Use whatever works for you.
Format your command like this if you want to replace the originals:
```
mogrify [conversion commands go here]
```
Or, preserve the originals by specifying a different destination folder:
```
mogrify -path /different/folder/path [conversion commands go here]
```
Resize your images by using the option -resize. The way I use it is to set a standard width, like so:
```
mogrify -resize '1800' *
```
So, we have the option to -resize, a specified pixel width of '1800', and we use * to indicate we want all image files to be converted.

There are many ways of resizing images, but this is my preferred method. I use this command to make my full images more reasonable in size.
Convert from one file format to another by using the option -format. We can target certain filetypes like so:
```
mogrify -format webp '*.png' '*jpg'
```
Here, we've set our desired format output as webp, and specified that we want to target any files which are currently '*.png' or '*.jpg' format.
I string these options together to create my thumbnails. I direct my output to create copies in a subfolder with ./thumbs, convert all JPGs & PNGs to WebP, and finally resize those images to a width of 750px.
```
mogrify -path ./thumbs -format webp '*.png' '*.jpg' -resize '750' *
```
If you ever need to transform one or more specific files, simply type 'the-file-name.png' instead of using an asterisk.