🌍
English
Differences
This shows you the differences between two versions of the page.
|
en:web-appaerance [2008/04/29 18:58] vdigital Thanks to LinuxLefty for his help |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Your pictures on the web ====== | ||
| - | |||
| - | |||
| - | <sup>Level: Layman (Terms easily understood by anyone).</sup> | ||
| - | |||
| - | In this article the following image will be used (which has been scaled down from it's original size). | ||
| - | |||
| - | {{en:photo0216_c.jpg|}} | ||
| - | |||
| - | Here are some technical data extracted from the original image: | ||
| - | |||
| - | <code> | ||
| - | 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 | ||
| - | ... | ||
| - | </code> | ||
| - | |||
| - | 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 [[http://en.wikipedia.org/wiki/Exchangeable_image_file_format|Exif]]. | ||
| - | In order to get the embedded Metadata, you may need to enable an option enabled in the. | ||
| - | |||
| - | <sub>**Note:** The example image has been modified by our documentation software and no longer contains the original Exif values.</sub> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== Orientation / Rotation. ===== | ||
| - | |||
| - | 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. | ||
| - | |||
| - | ^ Portrait ^ Landscape ^ | ||
| - | | {{ en:photo0216_a.jpg |}} | {{ en:photo0216_b.jpg |}} | | ||
| - | |||
| - | |||
| - | 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. | ||
| - | |||
| - | |||
| - | |||
| - | ===== Dimension / Image size. ===== | ||
| - | |||
| - | 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 ^^ <sub>(pictures have been reduced for easier explanation)</sub> ^ | ||
| - | ^ thumbnail ^ Picture page ^ {{en:dimension-link.jpg| Access via the Dimensions' link}} ^ | ||
| - | ^ 96x128 ^ 512x682 ^ 660x880 ^ | ||
| - | ^ (visible size) ^ (ideal size) ^ (browsable size) ^ | ||
| - | | {{ en:photo0216_a.jpg |}} | {{ en:photo0216_e.jpg| }}| {{ en:photo0216_d.jpg |}} | | ||
| - | ^ printable size (High resolution) ^ | ||
| - | ^ 1536x2048^ | ||
| - | | {{en:photo0216_c.jpg|}} | | ||
| - | <sub>(pictures have been reduced for easier explanation)</sub> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== Rotating portrait pictures ===== | ||
| - | |||
| - | Most, if not all, photo editing tools allow rotation of images. Here is an example of one such tool: [[htt://xnview.com|XnView]]. | ||
| - | |||
| - | {{en:xnview-photo0216.jpg|}} | ||
| - | |||
| - | 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. | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== Resizing your pictures ===== | ||
| - | |||
| - | To learn how to resize images utilizing third party utilities, see [[http://www.google.com/translate?u=http%3A%2F%2Fphpwebgallery.net%2Fdoc%2Fdoku.php%2Ffr%3Autiliser%3Apreparer_les_photos&langpair=fr%7Cen&hl=en&ie=UTF8|Preparing photos before synchronization]] (translated from French). | ||
| - | |||
| - | Then transfer them in a physical category eg. 'cat': | ||
| - | | ./cat/thumbnail/ | | ./cat/ | ./cat/pwg_high/ | | ||
| - | ^ 96x128 ^ 512x682 ^ 660x880 ^ 1536x2048 ^ | ||
| - | | thumbnail{{en:photo0216_a.jpg|}} | nothing to transfer for ideal size | browsable size picture = picture in its physical category {{en:photo0216_d.jpg|}} | High resolution is **optional** {{en:photo0216_c.jpg|}} | | ||
| - | <sub>(reduced pictures for easier explanations)</sub> | ||
| - | |||
| - | |||
| - | ===== The ideal size picture ===== | ||
| - | |||
| - | Using the user's administration, you can set the maximum image dimension displayed for all users. | ||
| - | |||
| - | {{en:admin_users.jpg|}} | ||
| - | |||
| - | Default display will be changed as well. In addition, each member can define his maximum display sizes in the user preferences. | ||
| - | |||
| - | {{en:personnaliser.jpg|}} | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== Things to keep in mind ===== | ||
| - | |||
| - | * If limits are not defined, or if image sizes are smaller than one maximum value, the picture will be displayed using its real dimensions (ideal = browsable). | ||
| - | |||
| - | * Submitting images without preparation is usually a bad idea as it adversely affects a large number of your visitors. You have to transfer your pictures into a browsable size. If you only use high resolutions, people with low band connection will never come back to your site. Moreover, you are consuming your website bandwidth for no reason. | ||
| - | |||
| - | * If a high resolution size is optional, reserve it for pictures that really need them. | ||