Note: It is strongly recommended to backup your images before proceeding. OK, we have our images in the original-images directory from the GitHub repo. SVGO and svgexport are Node packages that optimize SVG assets.ImageMagick: works with all kinds of raster images.It’s a good idea to know what we’re working with before we start using them: Sudo apt-get install imagemagick webp jpegoptim optipng Here are the commands for all of the dependencies we need to start optimizing images: sudo apt-get update Again, we’re writing Bash scripts, so we’ll be spending time in the command line. Set upīefore we start, let’s get all of our dependencies in order. This GitHub repo has all the images we’re using and you’re welcome to grab them and follow along. The idea is to optimize images before we serve them so that users get the most visually awesome experience without all the byte bloat. In this tutorial, we will write bash scripts that create and optimize images in different image formats, targeting the most common formats, including JPG, PNG, WebP, and SVG. There are tons of ways we can make smaller and optimized images. And while they aren’t really in the same class as raster images, SVGs are another format many of us have been using in recent years because of their inherently light weight. Although these new formats are still in development and generally have limited browser support, one of them, WebP, is gaining a lot of attention. Researchers around the world are busy developing new image formats that possess high visual quality despite being smaller in size compared to other formats like PNG or JPG. And if they’re downloading extra bytes, the site not only takes that much more time to load, but users are using more data, both of which can be resolved, at least in part, by optimizing the images before they are downloaded. And if images are not optimized, users end up downloading extra bytes. Images take up to 50% of the total size of an average web page.
0 Comments
Leave a Reply. |