How-to guideGet a task done

Improve output quality

This guide helps you get sharp, good-quality output from your templates, and fix output that looks soft or comes out wrong. It is for template builders.

Understanding rendering and output explains why output quality varies, including resolution, compression, and the difference between the preview and the render. This guide covers what to change.

Match the source to the output size

Output looks best when each source image is close to the size it appears at.

  • Use an image sized near its placeholder: an image much larger than the space is compressed to fit and can lose clarity, while one much smaller is stretched and looks pixelated.

  • Use SVG for logos and other line art where you can, because vector art scales to any size without losing quality.

  • In a banner template, adjust the asset's scaling in the quality control panel to fit its placeholder.

Prepare your source files

A few habits with your source files keep output quality high.

If a PNG is larger than it needs to be, reduce it in an image editor before you use it, which keeps the finished output smaller without losing quality. In Adobe Photoshop, use File > Export > Export As and enable Smaller File (8-bit).

When you export an SVG for a banner or HTML5 template from Adobe Illustrator, use these settings so it renders correctly:

  • Styling: Inline Style.

  • Font: Convert to Outlines.

  • Images: Embed.

  • Object IDs: Layer Names.

  • Decimal: 4, or 2 for HTML5 banners to reduce the file size.

  • Responsive: enabled.

Choose the format and quality settings

Set the output format and quality to suit where the adaptation will run.

  • Use PNG when you need the most detail, because it is lossless; it also produces the largest files.

  • Use JPG for the smallest files, and set the quality to its highest setting, because a low JPG quality is the most common cause of visible compression.

  • Use GIF only for animation, and expect it to look different from a still-image format.

For video output, set the bitrate to the value you intend, because a mistyped bitrate, such as 7 in place of 7000, produces a tiny, low-quality file.

Increase resolution when output looks soft

If a small output still looks soft after you match the sizes, increase the resolution of the source image. Doubling the resolution can sharpen fine detail.

Bear in mind one limit: if the finished adaptation must stay a fixed size, an oversized image is downscaled again when it is uploaded to the channel or ad platform, so the extra resolution may not help there.

Troubleshooting

Each problem below is a common output-quality problem. Select one to see how to fix it.

Problem: The render looks softer than the preview.

Solution: the preview is not a reliable guide to final quality, so judge quality from a rendered adaptation. If the render is genuinely soft, raise the source resolution or the output quality setting.

Understanding rendering and output explains why the preview and the render differ.

Problem: One specific size fails to render while other sizes work.

Solution: the asset is probably too large for that size’s limit. Resize the asset smaller, then produce the adaptation again. Known limitations lists the maximum dimensions.

Problem: The output is the wrong file type, such as a still image when you expected an animation.

Solution: check the output and thumbnail settings. An animated output needs the thumbnail set to animated and a long enough duration.