New image formats like WEP and MOZJPEG will be a major boost to load time on the web. The majority of page load and render time is usually attributed to unoptimized images, so these new formats will make both mobile and desktop load times faster. I've taught you how to detect WEBP support but we've not explored how to create WEBP images; let's have a look at how easy it is to convert JPG, PNG, and even animated GIF to WEBP.

Convert JPG and PNG to WEBP

My favorite open source image manipulation library, ImageMagick, doesn't have the capability to convert images to WEBP out of the box -- you'll receive an ugly error if you don't first install webp via a utility like homebrew:

Pinterest, Google Images and lots of image-heavy sites lazy-load their content. They also calculate the dominant color of each image to use as a placeholder. This post presents a few methods to do the same and helps you understand the GIF file format to make the most of data URIs.

The basic concept is to use a tiny blank.gif as src attribute and replace it with the correct image after the page has fully loaded. The blank.gif can also be set as a Base64-encoded Data URI to save a request.

Like a lot of people, I like GIFs. I like to use them in my articles to illustrate functionality. For example, this GIF from my article on "Recreating the iTunes Library" -

However, a problem with this is that GIFs are heavy, the one above is a whopping 11.4 MB 😱 (NB: not exactly the image above, I couldn't actually load that on a page). Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size.

If you’re a front-end dev like me, you’ll often find yourself making pull requests that have visual changes. I wanted to share something that I’ve started doing at work that has been helpful in getting my pull requests approved.

The idea is simple, but I will add a few tips and tricks to help you take it to the next level!

The basic idea is to add screenshots and screen recordings for any visual changes. They make the job for the reviewers much easier since they can visually see what’s been changed instantly.

I like to show the before and after visual diffs.

Take a screenshot of the before and after, and add it to your PR like so: