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.
Size
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:| square 75x75 pixels |
 [[image guru-is-in-800x712.png size="square"]] |
| thumbnail 100px on longest side |
[[image guru-is-in-800x712.png size="thumbnail"]] |
| small 240 px on longest side |
[[image guru-is-in-800x712.png size="small"]] |
| medium 500px on longest side |
[[image guru-is-in-800x712.png size="medium"]] |
| large 1024px on longest side |
For use with Flickr images only |
| original full sized original |
For use with Flickr images only |
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.
The Workaround
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.| width=75px height calculated automatically |
[[image guru-is-in-800x712.png width="75px"]] |
| height=240px width calculated automatically |
[[image guru-is-in-800x712.png height="240px"]] |
| width=240px height=120px |
[[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:
link="/local--files/category:page-name/image-file-name.png"To force the image link to open in a new window, prepend the link with an asterisk (*):
link="*/local--files/category:page-name/image-file-name.png"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.
| width=240px 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"]] |
Conclusion
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.
Sidebar Note
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:| JPG = 39.45K saved with quality=90 (very high) |
 [[image live_support_guru_is_in.jpg width="240px" link="/local--files/howto:maintain-transparency-in-resized-images/live_support_guru_is_in.jpg"]] |
| PNG = 190.2K saved with max compression |
 [[image live_support_guru_is_in.jpg width="240px" link="/local--files/howto:maintain-transparency-in-resized-images/live_support_guru_is_in.png"]] |
Note: the original PNG image does not have any transparency.
Backlinks
Authors
Ed Johnson. Please visit his/her userPage.