Developer's Examples

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.