Focal Point: CSS-Framework Scales Down Images In Responsive Designs Intelligently

Responsive webdesign aims to present websites in the best possible way, even if viewed on mobile devices. Images are usually simply scaled down in that approach. If you use images with a high grade of details pictures soon become too small. The new CSS framework Focal Point cares for shifting the focus to the most important part of the image before scaling down. That way smaller resolutions only see part of the image but larger. You know it. The center of an image is not always in the center of the image. Which means that the most important part does not necessarily show up in the middle of a photo. With Focal Point you can define an area, that represents the parts you do not want to miss out on smaller resolutions. Parts covered by Focal Point stay visible no matter how far down you scale.

How To Define The Focal Point

The principle of Focal Point is simple: a grid is put upon each picture. The grid consists of 12 by 12 units. Using CSS we now define one unit of the grid as the Focal point, the area that will always stay visible. Imagine that picture of Uncle Hugo. Define his head as Focal Point. Even though Uncle Hugo's face resides on the right side of the photo, it will stay in focus when being scaled down to smaller resolutions. I don't think Uncle Hugo would have accepted any other solution on his own website... To define the Focal Point, we assign two classes to the image. These classes position the Focal Point inside the grid horizontally and vertically. We start counting from the center of the grid. That way we have six classes altogether, counting up, down, left and right.

<div class="focal-point left-3 up-2">
 <div>
   <img src="img.jpg" width="400" height="300" alt="" />
 </div>
</div>

In this example the Focal Point is defined to be three grid units from the center to the left and then two units up. The class focal-point is as mandatory as the surrounding div around the image. By default the frameworks cuts down the image as soon as the browser window gets resized to sizes smaller than 767 pixels. You can easily adjust this value in the accompanying style sheet.

How Focal Point Works

Focal Point's mode of operation is easily understandable: Different CSS classes cut the image using negative margin values. The unit for the value is em. Use images with a 4:3 proportion for best results, add the additional class portrait for 3:4 proportions. Conclusion: Focal Point follows an interesting approach to optimize the presentation of images at smaller resolutions. With only one single file to embed and customize there is no tedious learning curve to work along. So, start using it now... (dpe)