Automatically compress images to your Pull Requests with this GitHub Action

The folks at Calibre have release a GitHub Action named “Image Actions” and I must say, it looks amazing insane: Image actions will automatically compress jpeg and png images in GitHub Pull Requests. Compression is fast, efficient and lossless Uses mozjpeg + libvips, the best image compression available Runs in GitHub Actions, so it’s visible …

Native image lazy-loading for the web with [loading="lazy"]

Addy Osmani, on an upcoming web feature which is about to land in Chrome 75: The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values: lazy: is a good candidate for lazy loading. eager: is not a good candidate for lazy loading. Load …

Lazy Loading images with IntersectionObserver

Smashing Magazine has an extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. The article first explains the difference between a regular Event and an Observer, before diving into the IntersectionObserver. const images = document.querySelectorAll('[data-src]'); const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; let loaded …

How Discord Resizes 150 Million Images Every Day with Go and C++

Great in-depth writeup on how Discord struggled to resizing lots of images via their Image Proxy Service: As Discord grew, the Image Proxy started to show signs of strain. The biggest problem was the Image Proxy did not have an even workload distribution, which hampered its throughput. Image proxying requests saw a wide variance of …

SQIP – SVG-Based Image Placeholder

In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works: Display a resized version of the original at the original size, with a blur filter on top to hide the artifacts. Load in the bigger one. Once the big version is loaded, replace the small …

Essential Image Optimization

Essential Image Optimization is an free and online eBook by Addy Osmani: Images take up massive amounts of internet bandwidth because they often have large file sizes. According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs. As of July 2017, images …

PngPong Image Manipulation Library

For the recent UK Elections the folks The Guardian wanted to show big images along with their push notifications. Being bandwidth-aware they wanted a solution in which they could use a template image (which could then be cached) and then draw some stuff onto it. Only problem: Service Workers don’t have access to the Canvas …

Opera 46 and Chrome 59 now support APNG (Animated PNG)

This part of the Opera 46 release notes got me very excited: Opera now supports animated PNG, or APNG for short. APNG is a file format that works similarly to GIF. The difference is that APNG is smaller and supports both 24-bit images and 8-bit transparency. Ever since APNG landed in Firefox (10 years ago …

Easily manipulate images in PHP with spatie/image

Great new package by the folks at Spatie to working with images in PHP, powered by Glide. Glide itself is great, but uses an URL based approach (which has its benefits); yet in most cases I find myself using a code based approach. This is where spatie/image comes into play: spatie/image wraps up Glide so …