pixels metadata

Declare pixels metadata to control the width and height of previews which the Aneamal Translator automatically generates for images linked with [j].

You can assign two integers to the pixels metadata name. The integers must be separated by a comma. The first integer controls the width. The second integer controls the height. If you only assign one integer, that value will control the width while the height will be treated as zero.

Assigning two positive integers forces a particular aspect ratio upon previews. If this aspect ratio differs from the aspect ratio of the original image, the preview image shows a central crop of the scaled image. There will be no distortion.

The Aneamal Translator uses -640,-640 as default value, if pixels metadata has not been declared. This means that larger original images are scaled down so that the longest side of the preview measures 640 pixels.

Note

Previews have to be generated anew when you change a pixels metadata declaration. Generating previews takes some time, so your webpage will probably load more slowly when it is accessed for the first time after a change.

You may even see a message announcing a timeout or maximum execution time error after a change of the pixels metadata declaration, if your webpage contains many images. Reload the webpage in your browser in such a case. The error message disappears and the webpage loads very quick again when all previews have been generated anew.

Examples

All of the following examples use the same markup for a linked image file with an automatically generated preview:

[j:George Meyerle test chart]->/stuff/test-chart.png

But each example uses a different pixels metadata declaration.

@ pixels: 0, 0
George Meyerle test chart

In the above example, the generated preview image file has the same width and height as the original image. The preview still comes with a performance benefit, because its lossy JPEG encoding uses much less bytes than the original PNG file.

The next example declares that previews shall be up to 500 pixels wide and up to 400 pixels high. The generated preview happens to be 500 pixels wide and 375 pixels high then, since this fits best to the given constraints while preserving the aspect ratio of the original image.

@ pixels: -500, -400
George Meyerle test chart

The next example declares that previews shall be up to 300 pixels wide and up to 200 pixels high. The generated preview happens to be 267 pixels wide and 200 pixels high then, since this fits best to the given constraints while preserving the aspect ratio of the original image.

@ pixels: -300, -200
George Meyerle test chart

The next example declares that previews shall be exactly 300 pixels wide and up to 200 pixels high. The size of the generated preview happens to be 300 by 200 pixels then and the image is cropped a little at the top and at the bottom to fulfill the given requirements.

@ pixels: 300, -200
George Meyerle test chart

The next example declares that previews shall be exactly 200 by 200 pixels, so a square preview of 200 times 200 pixels is generated. This time the image is cropped at the left and right sides to fulfill the requirement.

@ pixels: 200, 200
George Meyerle test chart

The next example demands a width of 200 pixels, while letting the Aneamal Translator determine the height which preserves the aspect ratio freely. The generated preview happens to be 200 pixels wide and 150 pixels high then.

@ pixels: 200
George Meyerle test chart

The last example declares that previews shall be up to 400 pixels high, while the Aneamal Translator shall determine the corresponding width freely. The size of the generated preview happens to be 533 by 400 pixels then.

@ pixels: 0, -400
George Meyerle test chart

Note

Some of the differences between the images in this examples section may not be apparent, if you view this webpage on a small screen or in a small browser window, because the images are additionally scaled down by your browser then.

For developers

Mind that you can apply CSS to tell browsers to scale or distort the generated preview images on the webpage independently of the above settings, for example:

figure img {
	max-width: 100%;
	height: auto;
}

Scaling images down with CSS does not reduce the transfered data volume though while generating smaller preview images does.

Further reading