Only banners from external partner span the full post width

[Hultner]

Problem

The new's-flow on Chalmers.it get a very jagged flow since the banners hosted on our internal banner is resized to rather small width of 500px, especially in todays climate where HighDPI & retina devices are commonplace. This limitation is not present for external hosts which can utilize the full width of the page. I.e. on my LG Ultrafine monitor the container 1373 physical pixels on the front page and 1274 pixels on following pages. Also I'm a bit sceptic to even allow external hosts unless they're on a tight list of approved such for privacy reasons (external tracking, mixed content, etc).

Example

Example showing the problem, in the first post the image hosted in imgur spans almost the full width while the second hosted on Chalmers.it roughly spans 1/3 of the div.

Mitigation

My suggestion is to remove this artificial limit and allow the pictures to be at least 1500px wide to accommodate for modern displays.

Further improvements

When investigating this issue I noticed some low hanging fruit

• Move media assets to another hostname (i.e. media.chalmers.it or static.chalmers.it)
  • Allows for more TCP-connections to open for faster connect
  • Browsers commonly limit to 6-8 per domain, old TCP-spec is even worse.
  • To improve even further you can add multiple sub-sub domains, commonly used at meda intense sites but might be overkill for chalmers.it
  • Improves latency as cookies which aren't used doesn't have to be sent with these requests
• Make sure only a tiny subset of known good external hosts are allowed
  • Also make sure these support https to avoid protocol mixing
• Lazy load images to improve bandwidth (may also be overkill for chalmers.it)

[lindskogen]

This is because we create thumbnails of all images being uploaded to the site. (See https://github.com/cthit/chalmersit-rails/blob/master/app/uploaders/article_image_uploader.rb#L30-L32). Also, the artificial limit is defined here as 1000x1000.

I agree with the "jagged" design comment though, so maybe we just remove thumbnail creation? Not sure that we need a separate media asset host? Good external hosts - I'm indifferent, but how do we communicate that some hosts are allowed and some aren't?

[Kalior]

Quick question: do we ever not use the thumb version of the images? It seems to me like we could skip the thumb (500x500) version altogether.

[Hultner]

Great @lindskogen! Seems like the thumbnail might be unnecessary, however I do see a point in sanitizing input images from unnecessary data and apply lossless compression.

The quickest solution to the main problem would be up the limit to something more sensible i.e. 1500px or 2000px (there's devices with device pixel ratio 3 I think, if not they're likely to be available soon) and remove the thumbnail version altogether unless it's strictly needed somewhere else.

For external hosts one solution could also be either always proxy them like github does or not allow them at all. Although maybe Chalmers.it might be too niche for someone to spend resources to exploit our external host support for tracking.

Another thing that would be really nice would be SVG support, which of course would need sanitizing from script-tags, but there must be a Ruby-library which can handle this?

As for separate media asset host I'm not meaning that we need another physical host as the only thing used to limit connections is the domain/hostname so we could literary just use another subdomain alias to the same server, quite trivial approach. However it might be overkill if speed is not an issue.

[lindskogen]

Doesn't HTTP2 negate the need for multiple media domains, though?

[Hultner]

It does, it’s one of the mayor improvements but we aren’t really there yet. However that part is more as a side note to the actual issue here.