Banner images for every screen size

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 Broadcast

Finding photos that work well on mobile and desktop is one of the hardest setup challenge with modern responsive designs. Broadcast provides you with multiple 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 relative height settings, One half, full screen, etc are sized relative to the heights for the browser or device. This ensures a consistent look no matter what device the user is on.

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.

A section that is three quarters tall 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.

Note that the parallax feature needs to zoom into the photo in order to create the parallax effect.

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 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

Section height examples

Image height

Using Image height setting, will provide a full sized view of your image on both desktop and mobile:

Desktop:

Mobile:

Full screen height

Using Full screen height occupies the entire viewable area of the browser's size with your image. Notice the image and position sizing when compared to Image height setting: