How do I determine the optimal size for the parallax images?

Giving that our theme is responsive and it is adjusting its elements depending on the size of the browser, the cover images will be cut so they can fit into the hero and keep their aspect ratios. Besides this, for the parallax effect, it needs to be resized up and down, so that the effect will take place.

With that in mind, there’s no specific size for the images to guarantee that they will be displayed fully every time because this would mean to stretch them in most of the cases (e.g. when you have a wide image on a mobile portrait screen).

But what we can do, is to find an optimal size for the images, so the main subject will always stay in the viewport area. For that, I create an image that you can use to test out what should be your ideal size for your particular case.

It’s a 2000 x 2000px image size, with a 200px gradation that you can set as the Featured Image. After that, you can play with the browser width and height (or use the Chrome DevTools) to find out where to place your main subject.

For the full-height hero case, seems like the subject should stay inside the 6th circle which means the 1200 x 1200px container:

*Note: The explanation image is made in Rosa theme but the same principle is applying in the Mies theme too.

Updated on April 14, 2017

Was this article helpful?