App Cloud provides a service you can use to transcode images for your apps. Using the image transcoding service, you can take your source image and convert it into the size and format you need for your apps. For example, if you have an original image that is 300x300 pixels, but your app needs to display it at 100x100. You can use the image transcoding service to make sure the image is always at the right size for its context, without having to create a new image file for each context you use the image in. You can also crop the image and specify the quality (compression ratio) for JPG images. Using the image transcoding service, youcan:

• Markedly improve your app's performance by greatly reducing the file size and network bandwidth required to display your app
• Reduce memory demands by reducing the size of images.
• Make sure your images are the right size for being displayed on mobile devices.
• Take advantage of the App Cloud server cache, improving app performance and reducing the load on your own servers.

The App Cloud image transcoding service acts as a proxy between your images and your applications. The service is accessed with a simple URL in which you prefix your image URL with our transcoding service URL. This enables you to drop our transcoding service into your apps with very little effort. For example, if you have an image that lives at http://my.example.com/image.png you would normally request it like:

  <img 
   src="http://my.example.com/image.png" 
   alt="Bandwidth Hungry Image" 
   width="500"
   height="500"
  /> 

To transcode it to a smaller image that is 100x100px, you simply issue the following request:

  <img 
   src="http://transcode.appcloud.brightcove.com?image=http://my.example.com/image.png&width=100&height=100" 
   alt="My Svelte Image"
   width="100"
   height="100" 
  />

To reduce an image to 100px in width, preserving the original aspect ratio:

  <img 
   src="http://transcode.appcloud.brightcove.com?image=http://my.example.com/image.png&width=100" 
   width="100" />

To reduce an image to 100px in width or 100px in height, whichever is greater, preserving the original aspect ratio:

  <img 
   src="http://transcode.appcloud.brightcove.com?image=http://my.example.com/image.png&max_dimension=100" />

To crop the image, preserving a 100x100px piece in the center, you simply issue the following request:

  <img 
   src="http://transcode.appcloud.brightcove.com?image=http://my.example.com/image.png&crop=200,200,100,100" 
   alt="My Svelte Image"
   width="100"
   height="100" 
  />

To use the image transcoding service, your image must be accessible at a publicly-available URL. The image must be in PNG, JPEG, or GIF format.

Query parameters

The image transcoding service call uses the following query parameters:

image (required)

The publicly accessible URL at which your original image can be found. For example, image=http://my.example.com/image.png.

format (optional)

The format of the new image, which can be one of png, jpg, or gif. If you don't specify the format, then the output format is unchaned from the original image.

Size parameters (optional)

You can use one of the size parameters, width, height, or max_dimension, if you want the new image to be a different size from the original image. These parameters specify a dimension of the final image in pixels.

• If you don't specify any size parameters, the new image will have the same width and height as the original image.
• If you specify width, but not height, the new image will have the width you specify and will have the height dictated by the aspect ratio of the original image.
• If you specify height, but not width, the new image will have the height you specify and will have the width dictated by the aspect ratio of the original image.
• If you specify max_dimension, then the larger dimension of the new image will be the size you specify, and the smaller dimension will have the size dictated by the aspect ratio of the original image.

In every case, the new image will have the same aspect ratio as the original image, unless you specify both a width and height and that aspect ratio is different from the original aspect ratio.

Crop parameter (optional)

Using a transcoding utility function

To crop your image, add the parameter:

crop=x,y,w,h

Here, x and y are the coordinates of the start point, measured in pixels from the upper left corner (0,0). w and h are horizontal and vertical pixels to preserve, beginning at the start point and proceeding to the right and down.

If cropping and sizing are both specified, cropping is applied first, and the cropped image is then sized.

Quality parameter (optional)

For JPG images only, specify the compression ratio for resulting image by adding the parameter:

quality=x

x is the compression ration to be applied; the default is 70.

Here's a handy JavaScript function for generating an image transcode URL:

  function getTranscodeURL(url, options) {
      var src = "http://transcode.appcloud.brightcove.com?image=" + url;
      if (options) {
          if (options.max_dimension) {
              src += "&max_dimension=" + options.max;
          }
          else {
              if (options.width) {
                  src += "&width=" + options.width;
              }
              if (options.height) {
                  src += "&height=" + options.height;
              }
          }
          if (options.format) {
              src += "&format=" + options.format;
          }
          if (options.crop) {
              src += "&crop=" + options.crop;
          }
          if (options.quality) {
              src += "&quality" + options.quality;
          }
      }
      
      return src;
  };

For example, to transcode an image to 200 pixels wide:

  var tx_url = getTranscodeURL("http://www.example.com/example.jpg", { width: 200 });

To crop an image to 160x90, starting 100px from the left and 70px from the top, and specifying a compression ratio of 65:

var tx_url = getTranscodeURL("http://www.example.com/example.jpg", { crop: "100,70,160,90" , quality: 65 });

Transcoded image examples

To see how dramatically the transcoding service can reduce the bandwidth and memory required by images files, take a look at these examples.

First we have a high-quality JPEG stock image:

This image is 425x282, with a file size of 130,879 bytes.

Passing it through the transcoding service with width=250:

The image is now 250x165, with a file size of 34,017 bytes, a 74% reduction.

Finally, we can transcode it to thumbnail size (width=75):

The image is now 75x49, with a file size of 7,686 bytes, a 94% reduction!