Shortcut to this page: http://faq.ph9.com/faq_question.asp?key=1010&topic=image-proportion-info-and-choices
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...

Proportion1Proportion2




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.

Proportion3
Proportion4

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.


Proportion5
Proportion6


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.

Proportion7
Proportion8


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.

Proportion9
Proportion10


Pixel size of image:

150x200


Pixel size of image:

200x266





Shortcut to this page: http://faq.ph9.com/faq_question.asp?key=1010&topic=image-proportion-info-and-choices


© 2024 ph9 Ltd. Any FAQ, guides, advice or acticles here is provided "as is" with no warranty and as per our terms and conditions at www.ph9.com/terms