Perishable

Designer, developer, author, artist. Projects: Perishable Press, Editor at Smashing Mag, Tao of WP, Digging into WP, .htaccess made easy, WP-Mix, xyCSS, & more.
Oct 01
Permalink

Redesign Optimization

With image-rich designs, it is important to optimize as much as possible to maintain an enjoyable user experience. During development, the current (Quintessential) design at Perishable Press called over 50 different images, 10 JavaScript files, and around 5 stylesheets. This was fine during development because I was the only person involved with the design. Plus, with a fiber-optic Internet connection, I wouldn’t have noticed it if there were 200 image requests.

Once the design finally began coming together and looked consistent in as many browsers as I could find, it was time to begin optimizing the site for performance — not just to decrease loading time, but also to conserve as much bandwidth as possible. For the images, I began by consolidating the collection into four or five sprites, each containing graphics of similar dimensions. By reducing the number of server requests for images from 50 to 5, I was able to speed up loading times dramatically.

Then, to reduce the overall size of each of the sprites, I further optimized them with the incredible OptiPNG. Crunching the images with OptiPNG, I reduced overall graphics size by over 25%, thereby saving bandwidth and further decreasing load times. Further, PNG image optization via OptiPNG is lossless, meaning there is no loss of image quality.