Automatic Image Resizing

It can be a hassle to appropriately size all of your site’s images according to how they’ll render on an page. PicPerf’s automated resizing can take care of that for you. Slip a small JavaScript file onto your pages, and each image will be automatically optimized & cached according to the actual rendered width. It’s all done behind the scenes, in a light, non-intrusive way, so there’s no risk of interfering with other more important tasks on the page.

Here’s how to set it up:

1. Prefix all your images with the PicPerf host.

Auto-resizing only affects images that are already being optimized & cached with PicPerf. If you don’t already have an account, you can sign up here to get started.

2. Load the script.

Load a small (under 500 bytes gzipped) script onto your page. Use the defer attribute to ensure it executes at a low priority, and after your HTML has been parsed.

<script defer src="https://unpkg.com/@picperf/client@1.0.1/dist/picperf.js" />

Behind the Scenes

• The first time a page with PicPerf images is loaded, PP will remotely, headlessly render your page at a large desktop’s screen dimensions (2000px in width).

• Each image will be measured, using the rendered & natural widths to determine if it could be resized more effectively.

• Eligible images will be asynchronously resized based on how they actually show on a large screen.

• The lighter, resized images will be aggressively cached and served for future page views.

At most, this process is triggered once every 24 hours. This allows you to auto-resize images on a previously scanned page in the future.