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 of horticultural pruning—the targeted removal of unhealthy or unwanted parts to promote growth—Pruning addresses the inefficiencies of HTML5.1 responsive images. Traditional responsive image delivery relies on multiple versions for specific viewports but often leads to errors, complex markup, and pixel waste—image data extending beyond the visible aperture. A study, Understanding and Mitigating Webpage Data Bloat: Causes and Preventive Measures (see Section 5.2), reveals that over 90% of loaded pixels go unused on average, with a median waste of 30% on desktops and 50% on mobile, where images are often loaded at desktop resolutions but displayed much smaller.

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.