How to Choose the Right Size for the Parallax Images?

Giving that our WordPress themes are all responsive and are adjusting their 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 created 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, it seems like the subject should stay inside the 6th circle which means your parallax image subject should be in the 1200 x 1200px container:

parallax image size guide for desktop, tablets, and smartphones

Looking for a parallax-ready WordPress theme?

Rosa 2, our new theme, features an awesome parallax effect to create a stunning website.

Take a look at Rosa 2
Updated on March 6, 2020

Was this article helpful?