Enhancement: Optimize Images on community page

[Rahulm2310]

Actual Behaviour A picture speaks thousand words, but if the picture is of large size, it takes forever to load. Large images slow down the web pages which creates a less than optimal user experience. We can reduce the image’s file sizes to help improve our website’s performance.

Expected Behaviour We can reduce the image sizes without compromising the image quality and thus decrease the loading time and increase performance.

Steps to reproduce it

1. Go to https://p5js.org/community/contributors-conference-2019.html
2. Right Click -> Inspect Element -> Go to Network Tab

3. Check out the file sizes and loading time

   Screenshots of the issue Here's a screenshot of network tab :

I tried compressing one of the images from the community page. Here are the results

Before Optimization : Size -> 1.4 MB

After Optimization : Size -> 381.8 KB

Would you like to work on the issue? YES, I would like to take up this issue.

@lmccart @limzykenneth What do you guys say ?

[limzykenneth]

We technically already have a build step that should take care of this called imagemin, is it somehow not working? Is there some other options we can pass to it for further optimizations?

[Rahulm2310]

@limzykenneth I looked into the console. Seems that it is running but there is no reduction in the image sizes.

Running "imagemin:images" (imagemin) task
Minified 155 images (saved 6.31 MB - 10.9%)

I even tried optimization level 5, still no change.

[limzykenneth]

Is there some additional options that we can pass to imagemin for it to make the images smaller?

[Rahulm2310]

@limzykenneth We need to pass mozjpeg plugin for optimizing jpg images. Currently we are not passing it in options. I tried passing it and it worked. You can check it here

Running "imagemin:dynamic" (imagemin) task
Minified 89 images (saved 33.6 MB - 67.2%)

I will fix it and create a PR asap.