Image proportion info and choices
The different types of Image resizing
The following information will show you all of the different types of image processing and resizing techniques that are useable in the content generation for your web site.
Note: all dimensions listed are Width x Height
The Original Images are shown below...
| Resize Type | Landscape Width is greater than height | Portrait Height is greater than width |
| Type 1 - Square Crop The image is scaled down so that the smallest axis (eg width and height) will fill the entire size of the box. The rest of the image is centered. Pros - Fills the whole box. Provides a consistent and predictable page layout at the expense of a full image. Cons - Unless the original picture is square, part of the image will get cut off. However when you click to view the image you will see the full version of it. |  |  |
| Pixel size of image: 200x200 | Pixel size of image: 200x200 |
Type 2 - Square Constraint The image is scaled down so that the largest axis (width or height) is set to a predetermined value. The image is then centered horizontally/vertically depending on the smallest axis. Pros - None of the images gets chopped off. Provides a good compromise of both consistency and not having to have images cropped. Cons - Some people don`t like the gaps on the top/bottom or left/right of the picture. |  |  |
Pixel size of image: 200x150 | Pixel size of image: 150x200 |
| Type 3 - Height Constraint The image is resized to a specific height with the width being proportionally calculated from the original image size. Pros - This allows a full image to be displayed. Cons - Not suitable for some times of web page layout. Can provide unpredictability and make pages hard to design and look good. |  |  |
Pixel size of image: 200x266 | Pixel size of image: 150x200 |
| Type 4 - Width Constraint The image is resized to a specific width with the height being proportionally calculated from the original image size. Pros - This allows a full image to be displayed. Width constraint is typically better than height constraint for browsers as people are much more accustomed to scrolling down a page rather than across it. Cons - Not suitable for some types of web page layout. Can provide unpredictability and make pages hard to design and look good. |  |  |
Pixel size of image: 150x200 | Pixel size of image: 200x266 |