Tag Archives: images

Lazy Loading images with IntersectionObserver

Extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. 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: … Continue reading

Elsewhere , , , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , , , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

Saving bandwidth through machine learning

When requesting a high-resolution image with the Android Google+ app, one no longer gets the full version sent over. Instead, one gets a low-resolution version which is then processed by RAISR: RAISR, which was introduced in November, uses machine learning … Continue reading

Elsewhere , , , 1 Comment


This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images. Apply the Grade function to elements wrapping the source images: <script src="path/to/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ Grade(document.querySelectorAll('.gradient-wrap')) }) </script> … <div class="gradient-wrap"> <img src="./samples/finding-dory.jpg" … Continue reading

Elsewhere , , , Leave a comment

Image diffing using PHP

PHP package by Undemanding to calculate how much difference (in percent) there is between two images: use Undemanding\Difference\Image; use Undemanding\Difference\Method\EuclideanDistance; $image1 = new Image("/path/to/image1.png"); $image2 = new Image("/path/to/image2.png"); $difference = $image1->difference($image2, new EuclideanDistance()); $boundary = $difference->boundary(); // → ["left" => … Continue reading

Elsewhere , , Leave a comment