Images don't load on mobile

Hello RW community,

I am building a RW/Stacks website and my testers report that on mobile devices on several pages the images do not load, or only extremely slowly. These same pages and images all load without a hitch on desktop.

Does anybody know why these issue occur on mobile devices and how I should fix that?

These issues occur on the home page: www.zozobanana.com

But even more so, for instance, on this page: https://www.zozobanana.com/page-3/page-4/

The code to get into the website is: 302618

Thank you for your help!

Jim

Images are too large
Might want to get ImageOptim

Thanks Joe. What is ImageOptim and where do I get that?

What is the cutting point size wise? Any idea?

I would say around 1 meg per image…
http://www.ibize.com/ImageOptim.zip
Please register your copy.

Thank you!

Hi Joe or any other expert,

On this page… http://127.0.0.1:62026/page-3/page-4/

…I have replaced all the images with much ‘lighter’ ones. They are now all way below 1 MB.

However, on mobile they still do not load for some reason. Any thoughts?

Kind regards,

Jim

PS: the code to get into the website is 302618

The URL you gave is a local host one. (127.) from preview.

That is not a web url!

I beg your pardon! This is the correct one: https://www.zozobanana.com/page-3/page-4/

Code 302618

Yep, sorry: This is the correct one: https://www.zozobanana.com/page-3/page-4/

Code 302618

Your page weighs between 6Mb and 6.5Mb and takes almost 10 seconds to load on my desktop using fairly nippy broadband connection.

See:

Mobile users on their mobile data plans could struggle. 6Mb is a lot for a single page.The Apple main site is only 1.8Mb. I recommend that you do more to reduce the weight of the page/images.

Also, ‘Powerful’ only has one ‘l’.
Also, your videos page is 14Mb.
Also, on the small print page the background and text colour choices make the text virtually unreadable.
Also, your headers are screaming out for a better font and colour IMHO.

Looks like you have 200px of padding both left and right side on some of the image stacks?

With most mobile devices are less than 400px wide there is no room for the image.

1 Like

Come to that, I wonder how a Stacks API endif block ended up in the CSS like that:

Thank you so much!

1 Like

I honestly have no idea and would not even know where to find that and remove it!