Placeholders

Every manipulation can target a placeholder. In that case, TwicPics will compute the final dimensions consequential to the transformations then respond with an svg image of these dimensions that also displays said dimensions.

ExampleResult
cover=1:1/resize=150/placeholder:autocover=1:1/resize=150/placeholder:auto
resize=150x100/placeholder:rgb(128,0,128)resize=150x100/placeholder:rgb(128,0,128)
placeholder:200x100:medium-violet-redplaceholder:200x100:medium-violet-red

Syntax

A placeholder follows the following syntax:

placeholder:[<dimensions>:]<colors>

Dimensions

Specifying the dimensions of a placeholder is optional. Syntax is <width>x<height> where width and height are strictly positive numbers.

It is perfectly valid to create a placeholder with dimensions and no color. In that case, the default colors will be used.

ExampleResult
placeholder:200x150placeholder:200x150
If not specified, the dimensions of a placeholder default to 1920x1080.

Keep in mind the final dimensions of a placeholder depends on the transformations applied to it. So resize=(1/10)s/placeholder:auto will give a placeholder which dimensions are 192 per 108, a tenth of the default ones.

ExampleResult
resize=(1/10)s/placeholder:autoresize=(1/10)s/placeholder:auto

Colors

Specifying the colors of a placeholder is mandatory unless dimensions have been specified. Syntax is [<text>/]background where text and background are color expressions to be used for the text and the background of the image respectively.

ExampleResult
placeholder:50x50:white/redplaceholder:50x50:white/red
If no text color is provided, TwicPics will choose a brightened or darkened version of the background color, whichever yields the best contrast. For a quick placeholder, just use auto as the color expression and TwicPics will default to an unobtrusive gray color scheme.
ExampleResult
placeholder:50x50:orangeplaceholder:50x50:orange
placeholder:50x50:blackplaceholder:50x50:black
placeholder:50x50:autoplaceholder:50x50:auto

Script Compatible

One nifty usage of placeholders is with the TwicPics Script.

Simply target a placeholder expression with your data-twic-src to instantly get the best suited physical size of the image and it takes the device DPR into account to boot!

<img data-twic-src="placeholder:auto">

The 200 pixels wide 200 pixels high image below uses this technique:

responsive images

The All-In-One Toolbox For Your Images

The simplest, most powerful way to tackle responsive images