Understanding rendering and output

An adaptation is produced by rendering: the platform takes the template, fills it with your content, and generates a finished file at the output size and format the template defines.

The browser draws the preview you see while building a template, whereas a separate process renders the final file, so the two can differ in sharpness and colour. This makes the preview a reliable guide to layout and content, but not to final quality. The rendering step determines quality, which depends on three things, each covered in its own section: the resolution of your content, the compression the format applies, and the size the output is rendered at.

The detail an image can show depends on its resolution (the number of pixels it contains), while the space an output has to show that detail depends on its size. When these two are far apart, quality suffers, and the direction of the mismatch decides how.

An image rendered much larger than its true resolution is stretched to fill the space, and because enlarging cannot create detail that was never captured, the result looks pixelated. An image far larger than the space it appears in has most of its detail compressed away to fit, which can make fine content harder to read.

Size sets a limit of its own: a small output such as a 728x90 banner contains few pixels in total, so there is a ceiling on the detail it can show, however good the source. This is why small pieces, and small text in particular, tend to look softer. The clearest results come when the detail in the source is close to what the output size can show, neither far more nor far less.

Resolution decides how much detail is available; the output format decides how that detail is stored, trading fidelity against file size. A lossless format such as PNG preserves every rendered pixel, which keeps the most detail and produces the largest files. A lossy format such as JPG discards some information to make the file smaller, and that loss can show as softening or visible artefacts, most noticeably around fine detail and sharp edges. An animated format such as GIF renders at good quality, but always with a look of its own.

Colour depth plays a smaller part: it sets how many distinct colours the output can represent, so a higher depth reproduces colour more faithfully. In most finished pieces the difference is subtle.

Because each format strikes a different balance, the best choice depends on where the adaptation will be used and how small it must be.

Video output makes the same trade of quality against size, but through codecs and containers rather than image resolution. A codec is the method used to compress the sequence of frames that make up a video, and to decompress it again for playback. Different codecs strike different balances between quality, file size, and the processing needed to decode them.

A container is the file wrapper that holds the encoded video, its audio, and related data together. The file extension, such as .mp4 or .mov, names the container, not the encoding inside it. This is why two files that share an extension can still behave differently: their wrapper is the same, but the codec within may not be.

A video format is therefore the combination of a codec and a container, so describing a video fully means naming both.

Even a well-rendered adaptation can look different depending on where it is viewed. High-density screens, such as Apple Retina displays, pack more pixels into the same physical space, which can make the limits of a low-resolution image more obvious than they are on a standard screen. This variation comes from the display, not from the template or the render, so it falls outside the platform’s control.