Jpg dimensions for slideshow desktop vs mobile

Store Design
1

Hello,

What jpg dimensions to I use to ensure my image for homepage banner slideshow works for both desktop and mobile?

Thank you!

2

Hey, I hope you are well!

Look, to ensure your homepage banner slideshow image works well on both desktop and mobile devices, it’s important to consider responsive design. Generally, Shopify themes are designed to automatically resize images based on the viewer’s screen size. However, to optimize the display and reduce potential cropping issues, you can follow these recommendations below:

  1. Use a high-resolution image with a width of around 1800-2000 pixels. This will ensure that the image looks crisp on larger desktop screens.
  2. Maintain an aspect ratio of 16:9 or 4:3, as these ratios work well across various screen sizes and devices.
  3. Opt for a simple, clean design with minimal text on the image. This ensures that the image remains visually appealing and legible when resized for mobile devices.
  4. Test the image on different devices and screen sizes to ensure it displays properly.

In the end, though, remember that the exact dimensions may vary depending on your Shopify theme, so it’s a good idea to consult your theme’s documentation for specific image size recommendations.

I hope this helps!

3

Hi @marketgal ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea

For Shopify homepage banner slideshow images, it’s recommended to use the following dimensions:

  • Desktop: 2000 x 800 pixels
  • Mobile: 1000 x 1600 pixels

This will ensure that the image looks good on both desktop and mobile devices without being distorted or cropped. Additionally, it’s recommended to use a high-quality image with a file size of less than 2MB to ensure fast page load times.

Hope my answer will help you.

Best regards,

Victor | PageFly

4

Hi Victor!

Is there any code that allows me to chose one image for desktop, and another different image (with smaller dimensions) for mobile?

I actually have 3 image banners that I want to put in a slide show. Therefore, would need a code to allows 3 banner images for desktop and 3 different banner images (smaller dimensions) for mobile.

5

Hi @lojasodi

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

The @media rule is used in media queries to apply different styles for different media types/devices.

Hope you find my answer helpful!

Best regards,

Richard | PageFly