Skip to main content

Media CDN

Description

Perfect visuals are essential elements of every website and application. They sell products and services, convert new users and create consistent look and feel of interfaces. They are also the biggest contributors to the Internet traffic currently occupying 64.2% of the bandwidth world-wide. Serving bloated, unoptimized images on your websites will have a very negative effect on your site speed and will lead to inevitable drops in conversions rates and customer satisfaction. Also, Google has indicated site speed is one of the important signals used by its algorithm to rank pages. Slower loading times will negatively affect your search ranking.

Image Formats

By default, the media conversion uses auto mode for output image format. That means, the service will match the output format with its input conterpart. For example, if you supply an input image in JPEG format, you will also receive enhancements results as a JPEG file. You may, however, instruct the service to save processed images in arbitrary formats. The supported formats are AVIF, GIF, JPEG, JPEG 2000, PNG, and WebP.

AVIF

AVIF, short for AV1 Image File Format, is a modern image format derived from the keyframes of the AV1 video codec. It offers significant compression efficiency compared to existing image formats like JPEG, PNG, and even WebP, making it a promising choice for efficient web and application imaging.

GIF

GIF stands for Graphics Interchange Format and is a palette-based lossless raster image format which supports very limited transparency (one color) and animation (up to 10 frames per second). GIF can store up to 8 bits of color per pixel allowing for up to 256 colors per frame.

JPEG

JPEG stands for Joint Photographic Experts Group and is the most popular raster image format on the Internet; it's used mainly for large photograpic content. It's a lossy format which does not support transparency nor animation.

JPEG 2000

JPEG 2000 is considered to be the next iteration of JPEG image compression and can yield smaller file size with a better visual quality of the resulting image. JPEG 2000 is currently only supported by Safari and iOS Safari browsers which translates to ~13% of global browser reach. It's a lossy format which does not support transparency nor animation.

PNG

PNG stands for Portable Network Graphics and is the second most popular raster image format on the Internet. It's a lossless format which supports transparency but does not support animation. Unlike GIF format, which only supports 8-bit color, PNG supports up to 24-bit color RGB with 8-bit transparency. This makes it an excellent format for images with alpha transparency and thousands of colors used. We highly recommend re-encoding your static GIF images into PNG format as the latter will always result in a smaller file size due to a more advanced compression algorithm.

WebP

WebP is a format developed by Google and released in 2010. It employs both lossy as well as lossless compression techniques and supports both transparency and animation. According to Google, WebP lossless images are 26% smaller in size compared to PNGs and 25-34% smaller in size compared to JPEG images.

Image operations

Image optimization is the art and science of minimizing image file size without affecting its visual quality. By applying different operations it enables efficient and effective management of visual content, ensuring optimal performance and user experience.

Resizing

Image resizing is the single, most important operation one could perform on an image. Occtoo gives you flexibility in choosing a resizing mode for different scenarios you may have. In most cases, the service will perform all calculations for you with respect to the aspect ratio of the image. Below, you'll find a detailed descripion of all resizing modes offered by the service.

Auto Mode

Auto is the default mode for image resizing even if the mode attribute is not specified. It accepts width and/or height attributes. This mode will always resize an image according to its aspect ratio, so for example, if you only specify width attribute, the height will be automatically adjusted and vice versa. If you specify both width and height attributes, the image will be resized in a way that it does not exceed specified dimensions.

Fit Mode

This mode expects both width and height attributes, and resizes the image to fit the specified dimensions according to the aspect ratio and ensures that the area described by the dimensions is entirely covered with the image. Smaller images will be proportionally upscaled to fit within the desired output frame size. Any outstanding image parts will be cropped out.

Fill Mode

This mode expects both width and height attributes, and just like auto strategy, proportionally resizes the image in a way that it does not exceed the specified dimensions. The remaining area is then filled with a background which accepts three values: a hex-encoded color, auto or blur.

Scaling

Image scaling allows you to transform the dimensions of your images by a given scale factor. Unlike image resizing, image scaling only accepts a floating point size parameter by which the image will be proportionally transformed. For example, if you'd like to have your images 50% smaller, you would specify 0.5 as a size value.

By default, image scaling will transform images according to their aspect ratio so they'll come out with perfect proportions. You may however, alter the ratio parameter and specify a floating point value for the aspect ratio. The aspect ratio value is the height divided by the width. The default ratio value is 1.0.

Cropping

With image cropping you can remove unwanted parts of the image or extract a portion of the image with the most interesting bits. There are three modes of image cropping: rect, ratio and face.

Rect

This mode allows you to extract a rectangular portion of the image by providing the width and height of the fragment you'd like to extract and optionally a gravity parameter.

Ratio

This mode allows you to specify aspect ratio of the resulting image.

Face

With the face mode, you can leverage face detection algorithms and easily extract the portion of the image that contains a face.

Automatic Enhancements

With Automatic Enhancements you can automatically adjust the image's shadow details, contrast, saturation and color of a face to give pleasing skin tones.

Border and Padding

You can easily add a border to your images by specifying border size, color, corner radius and background color when corner radius is in use. You can also pad your images to create an empty space around your subject.