Band image takes long time to show

Topic summary

A Shopify store owner is experiencing slow banner image loading, where visitors initially see a placeholder or unoptimized version before the full image appears.

Primary causes identified:

  • Large file size requiring compression
  • Improper image format (PNG vs. JPEG/WebP)
  • Lazy loading settings affecting above-the-fold content

Recommended solutions:

  • Compress images using tools like TinyPNG or ImageOptim
  • Convert to WebP or JPEG format for better compression
  • Change loading="lazy" to loading="eager" for banner images that appear immediately on page load
  • Upload images at proper dimensions matching actual display size
  • Ensure images are uploaded directly to Shopify to leverage their CDN optimization

Status: The issue remains unresolved with the original poster not yet confirming whether suggested fixes were implemented.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Does anyone know how to make a banner image show fast. Mine takes forever to show the image. the first image is what people first see, then after a while they see the image like in the second image below.

Hi @Ecomowner

Here’s a response you can use for the Shopify Community:

It looks like your banner image is taking too long to load, which is likely due to a large file size or improper image optimization. Here are some ways to improve the loading speed:

  1. Compress Your Image: Use an online tool like TinyPNG or ImageOptim to reduce the file size without losing quality.

  2. Use the Correct Format: JPEG and WebP formats are usually better for banners than PNG, as they offer better compression while maintaining quality.

  3. Lazy Loading Optimization: Shopify themes typically use lazy loading for images, which can sometimes cause delays. If your image is above the fold (visible when the page loads), you may want to ensure it’s set to load immediately rather than lazily. You can check this in your theme’s code by modifying the loading=“lazy” attribute to loading=“eager”.

  4. Enable Shopify’s Image CDN: Shopify automatically optimizes and serves images through its CDN. Ensure your images are uploaded directly to Shopify, so they are served in the most optimized way.

  5. Use Proper Image Dimensions: Upload an image that matches the actual display size on your site. Oversized images take longer to load.

Try these steps and let me know if you need further assistance! :blush:
Thank you

The reason maybe caused by a large file size, slow hosting, or lazy loading settings
First, try compressing the image using tools like TinyPNG or Shopify’s built-in image optimizer to reduce its size without losing quality
Next, check your theme settings to see if “Lazy Loading” is enabled for the banner. If so, try disabling it for this specific section. Also, ensure your image is in a fast-loading format like WebP instead of PNG or JPEG