How can we help you?

Find how to configure your CDN and how to use its features.

Can't find the answer to your question? Drop us a line at support@tinify.com

Configuration

To use Tinify CDN your website should point to images at your personal Tinify CDN endpoint. In addition to the generic guide you can select guides for specific platforms below.

Setup guide for your platform

We have guides and video instructions available for many popular platforms (content management systems and web frameworks). More are coming!

Installation instructions for custom installation

Select a different guide?

Change image URLs in your HTML

Find the locations in your website or your web application where images are displayed. Look for <img/> and make sure to change the domain to https://xxxxxxxx.tinifycdn.com.

<img src="/images/logo.jpg"/>
<img src="https://images.example.com/images/header.jpg"/>
<img src="https://xxxxxxxx.tinifycdn.com/images/logo.jpg"/>
<img src="https://xxxxxxxx.tinifycdn.com/images/header.jpg"/>

Find any images in your CSS. Look for properties such as background-image, list-style-image, border-image-source. Change the domains to https://xxxxxxxx.tinifycdn.com.

div.header, header {
  background-image: url(/images/header.jpg);
}
div.header, header {
  background-image: url(https://xxxxxxxx.tinifycdn.com/images/header.jpg);
}

Alternatively, if you are sure that all your image URLs are absolute or relative paths without a domain, then you can just change the URLs of your CSS files in your HTML.

<link rel="stylesheet" href="/styles/site.css"/>
<link rel="stylesheet" href="https://xxxxxxxx.tinifycdn.com/styles/site.css"/>

Resizing images

Tinify CDN supports changing your images on the fly. In particular, it is possible to resize images to create smaller versions, such as thumbnails.

Example

Images can be resized by including certain query string parameters in the image URL. The following will scale the image panda.png down to be 100 pixels wide, adjusting the height accordingly.

https://xxxxxxxx.tinifycdn.com/panda.png?resize.width=100

Multiple query string parameters can be combined:

https://xxxxxxxx.tinifycdn.com/panda.png?resize.width=100&resize.height=50&resize.method=fit

Resizing options

The parameter resize.method describes the way your image will be resized. The following methods are available.

resize.method=scale
Scales the image down proportionally. You must provide either a target resize.width or a target resize.height parameter, but not both. The scaled image will have exactly the provided width or height.
resize.method=fit
Scales the image down proportionally so that it fits within the given dimensions. You must provide both a resize.widthand a resize.height parameter. The scaled image will not exceed either of these dimensions.
resize.method=cover
Scales the image proportionally and crops it if necessary so that the result has exactly the given dimensions. You must provide both a resize.width and a resize.height parameter. Which parts of the image are cropped away is determined automatically. An intelligent algorithm determines the most important areas of your image.
resize.method=thumb
A more advanced implementation of cover that also detects cut out images with plain backgrounds. The image is scaled down to the resize.width and resize.height you provide. If an image is detected with a free standing object it will add more background space where necessary or crop the unimportant parts. This feature is new and we’d love to hear your feedback!

If the target dimensions are larger than the original dimensions, the image will not be scaled up. Scaling up is prevented in order to protect the quality of your images.

Supported file formats

Optimizeable file types

The following file types are explicitly supported and will be automatically optimized.

  • PNG (including animated PNG)
  • JPEG
  • WebP
  • CSS
  • JavaScript *

* The Magento 2 plugin does not support javascript optimization due to compatibility issues.

Other content

Additionally all files will be distributed throughout the global network of content delivery services. Even if they are already optimal or if the file type is unrecognized. This ensures fast delivery of all website files.

CORS

Cross-Origin Resource Sharing (CORS) allows a server to indicate that other origins can request sub-resources, like scripts and stylesheets. Tinify CDN allows and enables full CORS headers, as well as preflight requests to the CDN.

A preflight request is a small request that is sent by the browser before sending the actual request. It contains information like which HTTP method is used and if any custom HTTP headers are present. With a preflight request, the server gets a chance to examine what the actual request will look like before it is made.