How to solve image loading issue on website

[delmergroup1987]

How to solve image loading issue on website ?

On our website image not loading properly  and it is affected our website loading speed slow and website is affected.

[TheScriptFlow_]

Try to use loading eager instead of lazy. The issue will automatically fixed.

[websensepro]

Hi @delmergroup1987 

Your product images are not showing because they may be missing, broken or your theme is not loading them correctly. First, check in Shopify admin if the images are uploaded under each product. If they’re there, the issue is likely in the theme code or due to a customization error.

It could also be caused by lazy loading not working properly, a third-party app interfering, or image URLs being blocked by the browser or network. Try checking the site in incognito mode or on a different device to rule out cache or CDN issues.

To fix it, re-upload one image to test, switch to the default theme (like Dawn) to see if it works.

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[MandasaTech]

Hi @delmergroup1987 

It sounds like you're facing two interconnected issues: image loading problems and overall slow website performance. Here are a few steps you can take to resolve this:

1. Optimize Image Sizes

Ensure your images are properly compressed before uploading. Use tools like:

• TinyPNG

• ImageOptim

Shopify recommends keeping image file sizes under 500 KB for optimal performance.

2. Use Correct File Formats

• Use JPEG for photographs

• Use PNG for images that need transparency

• Consider WebP for better compression and faster loading (Shopify supports WebP by default on modern browsers)

3. Check Theme Code or Apps

Sometimes, themes or third-party apps can cause lazy loading issues or failed requests. You can:

• Inspect the site in Chrome (Right-click > Inspect > Network tab) to identify any image errors.

• Disable recently added apps temporarily to see if the issue resolves.

4. Use Shopify's Built-in Image CDN

Shopify automatically serves images via a fast CDN. Make sure you're using the {{ image | img_url: '800x' | img_tag }} or {{ image | image_url: width: 800 }} Liquid filters for optimized delivery.

5. Run a Speed Test

Use tools like PageSpeed Insights or GTmetrix to analyze performance issues and get actionable tips.

Let us know if you have any issues. 

[Nicola3]

Hi @delmergroup1987

There are several factors in the store affecting image loading issues. To specify which factor is the cause code, it is better to share your store URL here for a further look, so that I can give you a better feedback accordingly. Thank you!