Images

Understanding Responsive Layout | CMS

Understanding responsive layout

Print

 


Images will resize depending on the screen size a website user views your website on. 


 


If a website user views your website on a large desktop screen, the images will be large also. If they view the website on the iPhone 7, the images will be much smaller, and cropped to fit the screen better.


 The best way to avoid copping off important aspects of an image (e.g. people's heads) is to choose an image that has the focal point of the image centered and relatively zoomed out. When an image becomes a slideshow on a large screen, it will expand to fill the space, and the top and bottom will be cropped. An image with a centered focal point will be less likely to be negatively impacted by cropping.


On an iPad in portrait mode, an image with a focal point on the left or right hand side will be at risk of being cropped off.


 


See below an example of how the same image resizes on multiple devices.


In this situation, it would be better to choose another image where the focus is zoomed out and centered in the middle.


 


Original



 1920x1200



1920x1080



1680x1050



1600x900



1366x768



1024x600