Image thumbnail improvements (dimensions, compression)

[zackkrida]

Problem

Currently on the frontend, there are two optimizations we could make with thumbnails:

• Thumbnails are 600px wide at their largest dimension; On the frontend thumbnails are rarely larger than 300px. Display size is a factor here, but one I need to test more.
• Thumbnails could benefit from some lossy compression. Using tinypng.com I was able to give this thumbnail:

https://api.openverse.engineering/v1/images/3fa11800-4907-43d0-9921-52ed5ddb22aa/thumb/

a 56% size reduction with minimal obvious visual differences:

GitHub may apply compression, I'm not sure, so you might want to run this test yourself.

before	after

Description

While images are pretty "cheap" for browsers, compared to something like JS, because they don't need to be parsed, and
we're employing lazy-loading in Openverse, this would not really effect the percieved performance of the site. Or if it did, it would likely de negligible. However, it would significantly improve the number of real bytes transferred to users, and that's always a wonderful thing.

This could be a good opportunity to give our thumbnail cache some basic sizing options, because then we could also use it on the single result pages, instead of hotlinking to our 3rd party providers.