My tool Wikidata Image Positions embeds an image from Wikimedia Commons; as it’s sometimes used with rather large images, I also want to include a scrset
attribute on the image so that users on smaller displays don’t have to load the full-size image.
Currently, it’s implemented like this:
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}"
srcset="https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}?width=320 320w,
https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}?width=640 640w,
https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}?width=1024 1024w,
https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}?width=1280 1280w,
https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}?width=1920 1920w,
https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}?width=3840 3840w,
https://commons.wikimedia.org/wiki/Special:FilePath/{{ image_title_ }}?width=4096 4096w">
(Where {{}}
is Jinja syntax and image_title_
is the title with spaces converted to underscores.)
This works, but is somewhat inefficient – as @Tgr pointed out in an answer to another question, using Special:FilePath
bypasses the cache and issues several redirects. The list of resolutions is also fairly arbitrary (I think I based it on enwiki’s list of common resolutions), and probably not server-friendly: if other places typically request thumbnails in other widths, then the thumbnails my tool requests probably don’t exist yet and will also take up extra disk space. And finally, going through Special:FilePath
prevents me from using cropperjs (the library used by CropTool), because that wants to load the image via JS, and the redirect responses don’t include CORS headers (only the image response does).
What should I do instead? I think I have two related, but separate problems:
- I need a list of resolutions (widths) for which thumbnails are likely to exist, which is shared with other places.
- I need a way to go from a file path and a list of resolutions (widths) to a list of corresponding thumbnail URLs.
For the list of resolutions, I thought I saw some API a while ago, but the closest I can find now are the imagelimits
in action=query&meta=siteinfo
(corresponding to $wgImageLimits
) – but those seem to be intended for something else, and don’t correspond to the “other resolutions” on an individual file’s page as far as I can tell.
For getting the URLs, I assume the canonical way to do it is action=query&prop=imageinfo&iiprop=url&iiurlwidth=PIXELS
, but that would mean I would have to make one API request per resolution. Alternatively, I can try to compute the URL directly (it’s based on the MD5 hash of the file name), but as @Tgr points out in another reply this can be fragile. Or I could merge the two approaches, and ask the API for one thumbnail URL and then replace the pixel number inside it to get the other URLs? But that would still require a lot of assumptions about the URL format, so I’m not convinced this would be any better than just creating the URL from scratch.