Category: images

Extinct & Endangered

I’ve been watching a lot of nature documentaries lately. I like how you can either pay super close attention to them, or use them as background TV. I was a massive fan of the original Blue Planet, so it’s been cool watching the Blue Planet II episodes drop recently, as one example. A typical nature document...

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

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

Develop Locally, Use Images from Production

Working on your website locally means having the files that make your website tick right there on your computer. It’s common those files live in a version control repository. You work on them, and push them up to the repo when you are ready. Other people work too, and you pull their changes back down. What might...

Using WebP Images

A version of this article was first posted on Jeremy’s blog. It was Jeremy’s idea to repost here to spread the good word about WebP and the performance benefits. Something he knows about as an author of an (upcoming) web perf book. We’ve all been there before: You’re browsing a website that has...

Image Upload and Manipulation with React

The following is a guest post by Damon Bauer, who tackles a pretty common web developer job: offering user image uploads. I’d hesitate to call it easy, but with the help of some powerful tools that do a lot of the heavy lifting, this job has gotten a heck of a lot easier than it used to be. Damon even does it ent...

Reducing JPG File size

There’s lots of neat tricks for reducing the size of JPGs in this article by Colt McAnlis: With the Average webpage size now larger than the original DOOM game, you have to start asking where all the bytes are coming from, and how you can do more to toss those things out. While JPG compression is impressive in its’...

Working with Images in Stylesheets with PostCSS

The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful jobs within CSS. You’re about to see variety of PostCSS plugins at work that are all related to working with ima...

A Quick Overview of `object-fit` and `object-position`

object-fit and object-position are my two favourite CSS properties lately. They give developers control over the content inside an img or a video similar to the way that we can manipulate the content of a background with background-position and background-size. First, let’s dig into object-fit. This property defines...

Lazy Loading Images with the Igaro App JavaScript Framework

A while back I wrote about the Igaro App JS Framework (disclaimer: I’m the framework author). “Sigh! Not another framework” I hear you say (and probably rightly so). Well, let me tell you what sets Igaro app apart. Igaro App is NOT yet another framework that plugs into your HTML. It’s a complete...