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.