Common thumbnail sizes

From mediawiki.org

MediaWiki stores thumbnails indefinitely, so using lots of different thumbnail sizes can result in lots of storage taken up by thumbnails. This page is an attempt to coordinate to use common sizes (and as a first step, document existing usage patterns). Unless otherwise noted, the sizes mean width in pixels.

Note that this is about thumbnail sizes requested from the backend, not visual sizes.

Relevant configuration settings[edit]

  • $wgUploadThumbnailRenderMap : Sizes pre-rendered on upload. Default: none; Wikimedia: 320, 640, 800, 1024, 1280, 1920
  • $wgThumbLimits : In-article thumbnail sizes available as user preference. Default: 120, 150, 180, 200, 250, 300; Wikimedia: 120, 150, 180, 200, 220, 250, 300, 400
    • $wgDefaultUserOptions['thumbsize']: thumbnail size used in articles when the size is not specified in the wikitext and the user has not set their preference. Default: 5 (300px); Wikimedia: 4 (220px)
  • $wgResponsiveImages : Whether to provide alternative image sizes for high-DPI displays. When enabled, article thumbnails, galleries, and images on file pages will have an srcset with 1.5x and 2x of the original size. Default: true, Wikimedia: same
  • $wgThumbUpright : Scaling factor applied to the $wgThumbLimits value for thumbnails where the upright wikitext option is used. Default: 0.75 (225px), Wikimedia: 0.75 (165px)
  • $wgGalleryOptions : Image sizes in galleries (when not overriden in the <gallery> tag). For traditional galleries, the imageWidth and imageHeight options are used as a bounding box to determine physical thumnail size; for mode="packed" galleries, width is ignored and imageHeight * 1.5 is used. Default: none (does that mean falling back to $wgThumbLimits?); Wikimedia: 120x120
  • $wgImageLimits : File description page image sizes available as user preference; also used for the list of download links under the image. Values are bounding boxes. Default: 320x240, 640x480, 800x600, 1024x768, 1280x1024, 2560x2048; Wikimedia: same.
    • $wgDefaultUserOptions['imagesize']: Image size used on file description pages when the user has not set their preference. Default: 2 (800x600), Wikimedia: same
  • $wgThumbnailBuckets : Intermediary thumbnail sizes to use to speed up thumbnail rendering (automatically generated when the image is first thumbnailed). Default: none, Wikimedia: 1920 (not sure Thumbor uses it though)

Applications[edit]

  • Thumbnails in articles: per above, usually 300px + 450px + 600px with MediaWiki default settings and 220px + 330px + 440px on Wikimedia sites. (See T51357 about increasing it.) For upright images, 225px + 338px + 450px by default, 165px + 248px + 330px on Wikimedia sites. Common manually specified Wikipedia image sizes: 20px or 40px for icons, 23x15px for flags.
  • Galleries: On Wikimedia sites, 120px for traditional galleries. Can be anything for packed galleries as they are height-constrained.
  • Images on file description pages: 800px + 1200px + 1600px (or it could be anything if the image has smaller than 4:3 aspect ratio).
  • Images in the file history of description pages: 120x120px (whichever side is bigger)
  • Images in Galleries of Special:NewFiles, Special:Search etc, 120x120px (whichever side is bigger)
  • Image download links: 320px, 640px, 800px, 1024px, 1280px, 2560px (for most images, depending on aspect ratio, as above)
  • Codex thumbnail component: 40px
  • MediaViewer: hardcoded set of width buckets: 320, 800, 1024, 1280, 1920, 2560, 2880
  • Page previews: 320px or 640px (depending on the resolution)
  • Search dropdowns:
  • Extension:VisualEditor:
    • Link preview (ve.init.mw.LinkCache): 80px
  • Wikibase: standard MediaWiki thumbnail sizes (?)
  • GrowthExperiments:
    • Impact module article icons: 40px, to match Codex thumbnail component size
    • Task cards: 260px on mobile, 332px on desktop (?)
    • Link recommendation dialog: uses ve.init.mw.LinkCache
    • Image recommendation thumbnail: uses MediaWiki thumb size on desktop, screen width capped to 500px on mobile
    • Image recommendation dialog: 120px or 160px depending on screen size
    • Image recommendation dialog, fullscreen image preview: screen size
    • Image recommendation save dialog: 226px on desktop, screen size on mobile
  • Toolhub: 40/60/80px, 50/75/100px, 100/150/200px (depending on viewport resolution)
  • To do: MobileFrontend search, mobile thumbnails (MobilePage::SMALL_IMAGE_WIDTH/TINY_IMAGE_WIDTH?), mobile image viewer, Special:Search snippets, Special:MediaSearch, probably a bunch of VisualEditor things, MediaViewer download/embed links, mobile apps; FullSearchResultWidget::THUMBNAIL_SIZE, SearchResultThumbnailProvider::THUMBNAIL_SIZE; see if any of these support srcset

See also[edit]