Web image transformations

Preparing images for web is a tedious task that deals with common image transformations in order to reduce the file size dramatically, saving page load time, improving user experience and cutting bandwidths costs.

Abraia reduces the complexity of generating multiple image versions automating the most common image manipulation operations using simple URLs

To optimize images for web use, you likely need to resize, crop or change their file format type (and choose its compression parameters) from the source image for their final use. And to optimize your website for site speed, it is best to use properly sized images in the first place, which are typically smaller.

Usain Bolt from Wikimedia Commons

Resize and crop

Abraia dynamically crop and resize images on-the-fly in order to adapt them to the graphic design of your web site or mobile application.

Use Abraia to generate transformed versions of images (e.g., resized or cropped) on-the-fly. This is specifically useful in conjunction with the HTML srcset attribute of the <img> tag and <picture> element where the browser chooses which of the image versions to display. Images will be created on-the-fly including any transformation parameter.)

For example, to resize an image maintaining the aspect ratio is enough specifying the width or the height parameters (w and h in URLs). w=500 sets the width of the image to 500 pixels and maintains the aspect ratio of the image adapting the height.

https://abraia.me/images?url=
  http://upload.wikimedia.org/wikipedia/commons/1/13/
    Usain_Bolt_16082009_Berlin.JPG&w=500

Usain Bolt from Wikimedia Commons Resized to width 500

To adapt the image to the required aspect ratio is enough to specify the width and height parameters. w=500&h=500 sets the width and the height to 500 pixels changing the aspect ratio to 1:1, automatically selecting the best cropping area.

https://abraia.me/images?url=
  http://upload.wikimedia.org/wikipedia/commons/1/13/
    Usain_Bolt_16082009_Berlin.JPG&w=500&h=500

Usain Bolt from Wikimedia Commons Smartly Cropped to 500x500

Transformation parameters

flowers resize width

Parameters: w=300

Description: Resizes the image maintaining the aspect ratio.


flowers resize height

Parameters: h=192

Description: Resizes the image maintaining the aspect ratio.


flowers forced crop

Parameters: w=300&h=192&m=crop

Description: Forces the crop of the image when the aspect ratio is the original one.


flowers smart crop

Parameters: w=300&h=300

Description: Smartly crops and resize the image to adopt the new aspect ratio.


flowers forces resize

Parameters: w=300&h=300&m=resize

Description: Forces the resize of the image when the aspect ratio is different from the one in the original image.


flowers resize aspect ratio

Parameters: w=300&ar=1:1 or h=300&ar=1

Description: Smartly crops and resize the image to adopt the new aspect ratio.


flowers resize aspect ratio

Parameters: w=300&ar=1.5

Description: Smartly crops and resize the image to adopt the new aspect ratio.


flowers resize dpr

Parameters: w=150&ar=1.5&dpr=2

Description: Adapts the image for retina displays, adopting the specified device pixel ratio (1, 2, 3).


flowers quality

Parameters: w=300&ar=1.5&q=50

Description: Sets the quality of the delivered jpg or webp image to 50 in the range (1, 100) - 1 is the lowest quality and 100 is the highest.

Manage image formats

One of the hardest optimization goals when showing images to your website (and mobile application's) visitors, is to minimize the image file size while maintaining high enough display quality.

Choose and optimize every option is arduous and in lot of occasions not trial. Abraia makes available the most common web image formats and provides powerful algorithms to achieve the better results and an optimal compression.