Page MenuHomePhabricator

Optimize images downloaded in the mobile image viewer carousel
Closed, DeclinedPublic

Description

The mobile image viewer is JavaScript-only and could render images that are either tailored to the device screen viewing them or just limit their widths to a sensible value for mobile. Doing so would greatly improve the download rate of images at the expense of image quality.

The current implementation downloads images that can greatly exceed the device's screen dimensions and are rather large files. For example, on my 1920 px x 1200 px desktop, the carousel can easily download images in excess of 1.5 megabytes and 2500 px wide. This current approach does not seem very mobile friendly for poor cellular connections.

This ticket tracks first spiking on defining how to optimize image downloads and identifying any concerns, then doing the actual work.

Acceptance criteria

  • The maximum image size should be limited to ____px.
  • On screen resolutions greater than the image size, the image should not be stretched.

Event Timeline

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptDec 3 2018, 3:18 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@alexhollender quick question for you - if we limited these image sizes what should it be?
Given the skin is restricted to a maximum width of 1000px it seems like 2000px would be more than enough, but we might want to go lower.. thoughts?

The plan is to eventually migrate MultimediaViewer to Vue.js and use that in the mobile site instead of the current solution. We plan no further work on the existing feature, unless it works towards that goal. Please follow T249431 for updates.