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" alt="" /> </div> Installation possible with npm: npm install grade-js Grade.js →Grade Source (GitHub) →

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" => …, "top" => …] $percentage = $difference->percentage(); // → 14.03… Undemanding Difference → Did you […]

Styling Broken Images

Turns out it’s possible to style broken images. You know, from this: To this: But just “how”, one might ask? Because the <img> element is a replaced element controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can […]

Tools for image optimization

Where possible, it’s best to try automating image optimization so that it’s a first-class citizen in your build chain. To help, I thought I’d share some of the tools I use for this. Not only contains a list of grunt plugins one can use, but also a few command line and online tools. I’ve been […]

WebKit now supports srcset image attribute

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x" alt="Example of the srcset attribute. Image contains a coloured striped pattern with some inline text that indicates which of the candidate images were selected."> WebKit now supports the srcset attribute on image (img) elements. This allows you, the developer, to specify higher-quality images for your users who have high-resolution […]

CSS image-set in Webkit (Safari/Chrome)

Safari 6 and Chrome 21 added vendor-prefixed support for the proposed CSS4 image-set specification. This proposed specification is designed to support displays with different pixel densities (read: retina displays). background-image: url(image.jpg); background-image: -webkit-image-set(url(image.jpg) 1x, url([email protected]) 2x); /* Also include other prefixed versions of this … */ background-image: image-set(url(image.jpg) 1x, url([email protected]) 2x); Safari 6 and Chrome […]

Instagram Unshredder Challenge: Javascript Solutions

Recently the engineers at Instagram challenged the interwebs to write some code that unshreds a chopped up image. Some of us took the liberty of solving the problem in Javascript, although it wasn’t one of the languages suggested. Solution by Joe Lambert Solution by Ron Ilan Solution by Diego Ferreiro Be sure to check and […]