mmcclenahan84 / ww1-project

Final project from our Digital Humanities class analyzing letters from WWI soldiers to see how the war impacted their mental and behavioral health
http://letters.obdurodon.org/index.xhtml
3 stars 0 forks source link

Use smaller background image #13

Open djbpitt opened 1 year ago

djbpitt commented 1 year ago

Your background image is 2.16M, which is large enough that it impinges on the load time of the site. I'd recommend saving a copy, resizing it, and using the smaller version. Here's some information that I shared with the Natasha project recently that might be relevant:

You want your image to be as small (in filesize) as possible without losing quality because small images load faster than large ones. There’s no magic cut-off, but, for what it’s worth, I try not to go above 200k unless I need to. The image dimensions (width, height), which affect filesize, depend on how you want it displayed (full-screen? smaller? thumbnail?), and 1600 pixels wide for a full-screen image is a reasonable ceiling.

You didn’t ask explicitly about these numbers, but they matter for the question you did ask, about image format, because in most cases you won’t see a difference among png, jpg, and webp (and those are the usual candidates) with your human eyeballs. If this were me, I’d try all three formats, look at them on a large, high-resolution monitor, eliminate any that look fuzzy, and choose the one with the smallest filesize. Webp is the newest of the image formats, and although it is well supported in all modern browsers (see https://caniuse.com/?search=webp), it may not work in older ones (for my own work I don’t cater to older browsers, but other developers might reasonably have different priorities).