How to Optimize Images For Web

tldr; convert to webp then compress

This is a fairly technical post, and the instructions are presented for *nix users. We will be taking a list of jpg files converting them to webp and then optimizing them with the website https://tinypng.com/.

Why

Let’s say you find a photo online and you want to use it on your website or you have a photographer come to your office and your deliverable is a large set of high resolution photos. It isn’t ideal to use that exact form of your photo on your website. WebP is an open source image format created by Google. You can read more about it here.

When you convert and compress your original image, decrease the size of the data the page loads, and increase the speed with which your page loads. This will in turn help your site’s SEO, since search engines prioritize pages that will give users a better experience.

Convert To WebP

There are many online converters, and many that work very well. However, they often come with daily limits, or force you to create an account just to convert your images. Plus, it’s always good to just be able to do things right from your own computer.

There are some open source packages that allow you to do the conversion right from your computer terminal. You can find the downloads right in Google’s Documentation.

I’m working on a Mac, so I installed with Homebrew.

After installing, you can successfully run this command:

cwebp -version

You should see:

Step 1

Here is the bash script that we will use to convert the photos with the package we just installed:

https://gist.github.com/copacetictech/0587de1de0835ca56e14ffbd203ab7bf

You can place this file anywhere you want, but you will have to make it executable after you have added it to your local machine.

chmod +x ~/path/to/file/convert-to-webp.sh

Step 2

Now you are going to change directories with the cd command into the new directory the script created, called converted.

cd ./converted

You can already see the benefits provided by the new format, and you can compare side-by-side using your favorite photo viewer, but you probably won’t be able to tell a difference.

Next, we are going to head over to TinyPNG.com, where we can register for a developer account for free. This will allow us 500 free image optimizations per month!

Go to: https://tinypng.com/developers

Look for the registration bar.

Once registered, you can navigate to:

https://tinify.com/dashboard/api

This will allow you to “Add API Key”. Go ahead and add one.

Then use that API Key in this command:

mkdir optimized-links && ls | while read line; do curl --user api:YOUR_KEY_HERE --output ./optimized-links/$line --data-binary @$line -i https://api.tinify.com/shrink; done;

You can read more about the Tinify API here.

Now cd into the new directory, which contains all the links to the photos that have been optimized by TinyPNG.

cd optimized-links

TinyPNG returns a JSON object for each photo you optimize. It typically looks something like this:

{
  "input": {
    "size": 435682,
    "type": "image/webp"
  },
  "output": {
    "size": 336236,
    "type": "image/webp",
    "width": 5184,
    "height": 3456,
    "ratio": 0.7717,
    "url": "https://api.tinify.com/output/some-random-hash"
  }
}

We are going to run a command to get all the download urls into one file, so we can iterate over them and download each one:

awk 1 ./* | grep "{" --color=never | jq .output.url > dloads.txt 

Now the urls are all in one file called dloads.txt and we can run one last command to download

mkdir completed && cat dloads.txt | sed -e 's/"//g' | while read line; do curl "$line" >> ./completed/$(uuidgen).webp;done;

You’re done!

Conclusion

We used cwebp and tinypng to get our photos ready for our website, and we did it for free!

The results were quite large for some beautiful photos:

Finished Products

also a helpful command

ls | while read line; do cwebp $line -o $(echo $line | sed -e 's/png/webp/'); done;