Auto-Image Compression

[squidgetx]

I was thinking about small ways to improve loading times and general speed/responsiveness of Reservations, and I think there are a few things that we can do fairly easily (and some less fairly easily) to dramatically cut down on the amount of information served per page request.

• Minify JS on production deployment. Things like application.js go down from 10kb to 5kb. The compiled CSS is already minified.
• Reduce the number of items loaded on the front page. We should find out from users how they like to browse (do they like scrolling? is it so bad to just have... more pages? Also, this is getting into separate-issue territory but reorganizing the front page to make navigation by category easier would probably solve this as well..but that's complicated)
• Reduce the size of the images loaded. This falls into admin territory (sort of) but I noticed that (at least on the Art school instance) most of the images are pngs. If the admin uploaded only jpegs then it wouldn't really be an issue, but images like this are 30-40kb when they could be ~10kb with no noticeable difference in quality. The front page of the Art school instance has 50 items, at 30kb each that's 1.5mb just of images that needs to be downloaded to the browser. Yes, there's caching, but if those were jpegs then we'd be down to just 500kb. Possible solution: use something like this to automatically convert admin-uploaded images to jpegs.

My apologies if any of these issues have already been discussed but I couldn't find anything with a quick search

[orenyk]

Great ideas! I especially like the image conversion one; if we could easily add it into the uploading process so that admins wouldn't have to think about it at all that would be great. In terms of catalog navigation, we might want to have a UX brainstorming session later in the summer / interview our current users to get a sense of what the ideal home page / catalog would look like; I definitely think there's lots of room for improvement.

[squidgetx]

Renaming the issue, let's use this thread to focus on the image compression feature since changing the catalog layout is its own big thing and I think rails also auto minifies JS (sort of, it also fills it with a metric ton of comments)

Anyway, Casey suggested the smusher gem in Slack for lossless compression. It does everything over the cloud (also requiring http gem or something), which I'm sort of critical of. Also I was only able to get 8% compression or so on the test pngs generated by db:seed.

We already have imagemagick because of paperclip so we might as well use it; I doubt most users are going to be bothered by lossy jpg compression

[mnquintana]

The JS is minified already, although we could change the minify config to strip out comment too (I think block comments are untouched by default for license reasons).

I definitely agree that we should be compressing images, and that we should use ImageMagick to do it instead of adding an unnecessary cloud dependency.