All 1 entries tagged Png

Image gallery thing using ImageMagick polaroid operation

Writing about web page http://go.warwick.ac.uk/mikewillis/polaroidgallery/gallery.html

I used to tinker with HTML/CSS/Javascript a lot. I've done very little of this over the last [indeterminate period of time]. Then a few days ago whilst tinkering with ImageMagick I had an idea for a potentially pleasing method of presenting photos on a web page. The somewhat rough implementation of the idea is linked above.

All photos are taken from the University Media Library. Display of the large versions of the photos is handled by Lightbox2 (as seems to be very much the fashion these days). Bash script used to generate images and to generate the HTML.

Bad things about the gallery:

• Because (alpha) transparency is required the thumbnails are png rather than jpeg. This means the file sizes of the thumbnails are rather large at ~60KB each including the overlay image that is used when the mouse is over the image to change the border colour. This isn't that big a problem I guess given the speeds of most people's Internet connection these days, but the part of my mind that remembers when 56k dial up was the norm keeps telling me that each image would take a minimum of ~12 seconds to load over such a connection. There are various programmes that will reduce the file size of a png a bit, e.g.optipng (in Ubuntu and openSUSE repos), and the most effective one I found, pngout. I could only get a reduction of a few percent, though some people claim to have got higher. I guess it depends on the png. I'd already told ImageMagick to strip out profiles when creating them.
  
• The area of the page that needs to be clicked to display a particular image does not exactly correspond with the visible outline of the image. The area that needs to be clicked for any given image is rectangular because of course the images themselves are rectangular, but the use of transparency means they don't look rectangular. This could be solved using an imagemap, but it would only work if you collated all the pngs in to one big image and then mapped that. Otherwise parts of an image's map would be obscured by the image to the right. Collating all the images in to one big one would be a bad idea for various reasons (e.g. load time, lack of adaptation to different window widths).
  

Notable/Nice things about the gallery:

• The images used to cause the border colour to change when the mouse is over a thumbnail are not merely the same image but with a different border colour. The image is generated twice, once with the white border, once with the other colour. The second image then has most of the actual photo replaced with a transparent rectangle. (Example) This reduces the file size by roughly a third.
• The colour the border is changed to for a given image is determined by reducing the colours in the image to just one then inverting that colour. I found this gives a more pleasing effect that using the same colour for each photo. It also avoids the need to expend effort on finding a single colour that looks generally pleasing for all photos.
• Because each photo is an individual element, they automatically flow to fill the available space. (Try resizing the browser window whilst viewing the page.)
• Because the thumbnail images are pngs with transparency, you can stick any background you want behind them.

Mike Willis : 14 Mar 2010 17:27 |  Tags: CSS HTML Imagemagick Javascript Png |  Comments (0) |  Close comments |  Report a problem