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