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

Giv­ing that our theme is respon­sive and it is adjust­ing its ele­ments depend­ing on the size of the brows­er, the cov­er images will be cut so they can fit into the hero and keep their aspect ratios. Besides this, for the par­al­lax effect, it needs to be resized up and down, so that the effect will take place.

With that in mind, there’s no spe­cif­ic size for the images to guar­an­tee that they will be dis­played ful­ly every time because this would mean to stretch them in most of the cas­es (e.g. when you have a wide image on a mobile por­trait screen).

But what we can do, is to find an opti­mal size for the images, so the main sub­ject will always stay in the view­port area. For that, I cre­ate an image that you can use to test out what should be your ide­al size for your par­tic­u­lar case.

It’s a 2000 x 2000px image size, with a 200px gra­da­tion that you can set as the Fea­tured Image. After that, you can play with the brows­er width and height (or use the Chrome Dev­Tools) to find out where to place your main sub­ject.

For the full-height hero case, seems like the sub­ject should stay inside the 6th cir­cle which means the 1200 x 1200px con­tain­er:

*Note: The expla­na­tion image is made in Rosa theme but the same prin­ci­ple is apply­ing in the Mies theme too.

This article applies to Mies, as they share the same underlying structure.

Updated on April 14, 2017

Was this article helpful?