A proposal to simplify and improve image markup in Wikipedia

Bryggen in Bergen is on the list of UNESCO World Heritage Sites.

Wikipedia articles are often illustrated by images. This study looks at the most common image type: the thumbnail images that are floated to the left or right side of the text. These images are accompanied by a textual caption underneath the image. By clicking on the thumbnail image, or on a small icon below the image, users are taken to a page showing a larger version of the image. The default width of thumbnail images is 180 pixels, but users may indicate a preference for other sizes (e.g. 200 pixels) in their account settings.

I have chosen one image from the article on Norway as a sample in this study. The image, with its caption, can be seen on the right side.

The wiki markup to add this image to a page is quite simple and measures only 153 bytes:

Current HTML code

When the wiki code is converted into HTML by Wikipedia's servers, it expands to this code which is sent to browsers:

Presented in a more structured way, the HTML code looks like this:

<div class="thumb tleft">
  <div class="thumbinner" style="width:182px;">
    <a href="/wiki/File:Bryggen_(6-2007).jpg" class="image" 
        title="Bryggen in Bergen is on the list of UNESCO World Heritage Sites.">
      <img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/
           e/e3/Bryggen_%286-2007%29.jpg/180px-Bryggen_%286-2007%29.jpg" 
           width="180" height="121" border="0" class="thumbimage" />
    </a>
    <div class="thumbcaption">
      <div class="magnify">
        <a href="/wiki/File:Bryggen_(6-2007).jpg" class="internal" title="Enlarge">
          <img src="/skins-1.5/common/images/magnify-clip.png" width="15" height="11" alt="" />
        </a>
      </div>
      <a href="/wiki/Bryggen" title="Bryggen">Bryggen</a> 
      in Bergen is on the 
      <a href="/wiki/List_of_World_Heritage_Sites_in_Europe" 
                 title="List of World Heritage Sites in Europe">
      list of UNESCO World Heritage Sites</a>.
    </div>
  </div>
</div>

The current HTML markup, as shown above, uses 10 elements and one style attribute. The code measures 899 bytes – more than a five-fold increase from the original wiki markup. There are several reasons why the code is bigger than the original:

• The code contains six URLs. One of the URLs is external, and therefore quite long. Two of the URLs are identical. The length of URLs in Wikipedia is worth a study of its own and will not be discussed here. Disregaring the URLs, the code takes up 569 bytes. All subsequent size comparisons in this paper disregard the URLs.
• The caption is included twice. Once as normal HTML text, and once in the title attribute of the thumbnail image. The latter is shown when the user hovers over the image. This may be considered a useful feature by some, and redundant by others.
• The code contains eight values on seven class attributes. Class attributes encode semantics and can also be helpful when reusing the content in different media. As such, the class names are helpful and not harmful. However, the number of class names can often be reduced without losing semantics.
• There is one presentational attribute, namely the style attribute which indicates the width of the element. Floating elements with textual content must be constrained in their width in order not to expand beyond the width of the image.

All in all, the HTML code is quite good. However, it can be reduced in size and the style attribute should be removed. In this study, I will present one proposed solution that shows how the code can be reduced in size. The strategy for doing so is twofold: remove redundancy and make CSS do more of the work. Also, several variations of the proposed solution will be discussed.

Proposed solution

I propose to use this HTML code instead of the current code:

<div class="thumb tleft w180">
  <a href="/wiki/File:Bryggen_(6-2007).jpg">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/
       Bryggen_%286-2007%29.jpg/180px-Bryggen_%286-2007%29.jpg" alt=""/>
  </a>
  <div class="caption">
    <a href="/wiki/Bryggen">Bryggen</a> in Bergen is on the 
    <a href="/wiki/List_of_World_Heritage_Sites_in_Europe" 
      title="List of World Heritage Sites in Europe">list of UNESCO World Heritage Sites
    </a>.
  </div>
</div>

Bryggen in Bergen is on the list of UNESCO World Heritage Sites.

This code uses 6 elements, no style attribute, and only takes up 239 bytes (compared with the 569 bytes in the current code). This represents a significant saving when multiplied with the number of images served by Wikipedia.

The presentation of the image, as can be seen on the right, is almost the same. The changes are:

• The width of the element is set on a class ("w180") instead of using a style attribute. Wikipedia offers thumbnail images in six different sizes (120px, 150px, 180px, 200px, 250px, 300px) and this number is low enough to use classes. The main benefit of using classes is that alternative style sheets can change the presentation, e.g., for printing purposes. The style attribute, on the other hand, can never be overridden.
• The magnifier icon has been removed. In the Wikipedia's current code, clicking on the magnifying icon has the same effect as clicking on the thumbnail image itself. I therefore consider the magnifier icon superfluous. (If you disagree with this, continue reading. The next two code proposals bring it back.) In the current code, the magnifier icon is represented by three elements that have been deleted in this the proposed solution.
• The caption is only shown once, as text below the image. The caption text will no longer pop up when the user hovers over the image. I don't think this is a loss.
• The width, height and border attributes on the image have been removed. Certainly, the border attribute is redundant as this is described in CSS. The width of the containing element is set on the container (as described above) and I therefore think the width attribute has no effect in most browsers. The height of the image is not represented anywhere else, and this may cause a slight difference in progressive rendering of Wikipedia articles. If this is considered a problem, the width and/or height attributes can be brought back with a slight penalty in size.

It should also be noted that a container element around the caption has been kept (<div class="caption">). This is not necessary to achieve the current rendering (it is removed in the next two examples), but it has been kept in order to achieve other presentations in the future. For example, the caption can be positioned differently when there is an element to attach CSS rules to.

CSS3-based solution with magnifier

<div class="thumb tleft w180">
  <a href="/wiki/File:Bryggen_(6-2007).jpg">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/
      e/e3/Bryggen_%286-2007%29.jpg/180px-Bryggen_%286-2007%29.jpg" alt=""/>
  </a>
  <a class="magnify" href="/wiki/File:Bryggen_(6-2007).jpg">(magnify)</a>
  <a href="/wiki/Bryggen">Bryggen</a> in Bergen is on the 
  <a href="/wiki/List_of_World_Heritage_Sites_in_Europe" 
    title="List of World Heritage Sites in Europe">list of UNESCO World Heritage Sites
  </a>.
</div>

(magnify) Bryggen in Bergen is on the list of UNESCO World Heritage Sites.

It is possible to further reduce the number of elements while bringing back the magnifier icon. This CSS3-based solution uses 5 elements, no style attributes and 252 bytes.

In CSS3, the content property applies to all elements, not just pseudo-elements. In the code above, the text "(magnify)" is replaced with an image in the style sheet. Browsers that support this part of CSS3 will show the magnifier icon, while those that support the content property as per CSS 2.1 will show the text (magnify). Currently, only Opera shows an image. Therefore, it may be too early to start using this feature.

Here is the CSS code that replaces the text with an image:

.magnify { 
  content: url(http://en.wikipedia.org/skins-1.5/common/images/magnify-clip.png);
}

CSS2-based solution with magnifier and hovering effect

<div class="thumb tleft w180">
  <a href="/wiki/File:Bryggen_(6-2007).jpg"
      title="Bryggen in Bergen is on the list of UNESCO World Heritage Sites.">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/
           e3/Bryggen_%286-2007%29.jpg/180px-Bryggen_%286-2007%29.jpg" alt=""/>
  </a>
  <a href="/wiki/File:Bryggen_(6-2007).jpg">
    <img alt="enlarge" class="magnify" 
      src="http://en.wikipedia.org/skins-1.5/common/images/magnify-clip.png"/>
  </a>
  <div class="caption">
    <a href="/wiki/Bryggen">Bryggen</a> in Bergen is on the 
    <a href="/wiki/List_of_World_Heritage_Sites_in_Europe" 
       title="List of World Heritage Sites in Europe">list of UNESCO World Heritage Sites</a>.
  </div>
</div>

Bryggen in Bergen is on the list of UNESCO World Heritage Sites.

This solution brings back the magnifier icon and the hovering effects without using CSS3. As such, this version provides exactly the same functionality as the current code.

If a magnifier glass and the hover effect are deemed necessary, this solution is recommended.

The bare minimum solution

<div class="t-l-w180">
  <a href="/wiki/File:Bryggen_(6-2007).jpg">
    <img alt="" src="http://upload.wikimedia.org/wikipedia/commons/
       thumb/e/e3/Bryggen_%286-2007%29.jpg/180px-Bryggen_%286-2007%29.jpg"/>
  </a>
  <a href="/wiki/Bryggen">Bryggen</a> in Bergen is on the 
  <a href="/wiki/List_of_World_Heritage_Sites_in_Europe" 
      title="List of World Heritage Sites in Europe">list of UNESCO World Heritage Sites
  </a>.
</div>

Bryggen in Bergen is on the list of UNESCO World Heritage Sites.

This solution uses only 4 elements and 204 bytes. There is no magnifying glass and no container element around the caption. Also, the class names have been compressed from "thumb tleft w180" to "t-l-w180". The resulting presentation is similar to the proposed solution, but the relative gain is probably not worth the required efforts. Also, by removing the container element around the caption, the presentational flexibility has been reduced.

Conclusion

The table below compares Wikipedia's current code with the proposals described in this paper. The proposed solution is this author's recommendation; it is significantly smaller than the current code and it removes functionality which I consider redundant.

If it is deemed necessary to retain the magnifier icon and the hover effect, the css2-based solution is recommended. It is still simpler and more reusable than the current code.

Acknowledgements

Comments from Aryeh Gregor improved this paper.