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.

Image options and parameters

p300×200@2x.jpg

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.

.JPEG
150.jpg Transparency: simulated

.PNG
150.png Transparency: supported

.WEBP
150.webp 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).

Size

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.

Width

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
180h.png

Height 180 PNG
180h.jpg

Height

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
180w.jpg

Width 180 PNG
180w.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
200×150.jpg

w 200 h 150 PNG
200×150.png

Square

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
130.jpg

PAD
p130.jpg

FILL
f130.jpg

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

Fit
200.jpg

Pad

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.

Pad
p200.jpg

Fill

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.

Fill
f200.jpg

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.

Standard
200.png

Retina Display
[email protected]

Note: To see the difference you’ll need to view this demo on a Retina Display.

Quality

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.