Table of Contents

Converting Between Aspect Ratios (Distorting)

Since most programs do not provide a straight-forward way of doing this, here is a quick way of converting between aspect ratios. The aspect ratio represents the ratio between the width of the image and the height of the image such that an aspect ratio of 2:1 just means that the picture is two-times wider than tall.

Since it is just a ratio, we can write that:

$$ \frac{w}{h}=a_{w}:a_{h} $$

the semi-colon was used in old-school maths terminology for fraction which means that $a_{w}:a_{h}= \frac{a_{w}}{a_{h}}$ such that:

$$ \frac{w}{h}=\frac{a_{w}}{a_{h}} $$

Now, suppose that we want to distort the same width and height to a different ratio, say $a_{w}':a_{h}'$ such that:

$$ \frac{w}{h}=\frac{a_{w}}{a_{h}} \mapsto \frac{a_{w}'}{a_{h}'} $$

This means that we must multiply the left-hand side fraction with a constant that will transform the ratio $\frac{a_{w}}{a_{h}}$ to $\frac{a_{w}'}{a_{h}'}$. Let that constant be called $d$, such that:

$$ d*\frac{w}{h} = \frac{a_{w}'}{a_{h}'} $$

Now, we extract $d$ from the equation, and we obtain:

$$ d = \frac{h*a_{w}'}{w*a_{h}'} $$

which will give us a numeric constant that should be multiplied with whatever is larger: either the width of the picture $w$ or the height of the picture $h$. If that is the case then we can derive the following transformation function:

$$ f_{a \mapsto a'}(w,h) = \left\{ \begin{array}{ll} w' =\left\{\begin{array}{ll} w * d & \mbox{if } w \ge h \\ w & \mbox{if } w < h \\ \end{array} \right. \\ \hspace{0.4\textwidth}\mbox{where } d = val\Bigr( \dfrac{h*a_{w}'}{w*a_{h}'} \Bigr) \\ h' =\left\{\begin{array}{ll} h * d & \mbox{if } h \ge w \\ h & \mbox{if } h < w \\ \end{array} \right. \end{array} \right. $$

that, when applied to:

will return a new width $w'$ and a new height $h'$, effectively distorting an aspect ratio $a$ to a destination aspect ratio $a'$.

Example

\begin{eqnarray*} \text{aspect ratio}&=&2:1 \\ \text{width}&=&512 \\ \text{height}&=&256 \end{eqnarray*} \begin{eqnarray*} \text{aspect ratio}&=&4:3 \\ \text{width}&=&341 \\ \text{height}&=&256 \end{eqnarray*}

The back-office story about this, is that the image on the right is the original image and was uploaded to some software that distorted it (damaged it, if you will) to a 2:1 ratio and we were trying to get the original back as it was.

Thus, we want to convert the image on the left, which is a 2:1 aspect-ratio image to a 4:3 aspect ratio image on the right. Let us enumerate what we know that:

In other words, we have that:

\begin{eqnarray*} w&=&512 \\ h&=&256 \\ a_{w}'&=&4 \\ a_{h}'&=&3 \end{eqnarray*}

which we can then plug-in to compute the numeric value of $d$:

\begin{eqnarray*} d&=&\frac{256*4}{512*3} \\ &=&\frac{2}{3} \\ &\approx& 0.666[6] \end{eqnarray*}

Since we have now obtained $d$, we can use our transformation function $f_{a \mapsto a'}(w,h)$ in order to calculate the new width and height of the resulting image on the right.

$$ f_{a \mapsto a'}(w,h) = \left\{ \begin{array}{ll} 512 *0.666[6] \approx 341.333[3] \right. \\ 256 \end{array} \right. $$

So the new image should have a width of 341 pixels (rounded-up) and a height of 256 pixels.

Quality

Using this method, the quality of the image is, in-fact enhanced: a stretching of an image will reduce the quality of an image, whereas a distort to its original size will increase the quality of the image. This is due to how pixels merge in various algorithms?

When changing the image size, the various filters such as nearest neighbor, bicubic, bilinear etc… Perform some sort of interpolation where the color of the pixels of the newly generated image are determined by examining neighboring pixels.

The problem is that when you enlarge an image, the colors fade, imagine this like stretching a very soft paper bag until it rips, and the new image, when observed at actual size appears blurry.

When you compress or downsize and image, the algorithms will tend to actually refine the value of every individual pixel. For example, if you scale a very large image (and hence, containing lots of "data") to a smaller image, the algorithms will tend to offer a more detailed view of the resulting image - simply because the averaging process had a lot of data to compute the new pixels.

Adobe says it's the other way round - they've never scaled a wallpaper, they don't know what they're coding. :-)

Resizing without Loss

One common issue you have is that you obtain an image of a given width and height and would like to fit it on a screen of a different width and length. Most graphics programs call have an option called "preserve aspect ratio" that, when activated, will calculate either the resulting width and height when the image is resized.

Keeping in mind the previous section, we define that:

The goal is to resize the image:

Suppose there is an image of a given original width and height ($w,h$) and that the screen that the image has to be resized to is of a different width and height ($w',h'$). Computing the ratio of the first image $r=\frac{w}{h}$ and the ratio of the destination image $r'=\frac{w'}{h'}$, the ratio of the first image $r$ and the ratio of the second image $r'$ is obtained.

This means, at least, that the original image will have to be larger or equal to the destination image.