Using AWS’ “Server­less Image Han­dler” to roll your own Image Transform Service

Ama­zon AWS has offered a Server­less Image Han­dler for a while that allows you to spin up an AWS Lamb­da func­tion to cre­ate your own pri­vate lit­tle image trans­form ser­vice that is inex­pen­sive, fast, and is front­ed by the Cloud­Front con­tent deliv­ery net­work (CDN). Whenever an image is uploaded to the bucket, a Lambda function […]

Optimizing images for the web – an in-depth guide

It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images. This article aims to cover most of the tools and approaches […]

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 […]