Banner images that work well with multiple device sizes
Homepage banners and slideshow images
We recommend using a horizontal ratio like 16:9 and experiment with how the images are displaying on your browser with different widths and heights. Larger images are best to accommodate for desktop viewers. If possible, start with at least 1920 x 1080 and increase if possible to as large as 4096 x 2304, Shopify will compress these images. The larger size will deliver a crisper image with compression. Save it as JPG and use "Save for web" or "Export as" with 100% Quality as Shopify will do the compression for you. Be sure "Convert to sRGB" is checked or selected.
Finding photos that work well on mobile and desktop is one of the hardest parts of responsive design.
The tall setting will adjust the photo to take up 3/4 of the screen. It will always take up 3/4 of the screen - so the photo is cropped either from the sides or the top & bottom.
The “image height” setting uses “classic” responsive scaling. This means it scales down as the screen scales down. All of the image will show on every screen -- it never crops. If you use a widescreen format photo it will be small on mobile but take up most of the screen on a laptop. If you use a portrait orientation image it will be very large on a laptop and fairly normal on a handheld device.
This is complicated by the parallax feature which needs to zoom into the photo a bit. I use loose cropping with parallax.
There’s no photo setting that’s perfect for every screen and every photo. That’s why there’s five settings. 4 of the settings use relative heights based on the screen size:
|Full screen:||100% height|
|Image height:||Full image height (works best with parallax off)|
Generally we try to use more thematic photos that can be cropped in many orientations and still work. Sort of like this demo: https://pipeline-dark.myshopify.com/
Tip: Keep the subject or focus in the middle of your banner. This will help greatly when your customer is on a mobile device. When your subject is the left or right, it will likely not appear on smaller devices as the theme adjusts the focus towards the middle and center of the image.
Here's an excellent example of by our friends at getdrest.com. They've created banner images with the subject in the middle of the banner and used the full screen height setting. Their key message is clear, the call to action button is easy to find and the product stands out in the image:
When visiting their site on a mobile device, the subject converts well as the focus remains in the middle. Messaging which is layered on top is enlarged to allow mobile shoppers to easily read the text. The call to action button is also simple to use and does not take over the mobile scrolling area.
When understanding how responsive designs work, you can build a shop that's beautiful and functional for all shoppers that are using almost any type of device and browser size.
Here are some best practice tips from Shopify as well:
No Parallax Trick
If you're finding that your mobile banner image is cropping out the main subject or possibly if you have a long image that's not displaying the entire image; there is a setting combination that can help.
Example banner with parallax and full screen height:
This image displays fine on desktop but doesn't work well on mobile:
When you use certain height settings and also parallax scrolling, Pipeline keeps the banner height setting but the sides of the image are not shown. The purpose for this is make sure the text is not shrunk and legible on mobile devices. If you shrink the text, it becomes difficult to read and your key messaging maybe missed.
How to show the entire image:
If you need the entire image to be shown, use this method:
(1) Change the height setting to Image height
(2) Uncheck parallax scrolling.
When you combine both these, the full image will be shown:
This is ideal for long images on desktop as well.
Keep in mind that the length might be much shorter now so there's less space for the text. If the text content is too large for the image, there will be a background color gap:
The other height settings will give you more room for messaging. This method is more for showing the entire image.
Vertical alignment customization
When using parallax, cropping is used to help build the effect and thus reduces your ability to show a full image. Turning off parallax gives you a large display with less resizing occurring to fit the image. The slideshow section modules do not use parallax so this trick is only helpful for Image with text overlay banner sections. If you'd like to use a different height setting like tall or short when parallax is off, there is an option to push the image to the top rather than a centred position.
Tall setting with no parallax (default centred):
Tall setting with no parallax (image pushed down to begin from the top of image):
To make that customization (works only when parallax is turned off):
Using separate images and settings for mobile and desktop
If you need to use different images or even settings for mobile compared to desktop, there is a customization option you can use. This will allow you to maintain a height setting you like for desktop and then use Image height or other for mobile. You can even use completely different images and messaging so that it works for your needs.