Image Urls

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.

URL Anatomy

Every image you upload gets a unique Base URL. Within the URL you can specify image options and parameters.×120.jpg

Image options and parameters


fit (default)
p … pad
f … fill
<w>×<h> … with×height
<w>w … with
<h>h … height
<side> … square
@2x … high res
.edit … open in Maiko

Output Formats

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.


Transparency: simulated


Transparency: supported


Transparency: supported
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).×120.edit


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 150w.jpg:

Height 180 JPG
Height 180 PNG


Likewise, the height can be limited by adding an h, e.g. 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 200.jpg.

Modes (fit/fill/pad)

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 f.


Fit (default)

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.



If an 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.

By default it is a centred crop but it is also possible to set the focus point.

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:

Default focus
Adapted focus point

Retina Images

As long as uploaded with sufficient resolution, images can be served at twice the specified height and width with the @2x fragment.

Retina Display

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.