We made imghaste api in a very easy way for all developers to use.
Reading takes: 1 minute.
Operations are ordered on usage frequency from clients.
Resizing Operations
| Resizing Operations | syntax | description |
|---|---|---|
| crop | crop=x,y,position | Image will be cropped using width & height moving to the position specified. Position values: [centre, east, west, north, south] |
| widen | widen=x | Image will retain aspect ratio and always fit to width |
| smartcrop | sc=x,y | Smart crop will identify the content attention and crop the image to it. |
| fit | fit=x,y | Retain aspect ratio and fit to whatever dimension (width or height) comes first. |
| resize | resize=x,y | Image will be exactly sized to x,y added a white background to the surrounded area |
| enlarge | enlarge=x,y | coming soon… |
Resizing Examples
Original Sample: https://www.imghaste.com/images/samples/owl.jpg (600x397)
Smart Crop
https://cdn.imghaste.com/imghaste.com/images/samples/owl.jpg?smartcrop=250,200
https://cdn.imghaste.com/imghaste.com/images/samples/owl.jpg?sc=300,200
https://cdn.imghaste.com/imghaste.com/images/samples/owl.jpg?sc=200,200
Fit
https://cdn.imghaste.com/imghaste.com/images/samples/owl.jpg?fit=250,250 (Results in: 250x165 - fit to width applies)
https://cdn.imghaste.com/imghaste.com/images/samples/owl.jpg?fit=600,300 (Results in: 453x300 - fit to height applies)
Widen
https://cdn.imghaste.com/imghaste.com/images/samples/owl.jpg?widen=250 (Results in: 250x - fit to width always applies)
https://cdn.imghaste.com/imghaste.com/images/samples/owl.jpg?widen=600 (Results in: 600x - fit to width always applies)
Crop
https://cdn.imghaste.com/imghaste.com/images/samples/peacocks.full.jpg?crop=300,300 (crops on 300x300 using center position, the most used transformation)
https://cdn.imghaste.com/imghaste.com/images/samples/peacocks.full.jpg?crop=300,300,centre
https://cdn.imghaste.com/imghaste.com/images/samples/peacocks.full.jpg?crop=300,300,east
https://cdn.imghaste.com/imghaste.com/images/samples/peacocks.full.jpg?crop=300,300,west
https://cdn.imghaste.com/imghaste.com/images/samples/peacocks.full.jpg?crop=300,300,north
https://cdn.imghaste.com/imghaste.com/images/samples/peacocks.full.jpg?crop=300,300,south
https://cdn.imghaste.com/imghaste.com/images/samples/peacocks.full.jpg?crop=300,300,smart (alias of smartcrop/sc)
Useful system presets
| System Preset | syntax | description |
|---|---|---|
| 345 | 345 | Image will be converted to 345x, bootstrap 3/4 default mobile page for col-12 |
| fb_post | fb_post | Image will be converted to 1200x630, useful for og:tags or facebook/twitter posts |
| email_hero | email_600 | Image will be converted to 600x, useful for newsletter single column hero images |
| email_300 | email_300 | Image will be converted to 300x, useful for 50% column sized newsletters |
| email_280 | email_280 | Image will be converted to 280x, useful for 50% column sized newsletters with 10px padding |
| email_240 | email_240 | Image will be converted to 240x, useful for 50% column sized newsletters with 30px padding |
| debug_info | debug_info | Will add some information on top of image before and after transformation |
Resizing Examples
Optimizations
| Optimization Operations | syntax | description |
|---|---|---|
| DPR | DPR=2.0 | Doubles the w/h of the output image for retina ready screens. valid values: 1.0 - 3.4 |
| quality | q=85 | Defines the final image quality - valid values 0-100 |
| format | f=webp | Converts image into specified format. Valid values: webp, jpeg, png, auto |
| stripmeta | stripmeta | Removes Exif information from image |
| webp | webp | Converts image into webp |
| png | png | Converts image into png |
| jpeg | jpeg | Converts image into jpeg |
Optimization Examples
https://www.imghaste.com/images/docs/peacocks.jpg (4160x3120 - original 4.5MB from a cellphone camera)
https://cdn.imghaste.com/imghaste.com/webp,stripmeta/images/docs/peacocks.jpg (4160x3120 - optimized 1.5MB)
https://cdn.imghaste.com/imghaste.com/webp,stripmeta,sc,w:1440,h:1080/images/docs/peacocks.jpg (1440x1080 - optimized for web 260KB)
https://cdn.imghaste.com/imghaste.com/webp,stripmeta,sc,w:640,h:480/images/docs/peacocks.jpg (640x480 - optimized for web 54KB)
https://cdn.imghaste.com/imghaste.com/webp,stripmeta,q:70,w:640,h:480/images/docs/peacocks.jpg (640x480 - optimized for web 40KB)
Filtering
| Filtering Operations | syntax | description |
|---|---|---|
| blur | blur=0.5 | Image will be blurred, valid values 0-100 |
| bw | bw or greyscale or grayscale | Converts image to Black and white |
| overlay | overlay=0.4 | Adds an black overlay to your image, useful when image having text on it. valid values 0-1 |
| rotate | rotate=90 | Rotate the image to specified value in degrees. Valid values - 90,180,270 |
| flip | flip | Gives a mirroring effect, left to right |
| flop | flop | Turns image upside-down |
Filtering Examples
Original Image: https://www.imghaste.com/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/blur:10/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/bw/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/overlay/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/overlay:0.7/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/rotate:90/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/rotate:270/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/flop/images/samples/peacocks.600.jpg
https://cdn.imghaste.com/imghaste.com/flip/images/samples/peacocks.600.jpg
Best practices
imghaste recommends you to use uor Service Worker Integration which is plug & play as long as your website runs on:
https Don’t have any other service worker registered on your website.
If that is not possible, you can always use our standard integration procedure and make use of a combination of Resizing & Optimization operations in order to achieve the best possible user experience.
This is an example of transformations used for bootstrap 4 websites with default settings. which results in a fully responsive & fully optimized
Example using only optimization operations
Examples using only optimization operations
<picture>
<!–[if IE 9]><audio><![endif]–>
<source sizes=”600px” type=”image/webp“ media=”(min-width: 415px)” srcset=”{cloud_url}/stripmeta,webp,q=85/images/samples/owl.jpg”>
<source sizes=”600px” type=”image/jpeg“ srcset=”{cloud_url}/stripmeta,q=85/images/samples/owl.jpg”>
<!–[if IE 9]></audio><![endif]–>
<img src=”{cloud_url}/stripmeta,q=85/images/samples/owl.jpg” alt=”Owl” loading=”lazy” width=”600” class=”img-fluid img-responsive lazyload”>
</picture>
Examples using LazyLoad, optimization & Resizing operations
<picture>
<!–[if IE 9]><audio><![endif]–>
<source sizes=”255px” type=”image/webp“ media=”(min-width: 415px)” data-srcset=”{cloud_url}/stripmeta,webp,q=85/images/samples/owl.jpg”>
<source sizes=”375px” type=”image/webp“ media=”(max-width: 414px)” data-srcset=”{cloud_url}/stripmeta,webp,q=85,345,DPR:1.0/images/samples/owl.jpg”>
<source sizes=”255px” type=”image/jpeg“ media=”(min-width: 415px)” data-srcset=”{cloud_url}/stripmeta,q=85/images/samples/owl.jpg”>
<source sizes=”375px” type=”image/jpeg“ media=”(max-width: 414px)” data-srcset=”{cloud_url}/stripmeta,q=85/images/samples/owl.jpg”>
<!–[if IE 9]></audio><![endif]–>
<img data-src=”{cloud_url}/stripmeta,q=85/images/samples/owl.jpg” loading=”lazy” width=”255” height=”171” alt=”{alt}” class=”img-responsive img-fluid lazy”>
</picture>
Retina ready example images
https://assets.imghaste.com/345,DPR:1.0/images/samples/peacocks.full.jpg
https://assets.imghaste.com/345,DPR:2.0/images/samples/peacocks.full.jpg
https://assets.imghaste.com/345,DPR:3.0/images/samples/peacocks.full.jpg
All aforementioned images should be rendered at 345 pixels width.