The problem the images are not displayed “properly” is caused by some factors, mostly related to the settings applied to the slider, so let’s go through some of them:

1) Your image has a size of 1920x800px and the slider has a height of 39% (slider width ÷ height ) the image will have a small part from the bottom cut out. But, if you set the slider height to 42 (meaning 42%) then you should see a bigger part of the image, and so on.

2) Your image has a size of 3840x1600px (double the size of the image we’ve used in the previous example). If the slider has a height of 39% (the default value) the image, just like in the above example, will have the lower part cropped. Increasing the slider’s height to 42% like the previous example, will make the image display properly.

Now, as you could see, the images I’ve used have a good aspect ratio. What about an other image, let’s say 1252x1252px? Well.. you’d never want to display a square image where you would be required a rectangular one, but we’ve seen worse.  So let’s see how this goes.

With the slider height set to the default 39%, the image will be stretched and the top and bottom parts will be cut out. Updating the slider’s height to 42% will not make any change except the fact that some of the previously cut out parts will be visible due to the increased height of the slider. What can one do in this case to display the full image is to increase the height of the slider. The problem with (almost) square images is that regardless of the increased slider height the images will still be zoomed in thus showing somehow blurred or pixelated…

In conclusion, you would need good aspect ratio images and most importantly, rectangular. Another aspect you might want to take into consideration is the width of image. The wider the better, but not excessively wide.

We usually recommend a maximum width of 1600px with a height of ~900px and a quality image level at 75%. The smaller and compressed the image is, the faster the website will load.