This is an old revision of the document!
Level: Layman (Terms easily understood by anyone).
In this article the following image will be used (which has been scaled down from it's original size).
Here are some technical data extracted from the original image:
706.62 Kb (723575 bytes) Image width : 2048 Image height : 1536 Orientation : right-top (6) .../... Exif Version : 02.20 Date and Time (original) : 2007:11:04 23:31:47 ...
These characteristics (called Metadata) are directly recorded in the picture by the digital device (usually a camera). The Metadata used by digital cameras is called Exif. In order to get the embedded Metadata, you may need to enable an option enabled in the.
Note: The example image has been modified by our documentation software and no longer contains the original Exif values.
If the image is simply displayed on a website, with no pre-processing, there would not be a consistent display across browsers. The image would be displayed in one of two orientations.
If you take a look at the image dimensions from the Exif data, you will see that the image's width (2048) is larger than its height (1536). Which would seem to indicate that the portrait display is correct. However, digging further into the metadata, the orientation is “right-top”. Meaning that the image should be rotated in such a way that they right side is on top (Landscape mode).
If a browser takes Exif data into account when displaying an image, the example image will be displayed in Landscape mode. If not, it will be displayed in Portrait mode. Because of this, the image must be rotated prior to displaying it on a browser. This will ensure a consistent display across browsers.
For most people, an image with a width of 1536 pixels and height of 2048 pixels will be far to large to display on a single screen. Just because the screens don't have a such resolution level. Although a high-resolution size is desired for printing, a much smaller size is needed for web browsing. This size is often referred as an image's “web size”.
web sizes | (pictures have been reduced for easier explanation) | |
---|---|---|
thumbnail | Picture page | |
96×128 | 512×682 | 660×880 |
(visible size) | (ideal size) | (browsable size) |
printable size (High resolution) | ||
1536×2048 | ||
(pictures have been reduced for easier explanation)
Most, if not all, photo editing tools allow rotation of images. Here is an example of one such tool: XnView.
The small arrow (close to Exif) shows you that although the image is being displayed in portrait mode, this differs from actual orientation. XnView has a rotation tool which allows images to be rotated without any loss of quality.
To learn how to resize images utilizing third party utilities, see Preparing photos before synchronization (translated from French).
Then transfer them in a physical category eg. 'cat':
(reduced pictures for easier explanations)