Responsive image resizing via PHP, GD, Javascript
Latest commit d0e322f Nov 7, 2015 Gavyn McKenzie Updated readme
Failed to load latest commit information.
css Initial commit Jan 8, 2014
img Initial commit Jan 8, 2014
js Tidy up JS Jan 8, 2014
less Initial commit Jan 8, 2014
php/lib Preserve transparency in gifs/pngs Nov 7, 2015
.gitignore Initial commit Jan 8, 2014 Updated readme Nov 7, 2015
index.html Remove CoffeeScript and Jade in favour of native Jan 8, 2014
resize.php Tidy up JS Jan 8, 2014


I recommend you use a suggested solution from as this technique is outdated.

Crispy resize

Crispy resize is a responsive images plugin that uses PHP-GD and ajax to lazy load the correct image size for the display width.


How to use

Add the resize-class.php in php/lib/ to your php libs folder. Add resize.php in the root to your web root.

Set your potential image display sizes in the array at the top of resize.php and the path to the cache folder.

Include the resize.js plugin in /js/ on your page.

Set the breakpoints at which you want to refresh the image in resize.js (or if you want to compile the plugin.)

Replace your <img> tags with the following html:

<div data-src="[put your image src here]" data-alt="crispy" class="img-wrap js-crispy">
    <noscript><img src="[put your image src here]" alt="Crispy"></noscript>

Add some CSS to size your img-wrap element and make sure the image within it fills it.

.img-wrap {
  display: inline-block;
  width: 10em;
.img-wrap img {
  max-width: 100%;
  display: block;
  width: 100%;