diff --git a/README.md b/README.md
index 79b0066..4cfee5c 100644
--- a/README.md
+++ b/README.md
@@ -46,8 +46,56 @@ yarn add svelte-cloudinary
This will formulate the Cloudinary url and insert it into the `img.src` property.
Also it will resize to the `img` object itself because we set `bind: true`.
+## Key Concepts
+
+### `step`
+
+The `step` property (defaults to `200`) helps reducing the amounts of transformations cloudinary need to perform and less credits being billed to you.
+
+How? Basically whenever we calculate the dynamic size of the image rendered on the DOM we will get very specific numbers depending on the device.
+
+With `step` we approximate the size needed to a multiple of `step`.
+
+###### Example
+
+Immagine the same `` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively.
+
+With a `step` size of e.g. `100` (``) they will become `500`, `500`, and `1100`. This will limit the ammount of transformations needed.
+
+### `bind`
+
+With bind we can dynamically set the width and/or height of the transformet image depending of the rendered size.
+
+- `bind: this` The size of the `` element
+- `bind: el` The computed size of another element in the dom (usefull for a carousell e.g.)
+- `bind: { width: this }` Only bind the width, leaving the height free. Also works with height of course
+- `bind: { width: '.wrapper' }` Finds the closest element that matches the selector and uses it for width.
+
+##### Note
+
+If you provide a `bind` options (``) but no crop option, we will automcatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary.
+
+###### TLDR;
+```svelte
+
+
+
+```
+
+
## ⌨️ Examples
+### Fixed size
+
+```svelte
+
+```
+
+
+### `bind`
+
```svelte