Banner images that work well with multiple device sizes

1

Recommended image size for banners

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.

2

Responsive design and height settings in Pipeline

Finding photos that work well on mobile and desktop is one of the hardest setup challenge with modern responsive designs. Pipeline provides you with a five different height options to help combat the challenges of using one image for all devices. The traditional style of displaying the entire image is called "Image height". The other four height settings, Full screen, Tall, Medium and Short have responsive image qualities by using relative heights for the browser or device. 

Image cropping does occur with responsive design when using relative heights or with the Parallax effect, this is done to help fit the content on various sized screens and devices. There are many advantages when overlaying your text and description over the image. Especially for search engines like Google or Bing. Search engines can index the titles and descriptions to better help with your rankings and site promotion. When you Photoshop text onto an image, search engines are not able to index the text content. 

Here are a few notes about the height settings in Pipeline. The tall setting for example 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 same concept applies to Medium which is 1/2 of the screen and Short which is 1/3 of the screen. Full height is the entire height of the viewable area on the browser or device.   

The “Image height” setting uses classic or traditional 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. Pipeline uses loose cropping with parallax.  

- There’s no photo setting that’s perfect for every screen and every photo.  That’s why there are five settings. Four of the settings use relative heights based on the screen size: 

Generally we recommend using more thematic photos that can be cropped in many orientations and still work. 

Pro 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 for responsive images by Shopify:
https://help.shopify.com/en/manual/using-themes/change-the-layout/images#best-practices-for-slideshows-and-full-width-images

3

Parallax scroll and Image height

The parallax feature needs to zoom into the banner image to provide the effect during scroll. For that purpose cropping is needed. We recommend turning off parallax scroll when troubleshooting image display with some images, especially with mobile devices. 

If you're finding that a banner image is cropping out the main subject or if you have a long image that's not displaying the entirely, try this combination:

1. Section height setting: Image height
2. Uncheck parallax scroll

Slideshows and Parallax:
The slideshow section scrolls in horizontal direction. Parallax is a vertical scroll effect only and cannot be applied to horizontal scrolling slideshows.

Examples:

Full height setting and parallax scroll enabled:

This image displays fine on desktop but when displaying on a mobile device, the subject is lost:

Pipeline maintains the selected banner height setting of full screen. However, the sides of the image are lost. This can occur with or without parallax scroll, parallax scroll increases the crop zone even further. If the subject was in the centre and middle, the banner image would have worked with that combination. 

One thing to point out, even though the image was cropped, the title and description are taking advantage of the responsive features and maintaining a legible size. This is key to help with your messaging and the main call to action button is large and easy for the customer act upon. 

Example 2:

Image height setting and no parallax scroll:

The result on mobile is a smaller image but the entire image is displayed. This is also ideal for longer images as they are not cropped out on desktop or mobile.

Some Considerations

When using Image height, the length on mobile will be much shorter, which results in less space for the text. The other four height settings benefit here as they use relative height of the device. 

Tip: Test your banner on mobile. If the title, description and button content is too large for the image, there can be background color bleed:

The other height settings like "Full height" or "Tall" can provide more messaging space especially with mobile devices. The main benefit of using "Image height" is to display the entire image. 

4

Customization - Top vertical alignment

In the first section we discussed how full height, tall, medium and short height settings use a relative portion of the customer's screen. The cropping used to adjust the image to fit within that height setting is based on centered vertical positioning. That's where having the subject in the center and middle is beneficial. We do have a code customization you can use (CSS override) to change that image position to be displayed from the top. That will allow you to display the top of your image and crop the lower portion rather than cropping a portion from the top and a portion from the bottom. 

Examples

Tall height setting with no parallax scroll (important, parallax must be disabled). The image is 3/4 height of screen and positioned to the center (top of image is cropped).

With the code modification, we can still display the top of the image. 

Modified code result:

Tall setting with no parallax scroll - Top portion of the image is not cropped. There is more cropped at the bottom while the top is untouched. 

To make that customization (works only when parallax is turned off), you can use the CSS override code from this article. 

Always make a backup of your theme before making code changes (our support team cannot troubleshoot your code modifications). Link to modification:

Customization for vertical alignment

5

Customization - Using separate images and settings for mobile and desktop

If you are unable to find the right images that work well with both desktop and mobile, we do have a customization which allows separate images and settings for desktop and mobile. This is a manual customization which provides you an additional banner (or slideshow) section for desktop and another one for mobile (you won't be modifying your original section code, instead adding new sections). With this customization, you can use an entirely different image on mobile and even height settings and text content. 

Customization Example

(1) Two new sections are created. Both are active and have their own image, height setting and text content. 

(2) The the standard theme section is turned off as it won't be used.

The Desktop version only displays on desktop browser sizes (the mobile section is hidden) and the mobile version is only displayed on mobile sizes (desktop section gets hidden):

When we change the Theme Editor to mobile view, the Banner for Mobile section is shown and can be modified:

Always make a backup of your theme before making code changes (our support team cannot troubleshoot your code modifications). Link to modification:

Image with text overlay customization

Slideshow customization