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.

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

Full screen: 100% height
Tall: 66% height
Medium: 50% height
Short: 33% height

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/


No Parallax Trick

Here's a setting that might work for you - Turn off parallax scroll and also set Section height to: "Image height".
This gives you a large display but less resizing is occurring. Therefore, more of your banner image is shown. 


Custom Code Option

If that still doesn't work for you, there is custom code you can use to add an option for a mobile-specific background image.

You will need to replace the entirety of this file:
sections/index-banner-image.liquid

With this code:
https://gist.githubusercontent.com/gideonb/6cfe9776da8de021b9f2e9b3e28e2860/raw/2415195d54ea103bb70dacc9e031518997f60a6d/index-banner-image.liquid

That will allow you to set a mobile-specific background image. Always create a duplicate of your theme before making this type of change. 

Still need help? Contact Us Contact Us