Optimal dimension for desktop banner

Shopify Discussion
1

I have worked out with the codes to have a separate banner for desktop and mobile. Now I, want to know what’s the accurate optimal dimension of banners for desktop and mobile so that I can design my banner accordingly. Also, the image quality of the banners is very bad, let me know if it needs to be done by coding or just, I need to do is, is to optimize my banner size.

2

Hey, the optimal dimensions for a desktop banner can vary depending on the theme you’re using and your specific design preferences. However, we can provide you with some general guidelines to help you create a banner that looks great on desktop screens.

  1. Width: Aim for 1200 to 1600 pixels, matching your theme’s content width (e.g., 1440 pixels).
  2. Height: Typically 200 to 400 pixels.
  3. File Format: Use JPEG, we prefer JPEG as it weigh less and the loading of it is faster than PNG.
  4. Resolution: 72 to 150 PPI.
  5. Content Placement: Keep important content centered (like some kind of “safe zone”).
  6. File Size: Optimize for fast loading.
  7. Test and Iterate: Check on different screens and browsers for adjustments.

Hope we helped :slightly_smiling_face:

1 Like
3

Hello,

For optimal banner dimensions on desktop, a common approach is to use a width of around

1200 to 1600 pixels and a height of about 300 to 500 pixels. This provides a good balance between visibility and loading times. However, keep in mind that website designs can vary, so it’s important to test how your banner looks on different screens and resolutions.

Regarding image quality, ensuring high image quality is crucial for a professional appearance. You can improve image quality by using high-resolution images (at least 2x the dimensions you plan to display) and using appropriate image formats like JPEG or PNG. Compression techniques can also help reduce file size while maintaining image quality.

Here’s a brief summary of the optimal dimensions for desktop banners:

Width: 1200 to 1600 pixels
Height: 300 to 500 pixels

For mobile banners, the optimal dimensions are generally narrower. You can aim for a width of around 320 to 480 pixels and a height of about 100 to 300 pixels. Again, testing on different devices and resolutions is important to ensure a good user experience.

In summary, optimizing banner image quality can be achieved by:

Using high-resolution images.
Choosing appropriate image formats (JPEG for photographs, PNG for images with transparency).
Applying image compression techniques to reduce file size without significant loss of quality.

If you’re still experiencing poor image quality after optimizing your banners according to the dimensions and image quality suggestions, there might be technical issues that need to be addressed through coding or design adjustments.

I hope the information may helps you.

1 Like
4

I made a banner of 910*443 pixels in terms of width and height it sets properly on desktop now. But still I am having image quality issues can you help me with this if it can be fixed technically with implementation of codes or anything that would work.