Archive | images

RSS feed for this section

The Contrast Swap Technique: Improved Image Performance with CSS Filters

With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn’t all that filter effects are good for. You can use filters to indicate hover state, hide passwords, and now—for web performance.

While playing with profiling performance wins of using blend modes for duotone image effects (I’ll write up an article on this soon), I discovered something even more exciting. A major image optimization win! …


The Contrast Swap Technique: Improved Image Performance with CSS Filters is a post from CSS-Tricks

Lazy Loading Gravatars in WordPress

Most WordPress themes show user Gravatars in the comment threads. It’s a way of showing an image with the user, as associated by the email address used. It’s a nice touch, and almost an expected design pattern these days.

Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren’t always particularly tiny files. Yeesh.

Let’s lazy load them.

The Concept

Lazy loading …


Lazy Loading Gravatars in WordPress is a post from CSS-Tricks

Measuring Image Widths in JavaScript (Carefully!)

Let’s say you want to find an <img> on the page and find out how wide it is in JavaScript. Maybe you need to make some choices based on that width (or height, or both) You can definitely do that. The DOM will even give you a variety of dimensions to choose from depending on what you need. There is definitely a catch though.

Here’s the image:

<img src="image.jpg" alt="an image">

And here’s us selecting it, by finding the first …


Measuring Image Widths in JavaScript (Carefully!) is a post from CSS-Tricks