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 to produce great quality versions of low-resolution images, allowing you to see beautiful photos as the photographers intended them to be seen. By using RAISR to display some of the large images on Google+, we’ve been able to use up to 75 percent less bandwidth per image we’ve applied it to.

Wow!

Google Blog: Saving you bandwidth through machine learning →
Enhance! RAISR Sharp Images with Machine Learning →

Grade.js

gradejs

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-logo

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 know you can visually diff two images using just one line of CSS?

Styling Broken Images

Turns out it’s possible to style broken images. You know, from this:

Screen-Shot-2016-02-27-at-12-41-36

To this:

Screen-Shot-2016-02-27-at-12-41-54

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 appear.

With that foot set in the door, the possibilities are endless …

Styling Broken Images →

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 using TinyPNG for quite some time now before uploading images to my blog. Can shave up to 83% (!) of a screenshot created in OS X.

Tools for image optimization →

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 displays, without penalizing the users who don’t. Importantly, it also provides a graceful fallback for browsers that don’t yet support the feature.

Improved support for high-resolution displays with the srcset image attribute →
srcset Demo →

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 21 add image-set to support retina images →
Related: High DPI images for variable pixel densities →

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.

Be sure to check and compare all. Personally I like Joe Lambert’s solution most.