GitHub Image Optimization with VSCode Git


GitHub Image Optimization with VSCode Git

A blog around performance.

by Thierry Passeron

Introduction

I write a lot about performance on this blog. Usually it’s about client-side web performance, but I also write about server-side performance and how to make a website faster for your users. I’m the type of person who cares about the last second of loading time and the last byte that could be removed from an HTTP response. The fact that images are usually responsible for 50% to 75% of a website’s weight is usually what gets me started on another rant about image optimization. Well, today is… different! Today, I’m going to talk about something else: why my site became horribly slow and how I fixed it. And it had nothing to do with images or client-side rendering!

The problem

GitHub Pages is a great service: you can host static websites for free (with a custom domain name) without having to manage any infrastructure, yay! You can even enable HTTPS by default using CloudFlare (no more mixed content warnings). But there’s one catch: you can only host static assets. This means that if your page has some user interactions (e.g., reloading

GitHub Image Optimization with VSCode Git

A blog around performance

Why?

This is something nobody talks about, but it is real. We look for every trick to make our website load faster or have better performance, but we never think about the size of the image on our repo. You can run all the tools you want, but at the end, all of them are looking at your generated code and not at your repository.

A few months ago I received an email from GitHub telling me that I was using too much bandwidth on my repositories and that I would need to upgrade my plan. I thought it was a joke until I saw all my images in my PRs. How could this be possible? My images were optimized, and I was using a CDN to deliver them! Then I realized what had happened: the PRs I was submitting were full of unoptimized images.

VSCode Git

I’m not sure how many people use VSCode Git, but it’s a great tool with some cool features like commit history and diffs.

It’s been a while since I first wrote about image optimization with VSCode and Git. The article, as many others on Frontend Performance Weekly, was written when I was working at Microsoft. I am no longer there, so the article is outdated, but it doesn’t matter. You don’t need Microsoft’s tools to optimize your images in GitHub.

The only problem is that the scripts are for Mac and Linux only. But, if you want to optimize your images in GitHub with VSCode and Git, we can find a workaround for Windows users too!

If you want to leverage VSCode and Git to optimize your images in GitHub, go ahead and read my old article: GitHub Image Optimization with VSCode Git.

Windows users will have to install imglint and gifsicle first because the scripts are written for Mac and Linux systems only (and you need those tools).

Once installed, open the scripts/ directory in your project (the one where you put your scripts) in an editor like Notepad++ or VS Code (I recommend the latter).

You will see two files: image-optimize-commit-message-hook.sh and image-optimize-pre-

I love Git. I use GitHub every day, but one thing that always annoyed me was the lack of image optimization. You see, I write a lot of blog posts and tutorials on how to build cool stuff with React and other JavaScript goodies.

It is usually super helpful to have some images because a picture is worth a thousand words. However, for the past year, I have been using VSCode for writing my code and my blog posts. To make sure that Git commits are not full of useless files like .DS_Store or node_modules (if you are using yarn), I have been following this Twitter thread by Dan Abramov since 2017. However, I found myself wishing for something similar for images.

That’s when I decided to create git-image-optimizer — a small VSCode extension that optimizes images as pre-commit hook. If you are interested in how it works under the hood, check out my blog post: How to optimize images with NodeJS and Sharp.

I recently had the need to optimize images on my blog and was curious if there was a way to automate this process. I found out that you can add a git pre-commit hook to do this. A pre-commit hook is a script that will run every time you try to commit your code. This lets me use the standard VSCode Git integration rather than having to install a separate plugin.

I wanted to do two things in order to optimize my images:

– Minify any image – PNG, JPG, SVG, etc (anything supported by TinyPNG)

– Crop larger images down to their largest dimension of 1920px

I use VSCode and GitHub a lot, especially for images. When working with images, you have to remember that the goal is to have an image as small as possible without sacrificing too much of its quality. Because of that I made a few rules for myself when it comes to using VSCode and GitHub for my projects.

1. Use VS Code.

2. Use Git.

3. Do not commit images larger than 1000x1000px or 1MB in size (whichever comes first).

4. Always commit .svg files when possible (see below).

5. Do not allow VS Code to automatically update your git commits/changes (VS Code will do this as a part of its saving process).


Leave a Reply

Your email address will not be published.