Activate high-res splash page background image on high-density screens

[DeeDeeG]

Devices with standard "1x" density will still get the less-detailed image.

Right now only city-photo.jpg (the splash page image) has high-res alternate versions.

Context

• Fixes #335

Summary of Changes

• screens with 2x or greater (but less than 3x) density get the city-photo-2x.jpg asset
• screens with 3x or greater density get the city-photo-3x.jpg asset

Checklist

• [x] Tested Mobile Responsiveness
• [ ] Added Unit Tests
• [ ] CI Passes
• [ ] Deploys to Heroku on test Correctly (Maintainers will handle)
• [ ] Added Documentation (Service and Code when required)

Screenshots

Before

After

[mi-wood]

Each of these increases in size by a factor of 4. The splash page load times aren't great already. It'd be nice to go the other direction in download size since the image resolution isn't critical to the application.

[DeeDeeG]

I did think the filesizes were a bit large, so I made compressed versions of the assets. Not on GitHub anywhere yet (Edit: they are in the comment below now!), here are some numbers for how the original assets compare with the new compressed ones:

city-photo.jpg

• 321 KB, 1600 x 804 (original)
  • 322 KB, 2038 x 1024 (slightly improved visual quality and shows up better on tall screens, due to higher resolution)

city-photo-2x.jpg

• 1.03 MB, 3200 x 1608 (original)
  • 694 KB, 3758 x 1888 (better resolution, similar or better detail due to higher res + and moderate compression)

city-photo-3x.jpg

• 4.24 MB, 7516 x 3777 (original)
  • vs. choice of:
    • 1.82 MB, 7516 x 3777 (some banding in the blue sky, high quality)
    • 2.14 MB, 7516 x 3777 (less banding, some slight texture improvement)
    • 2.53 MB, 7516 x 3777 (very high quality, still a bit of banding in sky, but not much)
    • 2.83 MB, 7516 x 3777 (very high quality, not a big difference from source)

Edit: Adding some explanation of how this was done:

I noticed that city-photo-3x.jpg is a high-quality photo, probably straight from the camera SD card. This makes it easy to create high-quality smaller assets from it, by rescaling in GIMP. I then saved these out at 100% quality, to preserve all detail. Last, I ran through a variety of iterations of Mozjpeg (https://github.com/Mozilla/Mozjpeg) , to make sure they would compress efficiently.

I did subjective quality tests (I flipped back and forth in Firefox, zoomed in on details and stuff, mainly comparing against two compression quality levels I was deciding between, and also comparing against the original) to make sure the new images were as good as or better than the originals. My main strategy to keep the new images "better-looking" was to give them higher-resolution, but be willing to push compression to moderate levels, aiming to stop compressing right when artifacts became detectable, or when I felt they degraded subtle details of the image, when zoomed in.

I did also have file sizes in mind when doing this. (There are other ways of doing this, with only filesize as the main goal, and even lower filesizes could be achieved. There are diminishing returns, so I did want to try for a small win in visual quality at the same time as reducing filesize.)

Lastly, Mozjpeg includes a utility to find and remove extra data that doesn't affect the visuals (somehow??) and I ran this on each file as a last step, to save 1-5% more of the filesize.

/explanation

I would like to upload at minimum the new city-photo.jpg for your consideration, and perhaps we can also activate the 2x image if we are still being moderately conservative. Of course, I leave the call to activate them at all to the core maintainers.

[DeeDeeG]

New compressed assets comparison (click to enlarge)

City-photo.jpg

Original (321 KB)

New (322 KB, higher resolution) (+1 KB, but looks nicer on tall screens)

City-photo-2x.jpg

Original (1.03 MB)

New (694 KB, higher resolution) (-336 KB, looks better I think?)

City-photo-3x.jpg

Original (4.24 MB)

New (2.14 MB) (one of several options, we can compress more if subtle banding in the sky is alright) (This version saves 2.1 MB, almost 50% filesize savings)

[tkwidmer]

Lets go ahead and upload the compressed versions. I'm fine with that.

[DeeDeeG]

Full disclosure: I learned how to compress jpegs for the first time working on this. I found out afterward that I had been doing a compression technique that can add little bits of noise, like on the dome (see below):

It's to the point where I think some of the originals are nicer-looking. I'd like to try to see what I can get without using that noise-inducing technique, and still using compression. Might get better results.

I can...

• try re-working them, and then finish this PR with the best ones,
• commit these as-is, merge, then do the re-work in a separate PR,
• Just go with these as-is and be done.

Before:

After:

[mi-wood]

try re-working them, and then finish this PR with the best ones, commit these as-is, merge, then do the re-work in a separate PR, Just go with these as-is and be done.

I'll trust your opinion on how they look to you. If you think this is ready to merge, I'm happy to go ahead and do that.

[DeeDeeG]

Open to any opinions on these of course, but they're small, and look pretty nice. I'm pretty happy with them now.

Thanks for waiting!