How can I keep banner images from getting blurry on large screens?

Store Design
1

When I upload a large banner image for example 1920 x 1080 the banner seems to be downsized by Shopify. So when the banner is shown on a large screen the image is blurry. It looks good on a 1440 screen.

I want to be able to show a high quality banner image on large screens.

How can I prevent shopify from changing the size? If this is not possible is it possible to hard code the banner image?

2 Likes
2

Hello @gnmg

Make use of the right Shopify image size and get it done, if you think it’s stressful to get it done you can reach out to me at any time.

But try your best if you can’t you can get in touch.

3

Hi @gnmg ,

You can upload Image banners with the following elements::

  • Shopify banner size: 1200 x 400 to 600 pixels
  • When choosing a Shopify banner size, you will need to take your specific theme’s guidelines into account.

For example, with the Brooklyn theme, you can use 1200×800 px images.
Many Shopify themes feature large images or slideshows that scale to the height of your browser or adapt to your screen size.

  • To crop or change an image’s dimensions to fit the recommended sizes, you can use the Shopify image resizer tool, which allows you to resize and compress your Shopify images. Shopify’s tool allows you to upload six photos at one time

  • Check how your images look on mobile every time you add an image. This is a very important step. Usually, square images work best.

I hope this answer helps.

4

@gnmg

Shopify Dawn Theme Image Sizes

Image Type Width Height Aspect Ratio
Product Image 700px 700px -
Collection Image 550px 550px 1:1
Slideshow Image 1600px 1050px -
Blog Post Image 720px 1080px -
Text Overlay Image 1600px 1050px -

Image Sizing Tips for Dawn Theme

  • Use the adapt to size feature for the Text Overlay Image to ensure the text neatly aligns with the image
5

It does not seem to matter how large a banner image I upload to the Dawn because the theme is downsizing it. When it is shown on a larger the screen the quality is reduced because the image has a lower resolution than the screen.

To solve the problem I hard coded the image into the code and it seems to work fine.

6

the problem is not with your image. the problem is that Shopify’s Dynamic Imaging resizes the images to fit different size screen but the largest screen size is 1500w. for screens larger than that it stretches the image to fit the screen and ruins the perceived resolution