bashgal
Author: Shapor Naghibzadeh - <shapor@gmail.com>
Version: 1.0
Documentation
See the README, hosted by our friends at github.
Source
Available via git: git://github.com/shapor/bashgal.git
Browse it here: http://github.com/shapor/bashgal
Quick link to script: bashgal
Features
The features outlined below focus primarily on performance optimization.
Multiple image sizes without JavaScript or cookies
At the top of the gallery page you can always switch between your preferred image height. It will remember this no matter where you select it because it simply links you to pre-rendered index and gallery pages. The key to speed in bashgal is to pre-render everything.
CSS image spriting for improved load time
CSS spriting significantly reduces the amount of data transferred, as well as the total page load time. See the "Details" section of the README for more information.
The table below shows the total number of bytes transferred and the page load times on both fast (~10ms ping) and slow connections (tbd). The load times and "events" were gathered using the Firefox Load Time Analyzer plugin.
| Gallery | # images | events | load time (ms) | slow load time (ms) | bytes transfer | thumbnail image size (bytes) |
|---|
| Getty Center (plain html) | 114 | 465 | 1180 | - | 428705 | 286957 |
| Getty Center (bashgal) | 114 | 242 | 654 | - | 290327 | 249812 |
While the thumbnail data size is just over 10% smaller, the total data transferred is over 30% less and page load time almost twice as fast on even an extremely fast connection (fios 15/15Mb, w/ ~10ms ping to the server). This is due to the overhead of additional HTTP headers and server network round-trips for each individual thumbnail.
If you're still unsure of how CSS spriting works, right click any thumbnail in the bashgal gallery and click "view image".
Pre-loading previous and next images
JavaScript is used to pre-load the previous and next images linked to from a gallery page. The idea is simply that we load the next image while the user is enjoying the current one, so they never have to watch an image load. Nothing new or fancy here. I would like to eliminate the JavaScript from this and do it with CSS as well. Patches welcome. :)
homepage