# Image in the nav bar loading slowly

**URL:** <https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926>\
**Category:** Ask us anything\
**Created:** [August 2, 2022, 9:23am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926 "2022-08-02T09:23:57Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![TrendiMike](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@TrendiMike](https://community.weweb.io/u/TrendiMike)\
**Post date:** [August 2, 2022, 9:23am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/1 "2022-08-02T09:23:57Z")

</div>

Hi Team,

I am currently finishing up on the first iteration of the site and one of the little things that I couldn’t find a way to get around is the slow loading of the company logo in the nav bar.

Upon inspecting the published site I noticed an attribute loading=“lazy”, but I am unsure how to tackle that, as adding a custom attribute loading=“eager” didn’t help at all.

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [August 2, 2022, 9:26am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/2 "2022-08-02T09:26:35Z")

</div>

Hi @TrendiMike,  
are you using your own hosted image or is it uploaded on Weweb CDN?  
What is the size of your image?

---

<div class="post-metadata">

**Author:** ![TrendiMike](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@TrendiMike](https://community.weweb.io/u/TrendiMike)\
**Post date:** [August 2, 2022, 9:29am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/3 "2022-08-02T09:29:10Z")

</div>

Hi @aurelie, the image has been uploaded to weweb. It’s an SVG and its size is around 6KB ( if you are looking for dimensions its 500 x 250 px in the original file, but gets shrunk down quite heavily on the screen)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [August 2, 2022, 9:31am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/4 "2022-08-02T09:31:07Z")

</div>

Can you send me the link to your website? (by private message if you want).  
I will take a look, and see if we just add the feature to mark the image as critical (we indeed forced the lazy behavior for now)

---

<div class="post-metadata">

**Author:** ![TrendiMike](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@TrendiMike](https://community.weweb.io/u/TrendiMike)\
**Post date:** [August 2, 2022, 9:33am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/5 "2022-08-02T09:33:10Z")

</div>

Done, sent in a message 🙂

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [August 2, 2022, 12:50pm UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/6 "2022-08-02T12:50:55Z")

</div>

Hi,  
I checked your project  
First you seem to use an old image component, which may exist on some of our old template.  
Can you drag and drop a new image and use it instead? To see if you are running the old version, they have additional settings

Old version

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c5482163a1e14e84661fad3afae1b7dcaddfbd30.png)

New version

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b127b6f5b58a781109449ba78d66d464492ebbfd.png)

The old version has known issues with pre-rendering.

In the meantime I also added an option to disable the lazy attributes on image, as it is also a good practise for top screen images. I will let you know when this is in production.

---

<div class="post-metadata">

**Author:** ![TrendiMike](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@TrendiMike](https://community.weweb.io/u/TrendiMike)\
**Post date:** [August 3, 2022, 9:40am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/7 "2022-08-03T09:40:08Z")

</div>

@aurelie the updated image template loads faster, however would be great when you guys release “eager” loading option for the company logos 🙂

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [August 5, 2022, 2:48pm UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/8 "2022-08-05T14:48:58Z")

</div>

Hi @TrendiMike, the eager option is now available on the Settings tab of image 🙂  
Enjoy  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7bd7c9498c7912c8386289757d489421221a6210.png)

---

<div class="post-metadata">

**Author:** ![TrendiMike](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@TrendiMike](https://community.weweb.io/u/TrendiMike)\
**Post date:** [August 8, 2022, 3:43pm UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/9 "2022-08-08T15:43:59Z")

</div>

@aurelie absolute legend, thanks!

---

<div class="post-metadata">

**Author:** ![foliodc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/foliodc/32/761_2.png) [@foliodc](https://community.weweb.io/u/foliodc)\
**Post date:** [August 10, 2022, 5:13pm UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/10 "2022-08-10T17:13:50Z")

</div>

This is really helpful! I’d like to suggest a couple adjustments:

I think it looks glitchy to lazy load once the image is already in view. Could we set the lazy load to occur 100px (or other increment) before the image scrolls in? I’m seeing the load delay in the editor, maybe this is already resolved in published sites.

Would be even nicer to have the option to fade-in on scroll. I had that set up with Webflow animations, works well if it is subtle. Could be pre-defined under image settings, or a “Scroll into View” option in the workflow editor (which would unlock a bunch of uses)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [August 16, 2022, 8:24am UTC](https://community.weweb.io/t/image-in-the-nav-bar-loading-slowly/926/11 "2022-08-16T08:24:49Z")

</div>

Hey @foliodc,  
for now we rely on the browser native functionality of lazy loading image, and this behavior is not customizable.  
I gave your suggestion to the product team, but this will required specific developement on our side if we want to implement it.
