Tagged: images

A nice walk-through on how to achieve that popular image zoom effect with CSS. Note, read to the end (and the comments) for notes about mobile usage/support.

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.

Some handy tips on optimising SVGs for performance. I’ve been trusting Inkscape for my SVG production needs, but after reading this, I might take a closer look at the files it creates.

Consider a situation where you have to have high-contrast, blurred or brighter versions of particular images on your website. Prior to CSS filters, your only options were either to upload different versions of these images or manipulate the images with JavaScript.

Unless you want to manipulate the pixels in the original image, CSS filters provide an easy way out. Let’s begin this tutorial with a brief discussion of all available filters.

A nice guide to using CSS filters on images. See demo for testing browser compatibility.

Full featured javascript lightbox gallery, No dependencies.

I’ve not seen a new lightbox for a while, this one looks nice.

placeskull is a simple placeholder graphics service. It returns scalable vector graphics of random skulls in dimension and color as defined in the url. placeskull was inspired by popular placeholder graphic services such as placekitten.com and placehold.it.

I came across this placeholder service today, as previously mentioned, I’m a sucker for a skull ‘n’ crossbones.

A nifty little tool for finding the visual centre of an image.

Get placeholder images for your design or development project. Just include the dimensions of the image you need, and we guarantee you’ll have a shitty time.

Haha, I normally use {placekitten}, but PlacePoop looks like more fun.

Impalette scans your image for nearest, matching Pantone colors and maps the 10 most common to a palette and secondary, tertiary, and opposite colors for the palette based on your parameters.

A nifty tool for creating colour palettes.

Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or finger) sweeps across a container. Think of it like a flipbook made with Javascript, instead of paper. All you need is a set of images, and jQuery.

I like this, it’s simple, but effective.