Evolution of img: Gif without the GIF
Performance Calendar » Evolution of <img>: Gif without the GIF
- 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
... read the whole story at calendar.perfplanet.com.Convert JPG, PNG, and Animated GIF to WEBP
Convert JPG, PNG, and Animated GIF to WEBP
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 WEBPMy 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:
... read the whole story at davidwalsh.name.Building Animated SVG Banners
Building Animated SVG Banners
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:
Make Your Pull Requests Visual for Front-End Changes
Make Your Pull Requests Visual for Front-End Changes
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:
... read the whole story at medium.com.