GitBook: [master] 39 pages and 22 assets modified

Author: Dmitry Pokidov

.gitbook/assets/add-domain-1.png

@@ -0,0 +1,34 @@
+# Overview
+
+[**Pixboost**](https://pixboost.com/) ****is a Cloud Service that resizes and optimises Raster Images \(e.g. \*.jpg, \*.png, etc\) for file size reduction and decreased Load Times. Once an image has been processed, it's file is cached on CDN, increasing the speed at which images can be retrieved on subsequent requests.
+
+The service can also be used to resize and crop images, which makes generating responsive images that respect the device and screen size on which they are being displayed simple to achieve. Using the service requires modifications to the image URL.
+
+Below is the diagram on Pixboost brief architecture.
+
+![](.gitbook/assets/pixboost-concept.jpg)
+
+Below is a short video that shows image transformations in action:![](.gitbook/assets/pixboost-api-overview.gif)
+
+To start working with the service you would only need to register and [add you image source](setup/adding-image-source.md).
+
+If you have any questions/feedback please do not hesitate to reach us on **[email protected]**. We also have great [FAQ](https://pixboost.com/faq.html) where you might find answers to your questions.
+
+Please, consider the following sources for more information:
+
+## [Quick Start Guide](https://help.pixboost.com/quick-start-10-minutes-or-less.html)
+
+## [Tools and setup](https://help.pixboost.com/setup/)
+
+## [Supported Image Formats](setup/supported-formats.md)
+
+## [URL-based Integration](https://help.pixboost.com/api/)
+
+## [Pixboost.js Integration](web-dom/)
+
+## [ReactJS Integration](react/)
+
+## [API Sandbox](https://pixboost.com/docs/api/)
+
+## [Questions and Answers](https://help.pixboost.com/questions-and-answers.html)
+

.gitbook/assets/add-domain-2.png

@@ -0,0 +1,41 @@
+# Table of contents
+
+* [Overview](README.md)
+* [Quick Start \(10 minutes or less\)](quick-start-10-minutes-or-less.md)
+* [Billing and Prices](billing.md)
+* [Tools and Setup](setup/README.md)
+  * [Adding Image Source](setup/adding-image-source.md)
+  * [Managing API Keys](setup/manage-api-keys.md)
+  * [Snippet Generator](setup/snippet-generator.md)
+  * [Custom Domain Name](setup/custom-domain.md)
+  * [Cache Invalidation](setup/cash-invalidation.md)
+  * [Supported Image Formats](setup/supported-formats.md)
+  * [HTTP/2 Support](setup/http2-support.md)
+  * [CDN Support](setup/cdn-support.md)
+* [API. URL-based integration](api/README.md)
+  * [Resize](api/resize.md)
+  * [Fit](api/fit.md)
+  * [Optimise](api/optimise.md)
+  * [As is](api/as-is.md)
+  * [Cache Invalidation](api/cache-invalidation.md)
+* [API. JavaScript Integration](web-dom/README.md)
+  * [Installation](web-dom/install.md)
+  * [Responsive Images](web-dom/responsive-images.md)
+  * [Not responsive images](web-dom/not-responsive-images.md)
+  * [CSS Background images](web-dom/css-background-images.md)
+  * [Lazy Loading](web-dom/lazy-loading.md)
+  * [Replacing on Document Load](web-dom/replacing-on-document-load.md)
+  * [Custom Domain Name](web-dom/custom-domain-name.md)
+  * [Reloading](web-dom/reloading.md)
+  * [Disabling](web-dom/disabling.md)
+  * [Browsers Support](web-dom/browsers-support.md)
+* [API. ReactJS integration](react/README.md)
+  * [Installation](react/install.md)
+  * [Responsive images](react/responsive-images.md)
+  * [Non-responsive images](react/non-responsive-images.md)
+  * [Configuration Object](react/configuration-object.md)
+  * [Browsers Support](react/browsers-support.md)
+  * [Build](react/build.md)
+* [Performance Testing](proper-performance-testing.md)
+* [Open Source Version](open-source-version.md)
+

.gitbook/assets/add_domain_form.png

@@ -0,0 +1,76 @@
+# API. URL-based integration
+
+To make integration easier we came up with URL-based integration. Which means all you need to do is to setup image URL for tags **<img>** and **<picture>** to start using [Pixboost](https://pixboost.com/).
+
+## URL pattern for API call
+
+`https://pixboost.com/api/2/img/[IMAGE_URL]/[OPERATION]?[OPERATION_PARAMS]&auth=[API_KEY]`
+
+| Item | Description |
+| :--- | :--- |
+| **\[IMAGE\_URL\]** | The URL of the original image you would like to process through Pixboost. |
+| **\[OPERATION\]** | Pixboost function call |
+| **\[OPERATION\_PARAMS\]** | Pixboost parameters for a function call you are using |
+| **\[API\_KEY\]** | A unique key created by Pixboost for security purposes |
+
+### Example using tag **<img>**
+
+Before:
+
+`<img src="http://www.midday.coffee/assets/cup.jpeg" alt="Midday Coffee">`
+
+After:
+
+`<img src="http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/resize?size=200x100&auth=MTg4MjMxMzM3MA__" alt="Midday Coffee">`
+
+### Example using tag **&lt;picture&gt;**
+
+Before:
+
+```text
+<picture>
+```
+
+```markup
+    <source srcset="http://www.midday.coffee/assets/cup.jpeg" 
+        media="(min-width: 769px)">
+    <source srcset="http://www.midday.coffee/assets/cup.jpeg" 
+        media="(max-width: 768px)">
+    <source srcset="http://www.midday.coffee/assets/cup.jpeg" 
+        media="(max-width: 576px)">
+    <img src="http://www.midday.coffee/assets/cup.jpeg">
+</picture>
+```
+
+After:
+
+```markup
+<picture>
+    <source srcset="https://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/optimise?auth=API_KEY" 
+        media="(min-width: 769px)">
+    <source srcset="https://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/resize?size=300&auth=API_KEY" 
+        media="(max-width: 768px)">
+    <source srcset="https://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/fit?size=100x100&auth=API_KEY" 
+        media="(max-width: 576px)">
+    <img src="http://www.midday.coffee/assets/cup.jpeg">
+</picture>
+```
+
+We support main resizing transformations that you would need for your website.
+
+![](../.gitbook/assets/operations-diagram-aboutpage.png)
+
+Read more on operations:
+
+## [Resize](resize.md)
+
+## [Fit](fit.md)
+
+## [Optimise](optimise.md)
+
+## [As is](as-is.md)
+
+## [Cache Invalidation](cache-invalidation.md)
+
+You can explore API sandbox here: [https://pixboost.com/docs/api/](https://pixboost.com/docs/api/)
+

.gitbook/assets/api-keys-list.png

@@ -0,0 +1,18 @@
+# As is
+
+API endpoint - `/api/2/img/[IMAGE-URL]/asis?`
+
+## Description
+
+**Asis** - does not perform any transformations. Respond with the original image without any modifications. Would be useful to leverage CDN.
+
+## Parameters
+
+No parameters required.
+
+### Sandbox
+
+| Original Image | Image after Pixboost transformation |
+| :--- | :--- |
+| [www.midday.coffee/assets/cup.jpeg](https://github.com/dmitrypokidov/pixboost/tree/c6f1ddd25e878d9100600d2df063f6910794593f/www.midday.coffee/assets/cup.jpeg) | [http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/asis?&auth=MTg4MjMxMzM3MA\_\_](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/asis?&auth=MTg4MjMxMzM3MA__) |
+

.gitbook/assets/api_keys.png

@@ -0,0 +1,26 @@
+# Cache Invalidation
+
+API endpoint - `DELETE /api/2/img/[IMAGE-URL]?auth=[API_SECRET]`
+
+## Description
+
+This a service endpoint that allows you to invalidate images cached on CDN.
+
+We recommend that you use invalidation sparingly and only as a last resort. For example, invalidation is useful when you must remove content for legal reasons or because of an accidental upload. Otherwise, we recommend that you use versioning whenever possible or wait until the content expires normally.
+
+Calling example using curl:
+
+```text
+curl -X DELETE 'https://pixboost.com/api/2/img/http://www.midday.coffee/banner.jpeg?auth=ABCDEF'
+```
+
+## Limitations
+
+Invalidation is intended for use in exceptional circumstances, not as part of your normal workflow. Importantly, invalidations don't affect cached copies in web browser caches or caches operated by third-party Internet service providers.
+
+Invalidations are rate limited. You can submit at most one invalidation per minute.
+
+## Parameters
+
+API\_SECRET - secret key. This secret key is not public and _should not_ be shared.
+

.gitbook/assets/bandwidth-example-diagram.jpg

@@ -0,0 +1,28 @@
+# Fit
+
+API endpoint - `/api/2/img/[IMAGE-URL]/fit?size=[NEW-SIZE]`
+
+## Description
+
+**Fit** - resizes image, crops it to the size and optimises it using lossy compression. If you need to resize image with preserved aspect ratio then use [resize operation](https://help.pixboost.com/api/resize.html).
+
+## Parameters
+
+**size** - new size \(in pixels\) of the image in the format `WIDTHxHEIGHT`.
+
+You have to specify both dimensions \[width\] and \[height\].
+
+### Example
+
+size =`200x100 (scaling by the smaller side which is height, cropping sides, center positioning)`
+
+| Options | Original | After |
+| :--- | :---: | :---: |
+| size=200x100 | ![](http://www.midday.coffee/assets/cup.jpeg) | ![](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/fit?size=200x100&auth=MTg4MjMxMzM3MA__) |
+
+### Sandbox
+
+| Original Image | Image after Pixboost transformation |
+| :--- | :--- |
+| [www.midday.coffee/assets/cup.jpeg](https://github.com/dmitrypokidov/pixboost/tree/c6f1ddd25e878d9100600d2df063f6910794593f/www.midday.coffee/assets/cup.jpeg) | [http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/fit?size=200x100&auth=MTg4MjMxMzM3MA\_](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/fit?size=200x100&auth=MTg4MjMxMzM3MA__)\_ |
+

.gitbook/assets/cdn-diagram-aboutpage.jpg

@@ -0,0 +1,24 @@
+# Optimise
+
+API endpoint - `/api/2/img/[IMAGE-URL]/optimise?`
+
+## Description
+
+**Optimise** - optimises images using lossy compression automatically.
+
+## Parameters
+
+No parameters required.
+
+### Example
+
+| Options | Original | After |
+| :--- | :---: | :---: |
+| at least 20% lighter | ![](http://www.midday.coffee/assets/cup.jpeg) | ![](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/optimise?&auth=MTg4MjMxMzM3MA__) |
+
+### Sandbox
+
+| Original Image | Image after Pixboost transformation |
+| :--- | :--- |
+| [www.midday.coffee/assets/cup.jpeg](https://github.com/dmitrypokidov/pixboost/tree/c6f1ddd25e878d9100600d2df063f6910794593f/www.midday.coffee/assets/cup.jpeg) | [http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/optimise?&auth=MTg4MjMxMzM3MA\_\_](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/optimise?&auth=MTg4MjMxMzM3MA__) |
+

.gitbook/assets/code-snippet-html.png

@@ -0,0 +1,29 @@
+# Resize
+
+API endpoint - `/api/2/img/[IMAGE-URL]/resize?size=[NEW-SIZE]`
+
+## Description
+
+**Resize** - resizes image with preserving aspect ratio and optimizes it using lossy compression. If you need the exact size then use fit operation.
+
+## Parameters
+
+**size** - new size \(in pixels\) of the image in the format `WIDTH and xHEIGHT`.
+
+You can specify only one dimension and the second will be calculated according to aspect ratio of the image.
+
+### Examples
+
+| Options | Original | After |
+| :--- | :---: | :---: |
+| size=200 | ![](http://www.midday.coffee/assets/cup.jpeg) | ![](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/resize?size=200&auth=MTg4MjMxMzM3MA__) |
+| size=x80 | ![](http://www.midday.coffee/assets/cup.jpeg) | ![](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/resize?size=x80&auth=MTg4MjMxMzM3MA__) |
+
+### Sandbox
+
+Please, feel free to test this in your browser to see how it works.
+
+| Original Image | Image after Pixboost transformation |
+| :--- | :--- |
+| [www.midday.coffee/assets/cup.jpeg](https://github.com/dmitrypokidov/pixboost/tree/c6f1ddd25e878d9100600d2df063f6910794593f/www.midday.coffee/assets/cup.jpeg) | [http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/resize?size=200x100&auth=MTg4MjMxMzM3MA\_\_](http://pixboost.com/api/2/img/http://www.midday.coffee/assets/cup.jpeg/resize?size=200x100&auth=MTg4MjMxMzM3MA__) |
+

.gitbook/assets/domains-list.png

@@ -0,0 +1,39 @@
+# Billing and Prices
+
+We bill only for the bandwidth. So, you pay only for what your website uses and nothing more. It’s as simple as abc.
+
+* Imagine, you have a logo.png image which weights 1MB on your website.
+* We compress it to 600KB.
+* Let’s pretend that 100 users saw it.
+* So, the calculation would be: 600KB \* 100 views = 60 MB of billed bandwidth.
+
+![](.gitbook/assets/bandwidth-example-diagram.jpg)
+
+| FREE | S | M | L | ENTERPRISE | Open Source |
+| :--- | :--- | :--- | :--- | :--- | :--- |
+| $0 | $5/month | $25/month | $80/month | Custom pricing | $0 |
+| 2GB | 10GB | 50GB | 200GB | Unlimited bandwidth | Not Supported |
+| Unlimited Image Processing | Unlimited Image Processing | Unlimited Image Processing | Unlimited Image Processing | Unlimited Image Processing | Full image transformation and optimization functionality |
+| Free up to 2 GB | Billed Monthly | Billed Monthly | Billed Monthly | Billed Monthly / Annualy | Free |
+| CDN | CDN | CDN | CDN | CDN | Not Supported |
+| Custom Domain Name Not Supported | Free Custom Domain Name Support | Free Custom Domain Name Support | Free Custom Domain Name Support | Free Custom Domain Name Support | Not Supported |
+| SLA Not Supported | SLA | SLA | SLA | SLA | SLA Not Supported |
+| Consulting Services available | Free Integration Support | Free Integration Support | Free Integration Support | Free Integration Support | Consulting Services available |
+| 1-3 Days Support | 5-8 Hours Support | 3-5 Hours Support | 1-3 Hours support | 24/7 Support and Monitoring | By using Github issues |
+
+If you are looking into **more than 200 GB per month**, please contact us directly because you are eligible for a special offer:
+
+* Integration Support
+* Discounted prices depending on your traffic volume
+* 24/7 Support
+
+## Limitations
+
+Maximum image file size - 10 MB
+
+10 API Keys limit\*
+
+10 Image Sources \(domains\) limit\*
+
+\*If you need more API Keys of Image Sources please contact us directly and we will add more for your account.
+

.gitbook/assets/generate_new_keys.png

@@ -0,0 +1,8 @@
+# Open Source Version
+
+Pixboost image manipulation service sources are accessible for public on ****[**github**](https://github.com/dooman87/transformimgs). We believe that **open source** is the most efficient model of software development.
+
+Also, it allows our customers to deploy service into their own data centres.
+
+We are always happy to provide consulting services to customize the solution for your needs.
+