prImages progressive-responsive Gallery

This gallery is a prImages.js demo in combination with phpThumb. The html is running on Bbootstrap 3.2.0 CSS.

Bootstrap resizes images with the CSS 'max-width:100%' setting which produces the side effect that small images can be stretched beyond their original size, resulting in stretched, low quality images. prImages prevents this, as it will replace images on-the-fly with a higher resolution version based on the required size, as close as possible to common responsive 'breakpoints' (160, 320,480, 768, 1024, 1224, 1824 px width).

If 'max-width' is not defined for images, prImages will just handle the low-quality (loaded default by the original image src) to high-quality transition, with retina (double pixels) support if applicable.

Demo uses a PHP script for generating the image elements and their corresponding data attributes. The PHP also checks for JS support and redirects the user accordingly.