Show large image size by default on mobile devices

[BrokenEagle]

Fixes #3493.

[BrokenEagle]

Per the conversation on Discord (05/04/2020, link), I changed this PR to avoid using a cookie.

I modeled this similarly to how post previews are rendered, i.e. using a picture element with 2 source elements.

One item of note, is that on my development instance, when in the desktop view, the image had a tendency to load twice, with the first being either a partial or a full image download. This was also seen when switching between desktop and mobile modes. Additionally, after I enabling cropped thumbnails, the double loading of images was seen in the index view as well. This behavior was only seen on Chrome, and searching the web, I see that that was an issue in the past.

https://stackoverflow.com/questions/33919840/why-does-the-picture-tag-download-an-image-twice

However, replicating the use of the same element structure on the Danbooru site, the same issue was not seen. I also tested it on Testbooru, and it wasn't seen there either. So it seems like that the production site is doing something that the development instance isn't? Or perhaps it could be something else, like the fact that the development instance is on a VM or using a private host IP?

So I'd recommend testing this on Testbooru first, just to make sure that the correct behavior is still seen, and after confirming that, rolling it out to the main site.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

No Coverage information
0.0% Duplication

[lllusion3469]

Apparently some people are really interested in being able to see the full resolution on mobile: https://danbooru.donmai.us/forum_topics/9127?page=307#forum_post_168268 (I commented on that specific problem here)

But if they had "Default image width" set to "original" it would

• still show the large size
• but not show the "view original" button on the top of the page, I'm fairly sure

So if this <picture> approach is kept, it might be desirable to display this link / message regardless of what "Default image width" is set to on mobile, maybe via css media queries(?)

Edit: possibly not even reusing the current message but creating a new one explaining that the large version is used one mobile with a link to the original which is maybe hidden using css on desktop

---

Edit: after actually thinking about it a bit, I'm not sure if I agree with not even having an option for this. Sure, you probably don't need some 4000x4000 original on mobile (though my phone can handle it just fine), but 1080p phones are not that uncommon nowadays (nor are phones that go even higher, like the galaxy s7 from 2015) and 850px vs 1080px (1440px) is probably noticable. Note that the 660px in the media query doesn't refer to actual pixels but to CSS pixels.

Edit: maybe <img srcset="..."> (maybe also the sizes="..." attribute) would be the better option? Here's an article explaining <picture> vs <img srcset="...">. MDN <img> documentation, MDN article "Responsive images".

I'm really not sure how this all works but the TL;DR seems to be: <source media> seems to be for when you want to tell the browser what it should choose (may not even be the same image); <img srcset="..."> is for letting the browser choose which image best to use based on some data you provide, viewport width, whether the user wants to save data etc.

But why's it referring to CSS pixels everywhere (except srcset with <width>w) when the actual screen dimensions should also have some relevance? We're talking about actual images that can't just be scaled after all.

[BrokenEagle]

If they want to see the full size, then they can just use the desktop mode instead.

[evazion]

Not having the "view original" link will be an issue. This will probably still require some Javascript to detect whether we're showing the sample or the original.

Client hints could potentially help here, but they're still experimental. Client hints let the browser tell the server what the screen width is with an HTTP header. This way we could tell server-side how big the screen is, and therefore which image to display.

We might also want to respect the Save Data header here. This indicates that the client want to save bandwidth, and therefore probably would want sample images even in desktop mode.