Squash images

[hugovk]

For #165 and #200.

Here's a script to thumbnail and compress the images. Let's see how these look.

# Install dependencies
pip3 install pillow
brew install pngquant

# Run
scripts/squash-images.sh

The PNGs in assets/ are displayed as:

max-height: 80px;
max-width: 160px;

So are thumbnailed to a max 160x80px with Pillow.

Then the PNGs in assets/ and img/ are compressed using pngquant.

What	How big	Percent of original
master	3,230,356 bytes (3.4 MB on disk)	100%
after thumbnailing	818,842 bytes (946 KB on disk)	25%
after compressing	615,377 bytes (721 KB on disk)	19%

[hugovk]

There's some slight differences caused by the CSS resizing and rounding, but I think it looks okay on the whole.

• https://python3statement.org/#sections30-projects
• https://deploy-preview-201--python3statement.netlify.com/#sections30-projects

The signac image didn't respond well to resizing, so I'll exclude that from the thumbnailing:

before	after

---

Scripts updated to exclude signac.png, and to only thumbnail images that exceed 160x80px.

What	How big	Percent of original
master	3,230,356 bytes (3.4 MB on disk)	100%
after script	875,298 bytes (979 KB on disk)	27%

• https://python3statement.org/#sections30-projects
• https://deploy-preview-201--python3statement.netlify.com/#sections30-projects

[takluyver]

Thanks! I was working on doing something similar, but I think your script looks neater.

One thing I would like to change, however: high resolution screens can render webpages with 2 physical pixels per CSS pixel. So I'd limit the images 320 x 160 instead of 160 x 80. Obviously this doesn't save quite as much data, but it keeps the logos looking nicer on high-res screens, and it's still a substantial saving (in my test, 3.3 MB to 1.3 MB).

(Presumably it's even possible to render >2 pixels per CSS pixel, but we have to draw the line somewhere)

Also, it sounds like pngquant does a potentially lossy compression. Is this something you know much about? Can you compare results from pngquant and pngcrush, which appears to focus on lossless compression.

[hugovk]

Sure, I'll update this to use 320 x 160px.

I don't know much about the differences between pngquant and pngcrush, but I'll make a second PR with pngcrush for comparison.

[hugovk]

With 320 x 160px:

What	How big	Percent of original
master	3,230,356 bytes (3.4 MB on disk)	100%
after script	1,036,938 bytes (1.2 MB on disk)	32%

[takluyver]

Merged #203.