[repo] Optimize assets for expo-splash-screen, expo-processing, guides (

expo#13139)

Why
---
Several of the assets were unnecessarily large. The PNG files could be optimized losslessly and the GIF files could be replaced with H.264 MP4s. It is hard to underperform GIFs.

How
---
Optimized the PNGs with `optipng -o7`. Converted the GIFs to MP4s with Handbrake with the same resolution and RF=24. Total reduction of this PR is 38.8 MiB.

Since GitHub does not allow video tags in Markdown, I used GH's support for video uploads by manually dragging each MP4 file into a GitHub Markdown file and copying the URL. To make the expo-splash-screen README retain most of its look, I used table tags. GHM requires that video upload URLs be on their own line with a blank line above, which is why Markdown tables do not work.

Test Plan
---------
Preview the READMEs on GitHub itself, since GH needs to render the MP4 URLs as videos.

guides/Generating Jest Mocks.md

@@ -27,7 +27,7 @@ We provide some mocks of our native methods which are generated by traversing al
 
     lines. Select and copy the text from between those lines.
 
-    ![A GIF showing terminal output being selected and copied](./jest-expo-mocks.gif?raw=true)
+https://user-images.githubusercontent.com/379606/120577838-b4964a80-c3d9-11eb-93db-aba3ea9eef41.mp4
 
 5. Stop the Expo server running in `apps/jest-expo-mock-generator`, started in step 1.
 

packages/expo-processing/.npmignore

@@ -0,0 +1 @@
+/demo.mp4

packages/expo-processing/README.md

@@ -1,6 +1,6 @@
-![demo](demo.gif "demo")
+https://user-images.githubusercontent.com/379606/119428009-fb40c200-bcc0-11eb-8328-fb19e5d3557c.mp4
 
-*NOTE: GIF above looks weird some times because it's a GIF, the real thing is nice, I promise...*
+*NOTE: The recording above looks weird some times because of artifacts, the real thing is nice, I promise...*
 
 # expo-processing
 

packages/expo-splash-screen/README.md

@@ -25,17 +25,39 @@
 
 Scale the image uniformly (maintaining the image's aspect ratio) so that both dimensions the width and height of the image will be equal to or less than the corresponding dimension of the device's screen.
 
-| Android                                                      | iOS                                                      |
-| ------------------------------------------------------------ | -------------------------------------------------------- |
-| <img src="./assets/demo-android-contain.gif" height="350" /> | <img src="./assets/demo-ios-contain.gif" height="350" /> |
+<table>
+  <thead><tr><td>Android</td><td>iOS</td></tr></thead>
+  <tbody><tr>
+<td>
+
+https://user-images.githubusercontent.com/379606/120575867-aeeb3580-c3d6-11eb-825d-19a847fe30f5.mp4
+</td>
+<td>
+
+https://user-images.githubusercontent.com/379606/120575885-b6124380-c3d6-11eb-8485-75a11832962c.mp4
+</td>
+    </tr>
+  </tbody>
+</table>
 
 #### `COVER` resize mode
 
 Scale the image uniformly (maintaining the image's aspect ratio) so that both the width and height of the image will be equal to or larger than the corresponding dimension of the device's screen.
 
-| Android                                                    | iOS                                                    |
-| ---------------------------------------------------------- | ------------------------------------------------------ |
-| <img src="./assets/demo-android-cover.gif" height="350" /> | <img src="./assets/demo-ios-cover.gif" height="350" /> |
+<table>
+  <thead><tr><td>Android</td><td>iOS</td></tr></thead>
+  <tbody><tr>
+<td>
+
+https://user-images.githubusercontent.com/379606/120575871-b1e62600-c3d6-11eb-9435-5dee19791294.mp4
+</td>
+<td>
+
+https://user-images.githubusercontent.com/379606/120575890-b7437080-c3d6-11eb-9c0a-3c563d1ee02a.mp4
+</td>
+    </tr>
+  </tbody>
+</table>
 
 #### `NATIVE` resize mode
 
@@ -44,9 +66,16 @@ Scale the image uniformly (maintaining the image's aspect ratio) so that both th
 By using this resize mode your app will will leverage Android's ability to present a static bitmap while the application is starting up.
 Android (unlike iOS) does not support stretching of the provided image during launch, so the application will present the given image centered on the screen at its original dimensions.
 
-| Android                                                     |
-| ----------------------------------------------------------- |
-| <img src="./assets/demo-android-native.gif" height="350" /> |
+<table>
+  <thead><tr><td>Android</td></tr></thead>
+  <tbody><tr>
+<td>
+
+https://user-images.githubusercontent.com/379606/120575878-b3afe980-c3d6-11eb-80c1-72441c22e8be.mp4
+</td>
+    </tr>
+  </tbody>
+</table>
 
 > Animation above presents one of our [known issues](#native-mode-pushes-splash-image-up-a-little-bit)