4a6ae349ec

Design

(Linux tutorial) Script to batch convert images to WebP for smaller file sizes.

One important thing I forgot to mention in this tutorial... Please, consider donating to FFMPEG, it's a free and open source project so powerful that a lot of software uses FFMPEG as part of their functionality.

Here's a link to their page:
https://ffmpeg.org/

Ok, this is a second tutorial/tip for those of you who work on Linux and want to keep things neat…

Sometimes, when I work with other people for diferent design projects (mainly 3D animation) I get lots of folders with textures for the 3D assets and scenes we're working with… Almost always, those texture images are PNGs or JPGs and I can't convert them to other better formats (like WebP) because I would mess up the 3D files, which are already set up to look for PNG or JPG files.

In those cases I do what I'm about to share here… I optimize all the image files. This is a "lossless" process (files don't lose visual quality) and you can still get small savings in file sizes. We're talking an average of 10% or 20% at most; but when we're talking about several hundreds of MB and sometimes even GBs, 10% or 20% can make a noticeable difference, especially when you have to download or upload those files across multiple computers.

So let's begin… Unlike the previous tutorial, this time we will need 2 programs for this to work (both of them free and open source). One of them is called **"oxipng"** and the other one is called **"jpegoptim"**.

To install these apps, look on your distro's repositories and search how to install them. For my distro (Arch based) I install them with:

`sudo pacman -S oxipng jpegoptim`

Ok, now we're ready! Just like with the previous tutorial, this script will automatically optimize all JPG and PNG images inside a folder. Normally, I just replace all files automatically, but the version of the script I'm sharing here creates a new folder called "optimized" and makes a copy of all the images that are going to be optimized. The original, unoptimized images outside won't be touched.

Let's suppose the folder you want to optimize is in `"/home/user/pictures/"`, the script will look like this:
```
input_folder="/home/user/Pictures/" ; cd "$input_folder" && mkdir -p optimized && cp -u "$input_folder"/* "$input_folder"/optimized/ 2>/dev/null ; cd optimized && find -type f -iname "*.png" | xargs -P2 -I{} oxipng -r -o 5 -i 0 -a --nb {} ; find -type f -iname "*.jp*g" | xargs -P8 -I{} jpegoptim -s {}
```

This is like the previous tutorial I wrote ( https://stacker.news/items/1015187/r/4a6ae349ec ), remember, the only important thing you need to change is the first part, which is the folder you want to optimize… If the folder you want to optimize is something like `"/home/user/work/textures/"`, then the script will begin with:

`input_folder="/home/user/work/textures/"`

And the complete script now would look like this:
```
input_folder="/home/user/work/textures/" ; cd "$input_folder" && mkdir -p optimized && cp -u "$input_folder"/* "$input_folder"/optimized/ 2>/dev/null ; cd optimized && find -type f -iname "*.png" | xargs -P2 -I{} oxipng -r -o 5 -i 0 -a --nb {} ; find -type f -iname "*.jp*g" | xargs -P8 -I{} jpegoptim -s {}
```

Again, just like with the previous tutorial, I did a test on one folder with a bunch of PNGs and JPGs inside, the folder was **756 MB** in size, after running the script, the "optimized" sub-folder with all the optimized images was **636 MB**, that's around a **16%** size reduction. Not bad considering this method is visually lossless and keeps the original formats of the images (PNG or JPG).

One final word (that I forgot to mention in the previous tutorial... Ill add it as a comment in a moment)… Just like you help me with your awesome zaps, consider donating to all these fantastic free and open source projects. Here are the links to their repositories:

oxipng:
https://github.com/oxipng/oxipng

jpegoptim:
https://github.com/tjko/jpegoptim

Feel free to comment or ask anything!

(Linux tutorial) Script to batch optimize images inside folder to save space

**(UPDATED TO CORRECT FORMATTING)**

We all know and use JPG images almost in a daily basis and the quality/filesize is remarkably good. However, there are newer file formats that are even better at retaining perceived image quality with smaller file sizes; one of those image formats is called WebP. This image format has been around for more than a decade already and is supported by most image viewers and web browsers today.

You can use WebP to store images in your computer and you can also use it for your web page to make them load faster since file sizes can be almost 50% less than a JPG with the same quality… By the way, WebP has a huge advantage over JPG, WebP supports alpha channel (transparency) and the resulting image can my much, much smaller than a PNG image (depending on the content).
So… let's say you have a folder with 50 photos of your last trip to the Bahamas, but each image is 10MB, so that entire folder is 500MB! Or maybe you're creating a webpage or blog and all the images and graphics make the page a bit too slow to load…

There are dozens of programs to convert images from one format to another, but some of those programs are paid, others are free but with limited functionality and others are not even available for Linux… As a graphic designer using Linux for more than 10 years, I've learned that the best tool to convert images/video/sound is FFMPEG through the Linux Terminal. Most linux distros (options) today come with FFMPEG installed, so in theory, you just need to open the Terminal and type the commands.

So let's begin!… Let's say the images you want to convert are inside a folder called "Pictures" which is located in `"/home/user/Pictures/"`… The command to convert all the images inside that folder will be:
```
input_folder="/home/user/Pictures/" ; cd "$input_folder" && mkdir -p webp && cp -u "$input_folder"/* "$input_folder"/webp/ 2>/dev/null ; cd webp && find -type f -iregex '.*\.$png\|bmp\|jpeg\|jpg$$' | xargs -P8 -I{} -exec sh -c 'for f; do ffmpeg -i "$f" -c:v libwebp -lossless 0 -compression_level 6 -qscale 80 -preset default -y "${f%.*}".webp ; done' _ {} ; find -type f -iregex '.*\.$png\|bmp\|jpeg\|jpg$$' -exec rm -rf {} +
```

I know this might look intimidating, but for 99% of cases, the only thing you'll have to worry about is the very fist part of the script, the part that says:

`input_folder="/home/user/Pictures/"`

Here you will only change/update the direction of the folder you want to work with… So for example, let's say the images you want to convert are in `"/home/user/GraphicDesign/Work/Assets/Project Photos/"`, well the script will begin with:

`input_folder="/home/user/GraphicDesign/Work/Assets/Project Photos/"`

And the rest is exactly the same, so everything will look like this:
```
input_folder="/home/user/GraphicDesign/Work/Assets/Project Photos/" ; cd "$input_folder" && mkdir -p webp && cp -u "$input_folder"/* "$input_folder"/webp/ 2>/dev/null ; cd webp && find -type f -iregex '.*\.$png\|bmp\|jpeg\|jpg$$' | xargs -P8 -I{} -exec sh -c 'for f; do ffmpeg -i "$f" -c:v libwebp -lossless 0 -compression_level 6 -qscale 80 -preset default -y "${f%.*}".webp ; done' _ {} ; find -type f -iregex '.*\.$png\|bmp\|jpeg\|jpg$$' -exec rm -rf {} +
```
You'll just have to paste the script in the terminal, hit Enter and watch the magic happen.

As an example, I have a folder with several photos for a web page, some images are in JPG and some in PNG; the folder is 756MB… When I run the script, it creates a "webp" sub-folder and puts the converted images inside. That folder contains all the images but now in WebP format (without touching the original images outside, don't worry).

Now the webp folder is just 48MB!

Like I said, this script should work in 99% of cases.

I can explain everything in the script so you can adapt it to your need, but to keep this post digestable, I'll leave it here.

Feel free to comment or ask any question!

deleted by author

OHH, I just found an error in the script that can cause problems. I don't see a way of editing the post, but please, don't try the script yet. If I have to remove this post and repost, I'll have to do it, but I dont want to keep the script as is. Let me see if I can edit the post first.

I'm glad you found it helpful. I hope it works flawlessly for you. Let me know if you have any problem or question... I'm new here, but if I get good feedback, I'll post more design tips and tutorials, :)