Knowledge Base

Get started with image derivatives

If you want to learn more about how image derivatives work and get an idea of which derivatives you might need in your portal, refer to this article and then talk to our Implementation team.

If you are looking for information on video or document derivatives, see Create smaller versions of assets (derivatives).

What are derivatives

A derivative is an image file generated from another source (for example, a low-resolution representation of a print-quality photo). When you upload files, Bynder can automatically create pre-defined image derivatives with different dimensions, quality, and format. Bynder can either maintain the original aspect ratio of an image, or crop or pad an image to fit the specified dimensions. Derivatives are created when you upload do we recommend to define and configure derivatives before your media import.

Available options

  • Changes in width and height: When creating a derivative, Bynder will always choose the longer side (width or height) available but will keep the aspect ratio of the original asset. For example, a 1000px by 500px JPG makes a 500px by 250px JPG derivative.
  • Changes in DPI: Bynder can convert an image to a desired DPI (Dots per Inch) based on the original. For example, a 300 DPI image (for print) can create a 72 DPI derivative (for web), but never the other way around.
  • Output options: JPG or PNG are available for images

Additional Options (for specific use cases)

  • Cropped derivative – Cropped derivatives first resize the image to the correct aspect ratio, and then crop to the exact height and width. For example, if you want a 100px by 100px cropped derivative, a 200px by 400px landscape file will be rescaled to 100px by 200px first, and then cropped from the center to 100px by 100px. If you set a focus point on every image, the cropped derivative will crop from the focus point and not from the center of the photo.
  • Extended derivative – Extended derivatives pad the image with a border to the exact height and width you set, instead of maintaining the aspect ratio. For example, a landscape will be filled with white space toward the dimensions chosen. So the longer side will be set toward the dimensions and the rest will be filled again and aligned from center.
    Since extended derivatives have a border, they do not preserve transparency.
  • Public Derivatives – if your derivatives need to be accessed through the API and used, for example on your website, they need to be public. You can also able to display public link to those public derivatives in the Bynder interface for users with “Edit media” permissions.

     link to public derivatives

Best practices

  1. Choose 2-5 derivative sizes for your portal.
    Let us know if you want to use derivatives for your E-Commerce system becuase this is the case when more than 5 sizes are recommended.
  2. Choose image sizes that cover comprehensive use cases for your entire business, not just for one specific group.
  3. Take the following into account:
    • Derivatives are generated for all files (specified by file type).
    • Derivatives DO count toward your storage.
    • Normally, derivatives are not created for one-off scenarios.

Frequently used derivatives

  1. “Web Ready - Small” JPG – this is usually a 72 DPI JPG with an 800px long side.
  2. “Large” JPG - this is usually a 300 DPI JPG with a 1600px long side
  3. “Web Ready” PNG - this is usually a 72 DPI PNG or an 800 px long side PNG that preserves transparency.
  4. Custom JPG/PNG
    1. Custom-sized derivatives for your E-Commerce system,
    2. Custom web banner sizes (cropped),
    3. Derivative with the size of the original image but of a different file type (for example, TIFF to PNG).

Learn more

  • We can also create video derivatives for you. See Create smaller versions of assets (derivatives).
  • If you need frequent modifications to specific derivatives, you might be looking for On the Fly derivatives. See Modify public derivatives on the fly.