Responsive images with Story theme

Responsive design

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. Four of the settings use relative heights based on the screen size: 

Generally we try to use more thematic photos that can be cropped in many orientations and still work.  Example:

Desktop sample:

Mobile sample:

Another desktop sample:

Mobile:

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.

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. 

Parallax scroll - Turn off for better mobile results

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 tall screen height:

Desktop view:

This image displays fine on desktop but doesn't work as well on mobile:

By turning off, unchecking Enable parallax scroll:

The mobile image display is improved, more of the subject is shown:

For even better results, change the Section Height setting to Image height and uncheck Enable parallax scroll:

Resulting in (mobile):

Result (desktop):

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. 

Keep in mind that the length might be much shorter now so there's less space for the text. Use the alignment settings to help position the title and description:

Recommended banner image size

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.