The Publishing Project

Using the default encoder and settings, as described in Compressing AVIF images with Gulp, got the task running and produced the result we wanted: AVIF images that were smaller than the source image in either JPG or PNG format. This post will start from there and explore some further considerations on using avifenc to create images for the web. Unlike the previous post, the tasks here will try to mirror the following CLI commands. # Default AOM encoder avifenc –codec aom \ –min 40 –max 40 \ –jobs 4 \ –speed 10 \ –output squosh3.avif \ images/squosh.png The first pass

Now that AVIF support is enabled by default in Chrome stable (85) and Firefox (behind a flag) we really should look at how to encode images to AVIF as part of a build workflow. In my normal workflow, I use imagemin, gulp-imagemin, imagemin-mozjpeg, imagemin-webp, and, experimentally, imagemin-guetzli. As of right now, there is no Node package to compress AVIF images (either direct library manipulation or wrapper for the existing scripts) so we’re left to explore other options. Squosh compressing an image to AVIF The first one is to use a tool like Squoosh from the Google Chrome team. It is

One thing that has struck me over the last few years is our obsession with fast. The faster, the better, right? I’ve become interested in how do we define fast and whether performance is the only thing that matters? Sarah Drasner wrote this Tweet: I wrote a small article, called "In Defense of a Fussy Website" In it, I talk about sites I love, like @JoshWComeau @devopsjay @cassiecodes @stripe ✨ and also how we might be headed the wrong direction generally for UI/UX.https://t.co/rRaA6mzdNC — Sarah Drasner (@sarah_edo) June 27, 2020 The article reminds us that we’ve become so focused on

Sometimes it’s good to have performance data results as we build our projects. It tells us what we need to work on and where we can tweak things to improve performance. PageSpeed Insights provides command-line and a website-based tool to measure a site’s performance. It combines its own data with information obtained from the CrUX Report. Installing PSI CLI The first version of PSI we will install is the CLI version. We install this globally to make sure we can test from anywhere. npm i -g psi Once you publish your site to staging or production you can use the

Warning The support for these features depends on the browser and not all browsers support all the features discussed below. Check the corresponding entries on caniuse.com or MDN to ensure the feature will work in your target browsers. Using a font’s OpenType features on the web is possible but difficult. This post will explore what we can do and how we can do it. We will also explore how to figure out what OpenType features are available in fonts. A brief introduction OpenType fonts provide a set of features to enhance the way fonts appear on the page or screen.