On most wikis, images and videos play an important part in helping to provide visuals to complement the written content. Several of the features on Wikia use these embedded images as a representation of that page in another setting.
Wikia's backend technology for selecting media from a page and modifying that media to fit various needs is called ImageServing. For example, Category galleries, Category exhibition, and Related pages (the "Read more" section at the bottom of article pages) all use ImageServing for selecting and displaying their thumbnails.
Today I am going to share with you an inside look to how ImageServing works. From time to time we like to highlight the technology we use to deliver your wiki to you and others quickly and efficiently. (Check out past posts such as Caching Explained, How Internationalization Works, and other Technical Updates posts).
How image selection works
The image chosen is generally the first image on the page that satisfies these criteria:
- Larger than 130px by 115px for use on category pages, larger than 200px by 100px for the related pages module. Note: the size on the 'File:' page is what counts, not how it displays on the page.
- Used 10 times or fewer on the wiki
- One of the first 50 used on the page
- Not an SVG
These rules help avoid using icons and logos that are used across the wiki. The limit of ten uses can be raised or lowered on request, if it is not working well for your wiki - just send us a note on Special:Contact, as we will look into it. Similarly, please do contact us if you feel valid images have been skipped by the technology without reason.
The 'first' image on the page is generally the one that comes first when the article's wikitext is scanned by the software, and it doesn't matter if the image has come via a template or isn't written in standard form.
When no valid image is found, a short snippet of text is generally taken from the page instead - the first bit of non-template text is used.
The ImageServing technology also deals with cropping media for the various purposes. It generally aims to fit as much as possible of the image into the available space, cropping the far edges if they extend too far.
As we continue to develop Wikia, it is likely the ImageServing technology will be added to more locations around the site.
If you have suggestions for other technical topics like these that you would like more insight on, please let us know in the comments below.
Want to receive updates on the latest Staff blog posts? Then click here to follow this blog.