Tags: images

162

sparkline

Oh Hello Ana - Colours of 2018

I love this idea of comparing human colour choices to those of a computer:

I decided to do two things: the top three most used colours of the photo decided by “a computer” and my hand picked choices. This method ended up revealing a couple of things about me.

I also love that this was the biggest obstacle to finding representative imagery:

I wanted this to be an exciting task but instead I only found repeated photos of my cat.

Making single color SVG icons work in dark mode

Another good reason to use the currentColor value in SVGs.

ANDI - Accessibility Testing Tool - Install

Another bookmarklet for checking accessibility—kind of like tota11y—that allows to preview how screen readers will handle images, focusable elements, and more.

Remove Background from Image – remove.bg

Well, this looks like it could come in handy—no more tedious time in Photoshop trying to select turn a person into a separate layer by hand; this does it for you.

Responsive Images on the Apple Watch — ericportis.com

Some tips for getting responsive images to work well on the Apple Watch:

  • test your layouts down to 136-px wide
  • include 300w-ish resources in your full-width img’s srcsets
  • art direct to keep image subjects legible
  • say the magic meta words

Squoosh

A handy in-browser image compression tool. Drag, drop, tweak, and export.

Dynamic resources using the Network Information API and service workers

Smart thinking—similar to this post from last year—about using the navigator.connection API from a service worker to serve up bandwidth-appropriate images.

This is giving me some ideas for my own site.

The Tarot Cards Of Tech

A useful set of questions to ask on any project, shuffled and dealt to you.

They’ll not only help you foresee unintended consequences—they can also reveal opportunities for positive change.

All of the content in images. Not a single image has alternative text. If only they had asked themselves:

When you picture your user base, who is excluded? If they used your product, what would their experience be like?

Keep Pixelated Images Pixelated as They Scale | CSS-Tricks

This is a potentially useful bit of CSS that I had no idea existed.

Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers

Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.

Carbon

This service could be quite handy if you’re making a presentation that involves showing code—it generates syntax-highlighted images of code.

Compressive Images Revisited - TimKadlec.com

Tim explains why that neat trick of making a really big JPEG with quality set to 0% is no longer necessary, and how the savings you make in bandwidth with that technique are nullified by the expense of the memory footprint needed.

Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA

The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the sizes attribute of the img element.

Boxy SVG

This is impressive—a fully featured graphics app for creating SVGS right in your browser.

Metaballs

Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.

Here’s the maths behind the metaballs (implemented in SVG).

Href Tools - Free online web tools

Handy web-based tools—compress HTML, CSS, and JavaScript, and convert files from one format to another.

edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).

Network based image loading using the Network Information API in Service Worker | justmarkup

This is clever—you can use the navigator.connection API from a service worker (because it’s asynchronous) which means you can have a service worker script that serves differently sized images based on bandwidth.

Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog

Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.