You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+28-6Lines changed: 28 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,18 +2,40 @@
2
2
3
3
> An AngularJS directive for ImageEngine
4
4
5
-
**WURFL Image Tailor (WIT) is now ImageEngine!**
5
+
# ImageEngine
6
6
7
-
[ImageEngine](http://web.wurfl.io/#image-engine) is an automatic image optimizer based on WURFL device detection. WURFL will detect the device capabilities, including screen size and image format support, resize and optimize the image accordingly. That's why we call it the ImageEngine.
7
+
[ImageEngine](http://www.scientiamobile.com/page/imageengine?utm_source=npmjs.com&utm_medium=page&utm_term=angular-component&utm_campaign=angular-component) is an intelligent image CDN for optimizing, compressing and resizing images. ImageEngine will enhance your responsive images by enabling support for HTTP2, automatic webp conversion, Client Hints and more.
8
8
9
-
ImageEngine is not only for mobile. ImageEngine supports the emerging Client Hint standard making it the perfect companion for Responsive Images.
9
+
It is likely that ImageEngine will shave off 50-60% of data traffic generated by images on your site. To better support mobile devices, ImageEngine relies on WURFL for server side device detection in cases where responsive images and Client Hints fall short.
10
10
11
-
Images weight is by far the most important challenge to address to optimize a web page for the plethora of devices on the web today. This is why ImageEngine will instantly give your users a better experience by reducing load time of your page. Not to mention the reduced data cost.
11
+
[Registration](https://scientiamobile.com/imageengine/signup?utm_source=npmjs.com&utm_medium=page&utm_term=angular-component&utm_campaign=angular-component#imageengine-lite) is required to get the most out of ImageEngine.
12
+
13
+
Images weight is by far the most important challenge to address when optimizing a web page for the plethora of devices on the web today. This is why ImageEngine will instantly give your users a better experience by reducing load time of your page. Not to mention the reduced data cost.
12
14
13
15
ImageEngine works as a CDN proxy. By referencing the ImageEngine servers and providing the full URL to the original image as a parameter, ImageEngine will identify the device, and its capabilities, and resize and optimize the image accordingly.
14
16
17
+
## Client Hints
18
+
19
+
The plugin will enable Client Hint support for your site. Client Hints, with information about the viewport size, device pixel ratio and actual image size, are added to the image request (HTTP header) enabling ImageEngine to resize the image with surgical precision.
20
+
21
+
## HTTP2 support
22
+
23
+
HTTP will give additional performance improvement on the network level. ImageEngine supports HTTP2 over SSL, which means that if you serve your sites and images by `https://`, ImageEngine will automatically serve all images over HTTP2.
24
+
25
+
## WebP
26
+
27
+
WebP is a lightweight image format with great quality. WebP is well supported by browsers. ImageEngine will detect if the end user's browser supports WebP and automatically convert any format to WebP to increase performance.
28
+
15
29
## Usage
16
30
31
+
### Install with yarn
32
+
*`yarn add image-engine-angular`
33
+
* Include `image-engine-angular.js`. It should be located at `node_modules/src/image-engine-angular.js`
34
+
35
+
### Install with npm
36
+
*`npm i image-engine-angular --save`
37
+
* Include `image-engine-angular.js`. It should be located at `node_modules/src/image-engine-angular.js`
38
+
17
39
### Install with bower
18
40
*`bower install image-engine-angular --save`
19
41
* Include `image-engine-angular.js`. It should be located at `bower_components/src/image-engine-angular.js`
@@ -34,7 +56,7 @@ ImageEngine works as a CDN proxy. By referencing the ImageEngine servers and pro
34
56
});
35
57
```
36
58
37
-
Note: [sign up here](https://scientiamobile.com/imageengine/signup) to get your token
59
+
Note: [sign up here](https://scientiamobile.com/imageengine/signup?utm_source=npmjs.com&utm_medium=page&utm_term=angular-component&utm_campaign=angular-component#imageengine-lite) to get your token
38
60
39
61
* Include the markup directive on your HTML page, like this:
40
62
@@ -48,7 +70,7 @@ where {{myUrl}} is the url of the [trusted image](https://docs.angularjs.org/api
48
70
49
71
## Examples
50
72
51
-
Check the [ImageEngine Documentation](http://web.wurfl.io/#image-engine) for the list of available settings.
73
+
Check the [ImageEngine Documentation](https://docs.scientiamobile.com/documentation/image-engine/image-engine-getting-started) for the list of available settings.
0 commit comments