Placing images in designs online has always been tricky. Where a web design can be flexible and have spaces for images that are of any height or width, images can only be modified in two ways, with respective trade-offs.
With the growth of responsive design, images are yet another bit trickier. Images are harder to just re-scale. They pose a lot of new interesting challenges for us.
The Image Aspect Ratio
In images, the aspect ratio is critical. It is the relationship between the width and height of the image, expressed as a scale. Traditionally with film, images were in 3:2 format. Compact digital cameras and non-full frame dSLR cameras shoot images that are instead 4:3. You’ve probably heard of the widescreen 16:9 format too with video footage shifting from 4:3 to 16:9 many years back.
These ratios between width and height are fixed. The only way we can change them is if we crop the image. Cropping an image means we need to cut away part of it.
So, in order to display a full 4:3 image on the web, we need to have it in a frame that is also 4:3, or whatever the aspect ratio may be.
Photo aspect ratios aren’t perfect in web design
Here’s the problem, though. These traditional photo aspect ratios aren’t perfect to use in web design. The reason for this is the aspect ratio of your computer screen.
Computer screens (today) are wider than they are tall, by quite a margin. They are widescreen. This means that we have a more room width-wise when designing websites than we do height-wise, without introducing a scrolling element.
While we may scroll to infinity on a website, we still need to show an overview to the visitor to gain their interest. This introduces some height restriction on banners, headers, and image elements as part of a design.
Simply put, the way we design for effectiveness is at odds with the natural aspect ratios of images.
Complicating it further with responsive web design
To make matters more complicated, we have responsive web design to consider. It makes things complicated for one key reason: We don’t always neither know nor are in control of the exact width/height ratio of the image.
As we create a design that is going to adapt flawlessly to screen sizes ranging from small, single-column designs on a smartphone to large complex multicolumn grids on desktops, we can’t always realistically be in control of the exact sizing.
This poses a problem of course. How to display our images with their perfect, non-changeable aspect ratio (we can’t just re-compose our image after the fact)?
Largely, the answer to this problem is cropping the images dynamically based on the frame where they are at. To be clearer. We create a bounding box, a frame, which has a certain width and/or height requirement. The image is then placed in this box and is then allowed to scale.
The only requirement we set is that it should fill our frame proportionally at all times. No white space should be created, nor should the image be stretched out of its aspect ratio.
Giving up control over exact image outcome
Generally, we need to give up the control over exactly how the image is going to look. It is simply not feasible for all the screen sizes to create an exact, perfect environment for images.
This means relying on the above method of filling image frames proportionally. A solution not without its problems. There are images where you will sometimes find yourself automatically cropping out the subject. For these cases, alternative solutions may be found.
In conclusion, though, the only solution to beautiful imagery online is to give up the control over exactly how the image is displayed at any given time. This, as well as selecting and taking photos specifically for their use-case means we can get beautiful imagery combined with a beautiful web design.
