If you notice that images being requested vary in orientation or won’t work well in the manner they are being requested, you can either crop the image(s) in question or find an alternative image to use in its place.
Image orientation is important when we are displaying images alongside our course content. A tall and skinny image placed on the page will take up a lot of vertical space or will need to be displayed so small that you can’t tell what it is. It’s important that the image orientation, and size, fit the page and the context in which they are being used.
There are 4 basic images shapes that determine orientation. Click on each orientation type to learn more about it.
A banner image is wide and relatively short. It is usually placed above or below content and is often quite detailed.
Horizontally oriented images (also known as landscape) are the most commonly used and requested. They are wider than they are tall, but not as wide as a banner image.
Vertically oriented images (also known as portrait) are tall and relatively skinny. These images, on their own, leave a lot of whitespaces around them, which can prove problematic in development.
Images that are equally as tall as they are high, are square shaped. This size image is very versatile in maximizing horizontal space and providing unity when placed side by side.
It’s important to evaluate the course content, in relation to the image orientation, when determining image size. Let's say we have a style that is set for all images on the page. We have them set to display at 100% width, with a maximum width at 300px, and we have several images with different orientations. With this style applying to all images, some images may be too small to see and other so big that it becomes the focal point of the page. (See example below.)
Now that we’ve seen the differences in image orientation, let’s see how this applies to development.
