chore(example): Add export example

MarcusCemes · Mar 23, 2019 · 5752c71 · 5752c71
1 parent 7a0aa19
commit 5752c71
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 0 deletions.
diff --git a/example/EXAMPLE.md b/example/EXAMPLE.md
@@ -0,0 +1,32 @@
+# An example Responsive Image Builder export
+
+![The original Unsplash image](a-pretty-background.jpg)
+
+<p align="center"><sub>
+The original picture from Unsplash is 4MB. It measures 6000x4000.
+</sub></p>
+<br>
+
+The export contains the pictures obtained with RIB using the default configuration. The standard-sized WebP image is only 134KB! That's roughly a 25% reduction in size and bandwidth compared to its identical JPEG twin.
+
+This is the kind of reduction that you can expect from WebP while maintaining the same or slightly superior quality. By playing with the encoding settings, you could drive those file-sizes down even further.
+
+See for your self!
+
+<br>
+
+![The resized JPEG image](export/a-pretty-background_normal.jpg)
+
+<p align="center"><sub>
+A decent 1620x1080 JPEG export that is 180KB
+</sub></p>
+<br>
+
+![The resized WebP image](export/a-pretty-background_normal.webp)
+
+<p align="center"><sub>
+A superior 1620x1080 JPEG WebP that is 134KB. Can you tell the difference?
+</sub></p>
+<br>
+
+Photo by Nathaniel Foong on [Unsplash](https://unsplash.com/photos/OVfKK18xzHA)
diff --git a/example/a-pretty-background.jpg b/example/a-pretty-background.jpg
diff --git a/example/export/a-pretty-background_large.jpg b/example/export/a-pretty-background_large.jpg
diff --git a/example/export/a-pretty-background_large.webp b/example/export/a-pretty-background_large.webp
diff --git a/example/export/a-pretty-background_normal.jpg b/example/export/a-pretty-background_normal.jpg
diff --git a/example/export/a-pretty-background_normal.webp b/example/export/a-pretty-background_normal.webp
diff --git a/example/export/a-pretty-background_small.jpg b/example/export/a-pretty-background_small.jpg
diff --git a/example/export/a-pretty-background_small.webp b/example/export/a-pretty-background_small.webp
diff --git a/example/export/a-pretty-background_thumbnail.jpg b/example/export/a-pretty-background_thumbnail.jpg
diff --git a/example/export/a-pretty-background_thumbnail.webp b/example/export/a-pretty-background_thumbnail.webp
diff --git a/example/export/manifest.json b/example/export/manifest.json
@@ -0,0 +1 @@
+{"exports":[{"name":"a-pretty-background","fullName":"a-pretty-background","extension":".jpg","webp":true,"sizes":[{"name":"thumbnail","width":16,"height":11},{"name":"small","width":1080,"height":720},{"name":"normal","width":1620,"height":1080,"default":true},{"name":"large","width":3240,"height":2160}]}]}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"exports":[{"name":"a-pretty-background","fullName":"a-pretty-background","extension":".jpg","webp":true,"sizes":[{"name":"thumbnail","width":16,"height":11},{"name":"small","width":1080,"height":720},{"name":"normal","width":1620,"height":1080,"default":true},{"name":"large","width":3240,"height":2160}]}]}