![]() Webpack or Gulp), whereas the CLI is a good choice for simple projects or if you'll only need to convert images once. The Imagemin WebP plugin is generally the best choice if your project uses build scripts or build tools (e.g. People generally use one of the following approaches for converting their images to WebP: the cwebp command-line tool or the Imagemin WebP plugin (npm package). Lossy compression reduces file size, but at the expense of possibly reducing image quality. In addition, WebP offers both lossless and lossy compression. WebP is an excellent replacement for JPEG, PNG, and GIF images. Facebook experienced a 25-35% filesize savings for JPEGs and an 80% filesize savings for PNGs when they switched to using WebP.YouTube found that switching to WebP thumbnails resulted in 10% faster page loads.This decreases page sizes and improves performance. WebP images are smaller than their JPEG and PNG counterparts-usually on the magnitude of a 25–35% reduction in filesize. Verify WebP usage Why should you care? #.Instead of using the tag in HTML, we can wrap it with the element to serve responsive images. Test it! The transform-image task will run every time you push your code. Once installed, add this configuration to your package.json: // package.json To do this, you can use the Husky package. package.jsonĪnother option is to run the tasks every time before we git push or git commit our changes. One option is to create a prestart NPM script to run the transform-image every time before starting the local server. However, I prefer to do it locally, because I need to visualize the images during development or writing time (also to save some build minutes on GitHub □). You can set up a new GitHub Actions to do so (read my 2nd post on Setting up GitHub Actions and Firebase Hosting). I don't want to run the command manually every time Great! We saved our time and the Earth (less processing power □) successfully. It should convert just the newly added images. We need to pass in an additional parameter to the changed function to make it work.Ĭheck the gulp-changed documentation if you want to compare the files with other methods. However, convertWebp function changes the file extension from JPG to WebP. Great, here is the code to resize our images: // tasks/Ĭonst ) )įor the resizeImage function, both input and output filenames are the same, so we just need to call the changed function to compare. I followed Angular naming conventions - and dashed-case personally. I prefer to organize build tasks in tasks directory. You can give the file any name and place it anywhere in your project. Next, create a Gulp file and start coding. Npm install gulp gulp -cli jimp through2 -D Let's roll up our sleeves and start by installing the packages! # run command Take note that you can use Jimp independently to resize the images, but I find it easier to automate that with Gulp. We will be using Gulp as our build tool and the Jimp for our image processing library. Exclude files with prefix favicon- or suffix -256.For example, we might want to generate images with 300px in the future. Output the resized files to assets/img-500 folder.Only resize images with jpg or png format.Here is an overview of how images are organized in the project: # image folder 1024 x any height px - Used in content (e.g.1200 x 675 px - Used as post cover in collection listing (e.g.Most original images in jec.fyi have similar traits: only load when user scrolls to it)Ī brief walkthrough on the images structure serve smaller images for mobile, and bigger one for desktop) You may jump straight to the code, jec-11ty-starter on GitHub, but this post contains some useful tips on image optimization and testing, so you might not want to miss! What are performant images?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |