Your subdomain paths can be configured in many different ways so as to tweak, protect and control how your images are delivered.
The option panel can be accessed by clicking the gear icon located at the right of the path description in the domain listing.
All options can be accessed by opening the Advanced configuration part of the panel save for Fallback which is directly accessible.
Options are listed here in alphabetical order.
Canonical Link Header
For better SEO, it is recommended to have all variants of the same image reference a single master link.
TwicPics can generate the header with this "canonical link" for you automatically.
Two options are available:
TwicPics URL: the canonical link points to your image through this path, ensuring eventual default manipulation and watermarking are applied. Your Source URL is protected: search engines will reference your TwicPics URL.
Source URL: the canonical link points to your Source URL. Default manipulation and watermarking will not be applied. Your Source URL is made public: search engines will reference your Source URL.
For each path, you can set a custom, default manipulation.
This is especially handy in order to protect your assets from web crawlers and to avoid ever distributing the full-resolution master image.
Let us say that the root path (
sub.twic.pics has its default manipulation set to
This default manipulation will be applied after any manipulation provided using the TwicPics API.
Let us see what we get with a few examples:
|API Call||Final manipulation|
Please note that, in this example and no matter what, TwicPics will always deliver an image that is at most 1000 pixels wide.
You could also use the default manipulation to ensure a minimum image quality no matter the network conditions of the end-user. For instance,
quality-min=50 would ensure no image with a quality lower than 50 would be delivered, even to users on 2G networks.
In truth, any transformation can be used and the possibilities are virtually endless.
Another neat trick is that you can add transformations before and/or after the ones provided through the API.
By placing the star symbol (
*) in place of a transformation, you indicate where the manipulation provided through the API has to be placed.
Let us say, for instance, that you wish to provide a default quality of 50 while making it possible to override the value through the API. The correct manipulation for this would be
Here is how it would behave in several examples:
|API Call||Final manipulation|
Please note that while the first two resulting images will have a quality of 50, the third one will have a quality of 60 as specified through the API.
Of course, it is possible to create a default manipulation that will act before and after the one provided through the API.
For instance, we could combine a default quality with a maximum width by setting the default manipulation to
How will our previous examples behave in such an instance?
|API Call||Final manipulation|
This is resounding success! No matter what the manipulation provided through the API is we do have a default, overridable quality of 50 and no image more than 1000 pixels wide will be delivered.
One final note: since the TwicPics Script does issue API calls under the hood, it will respect default manipulations too.
Let us assume we have the same default manipulation as in the previous example (
quality=50/*/max=1000) and let us consider the following element
<img class="twic" data-src="image:man.jpg">
Let us also assume this element is styled so that its width ends up being 2000 pixels. The manipulation applied to
image:man.jpg will be
resize=2000 but, since we have a default manipulation
quality=50/*/max=1000, the actual final manipulation will be
quality=50/resize=2000/max=1000. So the image quality will be 50 and its width 1000, as expected.
Image Fallback URL
This fallback image will be used if and when a
4xx status code (
404, ...) is issued by your server.
Consider the following path configuration for
and say you have set the fallback of
At one point, you end up requesting
https://sub.twic.pics/ilage.jpg instead of
https://sub.twic.pics/image.jpg. TwicPics will try and request
https://www.my-company.com/ilage.jpg, get a
404 in return, and thus, switch to
Eventual transformations will be applied to the fallback as if it were the intended target. So
https://sub.twic.pics/ilage.jpg?twic=v1/resize=300 will return a 300 pixels wide version of
If, for whatever reason, requesting the fallback results in a
4xx status code then this status code will be propagated back to the requester.
If no fallback is provided, TwicPics will simply propagate the original
4xx status code.
By default, TwicPics will filter out any metadata from your source image so as to gain precious bytes.
However, if your images contain information you need or want to still be present in the transformed image (like a copyright notice for instance), you can switch the
Keep metadata button on.
Note that EXIF orientation and color profiles may be changed or removed respectively still since they are used for generating the transformed image.
Source Request Headers
For each path, you can set a list of headers to be sent to your server.
This is especially handy in order to implement basic access authentication or to set up any custom header that would be checked by your server.
Doing so, you are making sure only TwicPics has access to your media library.
As a convenience, TwicPics already sends a
X-TwicPics-Token header that is unique to your subdomain.
By switching the
Add a watermark button on, you'll be able to add watermarking to all images requested through the path.
You then have to provide the
URL of the watermak image and several options are available for:
- where the watermark is positioned in the images:
- what DPR the watermark is sized for:
- how opaque the watermark has to be:
- how the watermark is sized and if it is repeated:
Tweaking and testing watermarking can be a bit cumbersome: it can take several minutes for the configuration to be propagated to the TwicPics servers and our CDN will retain any transformed image for at least thirty minutes and up to an hour.
As such, we recommend you use an unused path (ie. one that is not in production) to test watermaking. We also recommend you rely on an incrementing URL parameter to ensure you do not hit the CDN cache.
Once you're satisfied with watermarking on your test path, simply apply the exact same configuration to your production path.
Anchor option determines where the watermark is positioned in the image.
Available values are:
The higher the watermark DPR, the smaller it will appear on the image.
Determines how opaque the watermark should be. It is a number between
0 (invisible) to
1 (fully opaque).
Mode determines how the watermark should be resized and/or repeated relative to the image. All modes take the
Anchor into account for initial positioning while only
fill modes will rely on the
DPR for sizing.
Available modes are:
|contain||watermark is fully contained in the image|
|cover||watermark covers the image|
|fill||watermark is fully contained in the image and repeated if needed|
|none||watermark is put in the image as is|
|tile||watermark is repeated over the image|
URL specifies the location of the watermark image.
In case of a watermark with no transparency, be sure to use
Opacity unless you want the original image to disapear and be replaced with the watermark itself!
In case of SVG files, be aware no dynamic nor remote operation will be supported, meaning no animation and no linked content. All styles should be inlined in the file and raster images should be embedded as base64-encoded data URLs.