Grow your CSS skills. Land your dream job.

Feedback needed: jQuery plugin “shrinkimage”

  • # December 19, 2012 at 5:55 pm

    I developed a jQuery plugin that helps reducing the filesize of alpha transparent, photo like PNGs (so any PNG which would normally better be saved as JPEG if it had no alpha channel). The plugin requires some PHP processing and changes to .htaccess in addition.

    The plugin is demoed on [codepen](http://codepen.io/dlueth/pen/eGulH “codepen”) and can be downloaded from my [GitHub repository](https://github.com/dlueth/Qoopido-jQuery/tree/master/dist/packages). Some documentation can be found [here](https://github.com/dlueth/Qoopido-jQuery).

    What the plugin does:

    [1] The plugin takes a URL to an image and requests a file of type “.shrunk” (which is JSON) via AJAX instead.

    [2] The .htaccess redirects this request to a PHP-Script that splits the original PNG into it’s alpha-channel (saved as base64 PNG within the shrunk-file) and it’s color-channel (saved as base64 JPEG with variable compression within the shrunk-file).

    [3] When the shrunk-file is loaded via AJAX the plugin recombines both channels via HTML5 canvas and writes them back to the source image (or CSS-background) as DataURI.

    If the browser does not support canvas or DataURI the plugin should fallback to simply use the original PNG as fallback. Same should apply if anything went wrong with the AJAX-request.

    The shrunk-file is, in most cases, between 70-80% smaller than the original PNG. The lowest gain I have seen yet is about 50% of the original size.

    Some more background information can be found [here](http://headers-already-sent.com/shrinkimage-1/) and [here](http://headers-already-sent.com/shrinkimage-2/) – but the articles are a bit outdated in terms of “documentation”!

    I have already been using prior versions of this plugin for some projects but did a major refactoring lately (implemented AMD and an event-emitter).

    So any feedback and/or bugreports are most welcome, especially for IE (I am on OSX)!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".