Maintain Transparency in Resized Images

Posted by Ed Johnson on 18 Sep 2010 21:00, last edited by Ed Johnson on 18 Sep 2010 23:49

Tags: images transparency

rating: +2+x

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
guru-is-in-800x712.png
[[image guru-is-in-800x712.png size="square"]]
thumbnail
100px on longest side
guru-is-in-800x712.png
[[image guru-is-in-800x712.png size="thumbnail"]]
small
240 px on longest side
guru-is-in-800x712.png
[[image guru-is-in-800x712.png size="small"]]
medium
500px on longest side
guru-is-in-800x712.png
[[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
guru-is-in-800x712.png
[[image guru-is-in-800x712.png width="75px"]]
height=240px
width calculated automatically
guru-is-in-800x712.png
[[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.

width=240px
height=120px
guru-is-in-800x712.png
[[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
guru-is-in-800x712.png
[[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)
live_support_guru_is_in.jpg
[[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
live_support_guru_is_in.jpg
[[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 JohnsonEd Johnson. Please visit his/her userPage.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.