Enforce all images in wechaty website to use `.webp` format

[huan]

Because the .webp format has lots of advantages and the safari has supported it last year which means all the modern browsers will be able to compatible with it.

The plan is:

1. write a new unit test to disable all other image extensions. like: .gif, .jpg, .png, etc.
2. convert all the existing image files in our repo to .webp and update all the references in all files.

Please feel free to let me know if you have any comments by replying to this issue.

• [x] Convert all Jekyll blog contributors' images to .webp format and updated the corresponding links.
• [x] Convert all Jekyll blog posts images to .webp format and updated the corresponding links:
  • #1328
• [ ] Convert all Docusaurus site images to .webp format and updated the corresponding links.
• [ ] Convert all miscellaneous images to .webp format which are in the root directory of the repository.
• [ ] Make sure all necessary images are converted to .webp format and pages do not have broken links. Also, update https://github.com/wechaty/wechaty.js.org/blob/master/tests/workaround.ts accordingly.

[iamrajiv]

Hi, @huan this is a great idea. Implementing this will help in making consistency across the images and also since WebP lossless images are smaller in size than PNGs and other image formats so will enhance the rendering.

I tried converting the image locally using cwep. It is a WebP encoder that can be invoked with the cwebp command.

I have written a simple UNIX script to convert other image extensions to .webp format with the same file name.

find ./ -type f -name '*.jpeg' -exec sh -c 'cwebp -q 100 $1 -o "${1%.jpeg}.webp"' _ {} \;
find ./ -type f -name '*.jpg' -exec sh -c 'cwebp -q 100 $1 -o "${1%.jpg}.webp"' _ {} \;
find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 100 $1 -o "${1%.png}.webp"' _ {} \;

The above UNIX script converts all images of the directory into .webp format. Also, we have to delete other images that are not .webp format so to do this I used the below script.

find . -type f \( -iname '*.jpeg' -o -iname '*.jpg' -o -iname '*.png' \) -delete

After this we have to update the URLs and image links in documents so to do this we can use regular expressions.

[huan]

Thank you @iamrajiv for supporting this decision, and your cwebp command convertion script works like a charm!

huan@dev:~/wechaty/wechaty.js.org/docusaurus/static/img/docs/quick-start$ ls
cloud_shell_editor.png  trust_the_repo.png  wait_for_provisioning_to_complete.png
huan@dev:~/wechaty/wechaty.js.org/docusaurus/static/img/docs/quick-start$ find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 100 $1 -o "${1%.png}.webp"' _ {} \;
Saving file './wait_for_provisioning_to_complete.webp'
File:      ./wait_for_provisioning_to_complete.png
#...

I have just added a new unit test for enforcing this issue: the CI will not be passed in the future if we are using other image format than the perfect .webp.

And we have lots of old images need to be fixed, I have put them in a to be fixed list at https://github.com/wechaty/wechaty.js.org/blob/master/tests/workaround.ts . It seems that we need a volunteer to help the community to analytics those list, and at least do the following steps to improve them:

1. build a list of image files for converting to .webp format
2. convert them to .webp
3. update the blog posts / docs files with the updated file name with .webp extension.
4. make sure eveything is ok by running the unit tests and view the deployed website.

@iamrajiv would you like to try this for the community? this is really a huge task, but I believe it can be done with the help of some smart scripts.

[iamrajiv]

Yeah, sure @huan will try this out. Also, I would suggest making the PR review easy let's break this task into subtasks:

1. Convert all images of the Docusaurus site and corresponding links to them.
2. Convert all images of Jekyll blogs and corresponding links to them.

[huan]

@iamrajiv it's great to know that you will try it out, thanks for taking this huge job for the community!

I agree with you that the best practice is to use PR to submit the changes, and Jekyll and docusaurus can be split as well, and it would be better if we can split all the changes to small groups so that we can have more small PRs.

[huan]

@iamrajiv Thanks for PR #1072, it's a great job!

For the GIF and ICO, I believe we should keep ICO unless there has a reason to convert it, and I'd like to suggest that the GIF should be converted to the animated .webp format.