Automatically Compress Images on Pull Requests

Calibre’s new GitHub Action allows you to compress raster images with minimal setup automatically. Never ship unoptimised graphics again.

Understand the impact of imagery

According to the HTTP Archive, the transfer size of images requested has risen by a whopping 52% on desktop and 82% on mobile just within the last year. Whether we like it or not, images are here to stay. We use them to assist in portraying our brands, visualise messaging, run retail stores, and so much more.

Because over half of the median page weight accounts for imagery, it becomes crucial to ensure media is appropriately optimised and served fast. Not only we want to avoid adding further page bloat, but also ensure our customers aren’t presented with unintentionally blank spaces or drain their data allocation with massive downloads.

There are numerous tactics to remedy the performance impact caused by imagery. From strategic decisionmaking; judging if images are necessary at all, what format is the most suitable; to nitty-gritty implementation; automatic resizing, lazy loading and content delivery networks. Turns out, responsibly managing your images is a complicated job.

One of the lowest hanging fruit in achieving highly performant imagery is automating the compression process. It’s easy to accidentally add an uncompressed file or run out of time to set up elaborate configurations to manage compression for us.

Fortunately, with GitHub Actions, it’s now possible to trigger various workflows directly where your code lives. Actions make it possible to introduce a wide range of performance-oriented tooling.

Add automatic image compression to your Pull Requests

Because it’s Calibre’s mission to make the Web faster, we’ve created a freely available GitHub Action that automatically optimises images in your Pull Requests.

The action uses the most efficient, lossless compression libraries—mozjpeg and libvips that work with PNGs and JPGs. What’s excellent about embedding a compression step directly in the developer platform (or CI) rather than in local development environments (or relying on drag-and-drop tools) is that no image can hit production uncompressed. This empowers any contributors with basic knowledge of GitHub to update images without introducing performance regression and saves everyone time.

You can add automatic image compression to your repositories directly from GitHub Action Marketplace. Don’t forget about continuously tracking the performance of your sites. If your focus is to reduce image-induced sluggishness, pay special attention to your Lighthouse Performance Score, Transferred Image Size and First Contentful Paint.

Happy optimising!