![]() 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. Necessary? Not at all! But I do have fun doing it.Images take up to 50% of the total size of an average web page. I regularly use functions ranging from a mktest() function, that creates an empty $1.test.js file for me, to more robust createDirectory() functions with a specified language to create entire components, classes, functions, or CSS module scaffolding for me. As with all programming, the possibilities are endless. custom_commands.sh on your system, put it to good use. There we go, using just one line we were able to resize the card images to exactly the height we’d need, while converting them to a more optimized format and severely reducing the size of our assets. Make sure that second argument is in a string, otherwise it will see it as multiple arguments. For me, the most commonly used flag is -resize, but you can find the entire list of parameters available to optionally add at. This allows us to add any additional parameters from ImageMagick that we would like applied to the images. custom_commands.sh we are going to write a function called ctwp() (“Convert to weppy,” I whisper to myself every time I type it). Once we restart (or restart bash), this is going to give us access to any functions we place inside. bashrc, we are going to add this line (I added it below my aliases, but honestly anywhere is fine): We’re going to make a new file in our computer’s home directory. But, we are going to take this an unnecessary step further. Perfect! Now we can do that for every image. webp for us.Īnd the requirements to solve our problem:Īs you may have already derived, we could easily convert and resize the images in one command using ImageMagick:Ĭonvert bull.jpg -resize 圆00 bull-optimized.webp ImageMagick can convert jpegs, PNGs, and more to.ImageMagick can resize an image based on width, height, or both.webp and resize them to fit in the grid with one, reusable line. So, we’re going to write a custom shell command to iterate through this directory and convert all the images to. Now, we’re going to shave even more seconds off our day. Was the extra step worth it for 8KB? Yes. How much does it reduce our load? It’s not as much as the resize, but enough. And that’s what we need, so we are going to use it.Īnd again, we are going to use ImageMagick’s CLI.Ĭonvert bull-resized.jpg bull-resized.webpĪnd now we have a. webp? It’s a ‘next-gen’ format given to us by Google that severely reduces file size. So if you are too, I suggest you move on to the next step. But again, I am trying to shave precious seconds and mouse clicks off my day. Now, we could do this command for every image. Perfect! It resized it to a height of 600, adjusted for the width, kept the quality, and already reduced the file size to 59.5 KB (from 5.3MB ). Let’s check the first image using ImageMagick’s identify command: Inside this test directory, I have just the four images (and a backup folder of the originals). Ok, now ImageMagick is installed (if it wasn’t already), and so we are going to open up our terminal and `cd` into the directory. To install ImageMagick, regardless of your OS, just follow the website’s instructions. The easiest way to do this is through the command line. Instead, we are going to use ImageMagick CLI. Step 0 – Setting UpĪs mentioned before, there are plenty of ways to resize this photo online and using a GUI. Resize the images to only be as big as you need.Īfter that, we’ll make it difficult by adding more, unnecessary steps.The images are lined up in a grid, with a max-height of 600px.Isn’t that what programming is? The staging: Why spend three minutes when you can spend half an hour making sure you never have to spend those three minutes again. You write a shell script to do it for you. That could literally take almost three minutes. You don’t want to have to do that for four different images. Half the time a cat is laying on it anyways. If you’re anything like me, you absolutely hate using your mouse. Not a problem, there are plenty of websites such as Squoosh, or programs such as Photoshop, Krita, or Image Magick who could handle the compression of these images for you with a few mouse clicks. The website now takes eight seconds to load. There are four new images that just need to be added to a static folder shipped with the frontend. The pictures are beautiful, Lighthouse is happy, and nothing could be better. jpgs you’d like to convert, run in the terminal: ctwp jpg custom_commands.sh in your home directory. Add the above function to a file called.
0 Comments
Leave a Reply. |