Ensure that images are fetched at the appropriate resolution for the device's display density, in both the image carousel and the detail view.
Context
During prototype code review (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1196969), it was noted that the prototype generated thumbnail URLs by manipulating image.src without consulting image.srcset, which includes 2x density URLs. This could result in fetching blurrier images than necessary, especially at small physical sizes on high-density displays.
As we scale to production (T410786), this applies to:
- Carousel thumbnails (Minerva): need to display sharp thumbnails at the correct density
- Detail view (MMV beta viewer): the PoC includes thumbnailGuessing.js for responsive thumbnail URL rewriting, but should also account for srcset and known pre-rendered sizes
Requirements
- Ensure copying of both src and srcset (2x) attributes when reusing a live thumbnail, to ensure the proper density variant is loaded and displayed
- Ensure chosen sizes for images URLs are likely to be pre-rendered to avoid on-demand thumbnail generation
- either by reusing existing thumbnail URLs produced from the PHP side,
- or by sending the 1x-density URL into mw.util.parseImageUrl() + mw.util.adjustThumbWidthForSteps() -> info.resizeUrl() to match the PHP-side stepping logic
