So another solution is that you can define different pictures for the different viewport sizes (e.g. However, on smaller viewport sizes it might become hard to recognize someone on such pictures (at least without zooming in). On larger viewport sizes, it might be easy to tell who is in the picture, you can see their faces very well. LetвЂ™s say you have a landscape photo with a group of people in the middle (e.g. it is not only about keeping the important part. So you can either address this issue by manually setting focal points, or there are solutions for automatic art direction (this is the specific term for this activity).Д«tw. A possible solution is that you can identify focal points, and there are tools that include for instance face detection. if the rule of thirds was applied, and the subject of the image is placed at the intersection points nearer to the left or right side of the picture? In these cases, dynamic cropping might crop out the main subject. Usually itвЂ™s handled by dynamic cropping - but what happens if the most important part of the image is off-center, e.g.

The key takeaway here is that you, as a designer should specify what should happen with the images upon viewport size changes, how these elements are displayed on different viewport sizes.ДЄnd how can we specify what part of the image will be displayed and what part will be cropped out? Art direction In the following example, both of these images have a fix and identical height.Дistorted image: fix height and a dynamically changing, fluid width. And if you have a fix height, and a dynamically changing, fluid width, you might end up with a distorted image. Now, what happens if you are not working with a 1:1 aspect ratio? In case of a fluid container, the aspect ratio might change depending on the changes of the viewport size. for many years Instagram only allowed users to upload square images with a 1:1 aspect ratio (and your photo grid screen still contains square images, it crops anything that is not a square). One safe solution for including images in your layouts is using a fix aspect ratio, e.g. In this article, I discuss some more important aspects, for instance responsive images, pixel density, responsive texts and some other related techniques like infinite scrolling. In the previous part I outline the basics of fixed layouts, adaptivity, fluiditity and responsivity.

This is my second article on designing for different screen sizes and devices.

Responsive resize iamges