• GIFs are awesome but terrible for quality and performance
• Replacing GIFs with <video> is better but has perf. drawbacks: not preloaded, uses range requests
• Now you can <img src=".mp4">s in Safari Technology Preview
• Early results show mp4s in <img> tags display 20x faster and decode 7x faster than the GIF equivalent – in addition to being 1/14th the file size!
• Background CSS video & Responsive Video can now be a “thing”.
• Finally cinemagraphs without the downsides of GIFs!
• Now we wait for the other browsers to catch-up: This post is 46MB on Chrome but 2MB in Safari TP

Special thanks to: Eric Portis

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.

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:

I've been reading David Walsh's blog for years. The tips and tutorials he shares have helped me fix a lot of problems. I love that I get to support him now by advertising TrackJS on his site. Plus, I get a chance to build some cool SVG animations!

I'm not a designer or a marketer by trade. I'm a software developer, but as an entrepreneur I end up doing a bit of everything. I spent a lot of time sketching and googling to figure out how this works. I'd like to share what I've learned about designing and building animated SVG ads, like this one right here:

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: