WIP - Image Optimization

[ZeeshanZulfiqarAli]

Added pre-processing functionality which can optimize jpg & png images, which consists of two parts:

1. Creating a webp version of all the images.
2. Creating a compressed version of the images in the same format as the source.

The HTML produced for the image looks like:

<picture>
    <source srcset="./assets/no-idea-dog.webp" type="image/webp">
    <img src="./assets/no-idea-dog.png" alt="Markdown to HTMl" title="testing test">
</picture>

This helps make sure that if the client does not support webp, it can fall back to the source format safely.

The image also supports title which can be specified in markdown file as a second parameter, following the href of image:

![Markdown to HTMl](./assets/no-idea-dog.png "This is a title")

Changes to package.json

The pre-built command now executes pre-process.js script which optimize images of specific formats and copies rest of the files as is to the target directory of build/assets. This script supports optional commands:

• dontCompressImages: add this flag to prevent any optimizations for images. This also prevents webp image generation.
• dontGenerateWebp: add this flag to prevent webp generation of images in assets. Example usage: npm run pre-build -- --dontCompressImages npm run pre-build -- --dontGenerateWebp

TODO:

• [ ] Add support for more image formats.
• [ ] Configure script arguments to be more user friendly.
• [ ] Provide the ability to turn off image compression only and keep webp generation active.
• [x] Support script arguments with build command as well.

[netlify[bot]]

✅ Deploy Preview for compassionate-saha-53a9e6 ready!

Name	Link
🔨 Latest commit	d3dc883a7a46602aaba11b04c712e1d792f95b55
🔍 Latest deploy log	https://app.netlify.com/sites/compassionate-saha-53a9e6/deploys/626ebbd1ed55da0008f291f2
😎 Deploy Preview	https://deploy-preview-1--compassionate-saha-53a9e6.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tylermaran]

I'll pull this down later and try using a shellscript instead of the build.js (eliminates some packages). Also instead of command line arguments, we can make a config.json file where you can update some settings.

{
    author: "Zeeshan",
    authorImage: "../assets/image",
    preprocessImages: true,
    preprocessAuthorImage: true,
}

[tylermaran]

Made some updates in the rysolv branch over the last few weeks (https://github.com/rysolv/markdown_ssg/tree/rysolv. T'll try to get those into master so we can merge with this branch.

I've added a few things already (share links, config file, publish (t/f) flag) that should be pretty easy to work in without an issue.