After images have been uploaded to Maiko, they can be served back in a variety of formats and sizes using the following syntax. In order to generate new formats, you need to be logged in to Maiko. Alternately, if the new formats are being requested from a domain, the domain can be allowed in the stack settings.
Every image you upload gets a unique
Base URL. Within the URL you can specify image options and parameters.
Image options and parameters
Maiko can convert and serve images in any of the following formats. You just need to adapt the extension in the image URL to recevie it in the required format.
WEBP not supported
in every browser.
Reveal original image in Maiko
To find the original image within your Maiko account you can use
edit instead of the image format to open the image in Maiko (requires login).
Images can be served at different sizes by specifying dimensions in the URL. Images will be served up to and including their original size. Images only get upscaled if the original format is vector based (SVGs) or if you use Fill Mode.
The width of the served image can be limited by adding a
w directly after the dimension in the URL. The height of the image will scale proportionally to the dimension provided. Here are two images requested with
|Height 180 JPG|
|Height 180 PNG|
Likewise, the height can be limited by adding an
100h.jpg and the width will scale proportionally to the height provided:
|Width 180 JPG|
|Width 180 PNG|
Width and Height
To limit both the width and the height at the same time, use
<width>×<height>. As in the following example, the returned image will be as large as possible without exceeding either of the specified dimensions. For example
200x100.jpg resizes the image to fit within the bounds of 200 by 100 pixels:
|w 200 h 150 JPG|
|w 200 h 150 PNG|
If only one number is specified, it will be used to set the with and height bounds, so instead of writing
200x200.jpg you can just use
The modes define how your image is fitted to the target dimensions. There are 3 modes: Fit (default), Pad and Fill. In the example below we set the boundries for width and height to 180 pixels and compare Fit with Pad
p and Fill
Resize the image to fit the given width and height while retaining original aspect ratio. If the target size is larger then the original size images will not be upscaled, except vector based originals (eg. SVGs).
Resize the image to fit the given width and height while retaining original aspect ratio. The result image will fit both dimensions and remaining space will be filled up with a solid color (defined in the Stack Settings) or with transparent pixels (for PNG and WEBP).
In the URL this is specified with a
p before the width and height dimensions.
f is specified before a set of width and height dimensions, the served image will be scaled to fill the dimensions, with the extra part of the image being cropped off.
Set Focus Point
By default the focus point is set to the center of the image. You can change which area of the image is cropped to, the focus point can be changed in the asset view panel. Click on “Set Focus” and move the focus.
This example shows the default centred crop and one with a custom set focus point. The source image is being filled to a square of 200 by 200 pixels:
|Adapted focus point|
As long as uploaded with sufficient resolution, images can be served at twice the specified height and width with the
Note: To see the difference you’ll need to view this demo on a Retina Display.
Image quality is very important to us. We spent a huge amount of time to find the right balance between image quality and filesize.
Maiko always serves the images in the best quality while reducing filesize to speed up loading time.