Posted by Ed Johnson on 18 Sep 2010 21:00, last edited by Ed Johnson on 18 Sep 2010 23:49
As discussed in this thread on the Wikidot Community Forum and this bug report, using the various sizes of thumbnail images generated by Wikidot when we upload an image causes any transparency to be lost in PNG or GIF images. This how-to discusses how you can preserve the transparency by using other attributes available to us with the [[image ... ]] syntax.
According to the Wikidot Syntax documentation, we need to use this syntax:
[[image image-source attribute1="value1" attribute2="value2" ...]]
The primary focus of this article will be on the size, width, height and link attributes.
When we upload an image file to a page, Wikidot does some post-processing of the image file and creates multiple versions of it for use with the size attribute. These versions are:
Notice the white background in all of these images inside the "guru stand". This image is in PNG format with those white areas set as transparent. We should be seeing the light blue-green background of the page showing through. The reason we don't is that when Wikidot creates these various sizes of our original image, they are converted to JPG format regardless of the original format of the image. JPG images do not support transparency.
In order for the transparency to be preserved, we need use the width and height attributes if we want to display the image in a smaller size. This method scales the original image, preserving the transparency of PNG images.
height calculated automatically
[[image guru-is-in-800x712.png width="75px"]]
width calculated automatically
[[image guru-is-in-800x712.png height="240px"]]
You can see how specifying either the height or the width preserves the aspect ratio of the image. Specifying both attributes will scale the image and disregard the aspect ratio.
[[image guru-is-in-800x712.png width="240px" height="120px"]]
Linking to the full-sized image
In spite of losing the transparency when using the various size attributes, one of the benefits is that a link is automatically created to the full-sized image when you use them. Click any of the images in the first table above and the full-sized image is displayed. When using the width and height attributes, this does not happen automatically. We need to add the link attribute to display the full-sized image. We add the link attribute in this format:
To force the image link to open in a new window, prepend the link with an asterisk (*):
If your page is in the default category, you can eliminate category: from the syntax. In all cases, the local—files part is required to construct the link properly.
height calculated automatically
[[image guru-is-in-800x712.png width="240px" link="/local--files/howto:maintain-transparency-in-resized-images/guru-is-in-800x712.png"]]
So there we have it! A relatively painless way to preserve a PNG image's transparency, control the size of the image displayed and still link the image to the original, full-sized image.
Another issue that was discussed as a sidebar within the community forum thread was the difference in sizes between PNG and JPG images. In my experience, PNG images are generally much larger in terms of file size than JPG images. There are numerous discussions all over the web on the merits of both formats and when it's best to use one over the other. My general rule is to use JPG (especially for photographs) unless I need transparency. That's an over-simplification. Here's an example of the difference in file size:
Note: the original PNG image does not have any transparency.