Optimise image loading depending on the device resolution

[khanguslee]

Problems

Websites with slow loading images are not usable. The portfolio website currently loads the same sized image for all devices and network speeds.

Description

Using a bunch of gatsby plugins (of course), optimise the type of image to display on the website depending on the screen resolution.

This basically involves reading through the following tutorials: https://www.gatsbyjs.org/docs/working-with-images/
https://www.sitepoint.com/automatically-optimize-responsive-images-in-gatsby/
https://medium.com/@alexasteinbrueck/understanding-gatsby-image-part-2-responsive-images-101-14b04c8bfd62

When is it done?

When the website loads all images with different sizes depending on the screen resolution. This optimisation should be done for https://github.com/khanguslee/personal-website/blob/master/src/assets/images/avatar.png. It should also work for any other images inside the assets/images directory.