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.
Turns out it’s possible to style broken images. You know, from 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 appear.
With that foot set in the door, the possibilities are endless …
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.
<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.
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: -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);