From c3b29a36fdf2797b056511b60b1def37dc296f49 Mon Sep 17 00:00:00 2001
From: Edivan Silva <codedavinci.now@gmail.com>
Date: Wed, 13 Dec 2017 10:52:50 -0800
Subject: [PATCH] docs(image): Add documentation for Image component -
 styleguide

---
 src/components/Image/Image.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Image/Image.md b/src/components/Image/Image.md
index ede0ff6f2e..4ce486daa5 100644
--- a/src/components/Image/Image.md
+++ b/src/components/Image/Image.md
@@ -1,3 +1,12 @@
+### Usage criteria
+
+* We recommend not to `resize/crop` images in the browser.
+* The width and height should be the same ratio as the natural width and height of the image.
+* Image optimization should be done BEFORE rendering.
+* You can use the `contentful API` to request an image of a certain size.
+* `rounded="circle"` requires a square image `(width == height)` in order to generate a perfect circle.
+* Non-square images will give a warning and will appear oval shaped.
+
 ```jsx
 <Image src="image-example.jpg" rounded="corners" width={300} height={300} alt="Image of co-workers collaborating" />
 ```