Install Pruner.js in Your Project

Start by uploading a base image and following the instructions to generate the tiles, HTML snippet, and script element for installing Pruner.js.

Reducing Pixel Waste in Responsive Images

Inspired by the practice in horticulture—the targeted removal of unhealthy or unwanted parts of a plant to promote healthier growth—pruning addresses the challenges of HTML5.1 responsive images, which rely on multiple versions for specific viewports but often result in errors, complex markup, and what we term pixel waste—image data extending beyond the visible aperture—by adapting to different viewport sizes.

Pruning uses a tile-based approach, where a base image is divided into smaller sections (tiles) that are dynamically assembled, like a jigsaw puzzle, based on the viewport size. This responsive image delivery method leverages viewport-based rendering (VBR) to load only the portions of image data to cover the visible aperture, ensuring efficient resource use. By calculating and serving tiled images optimised for a range of common viewport sizes, pruning eliminates the reliance on predefined breakpoints, offering a more adaptable solution for responsive image delivery.