Implement webp and png formats load both images

[Jarigu]

Hello, I have a problem with the implementation of the webp images in my project, the lazy load works fine, but it loads me both images.

Thanks

Angular: 8.2.14

<div class="item" *ngFor="let item of specialties | slice:0:10 ; let indexOfElement = index; ">
  <a (click)="buildDataLayerSpecialties(indexOfElement + 1, item.name)" [attr.href]="item.url">
    <picture>
      <source type="image/webp" [attr.defaultImage]="'assets/img/loading.gif'" [attr.lazyLoad]="item.baseImage+'webp/100x100/'+item.icon+'.webp'"/>
      <source type="image/webp" [attr.defaultImage]="'assets/img/loading.gif'" [attr.lazyLoad]="item.baseImage+'100x100/'+item.icon+'.png'" />
      <img [defaultImage]="'assets/img/loading.gif'" [lazyLoad]="item.baseImage+'100x100/'+item.icon+'.png'" alt="{{item.name}}">
    </picture>
  </a>
  <a (click)="buildDataLayerSpecialties(indexOfElement + 1, item.name)" [attr.href]="item.url">{{item.name}}</a>
</div>

[tjoskar]

Hi,

When you say: "but it loads me both images." what two images do you mean? The two source or source and default image or one of the source and the img-tag?

I see that you have two source-tags with the same type. what is the purpose? Isn't this the same as:

 <picture>
   <source type="image/webp" [attr.defaultImage]="'assets/img/loading.gif'" [attr.lazyLoad]="item.baseImage+'webp/100x100/'+item.icon+'.webp'"/>
-  <source type="image/webp" [attr.defaultImage]="'assets/img/loading.gif'" [attr.lazyLoad]="item.baseImage+'100x100/'+item.icon+'.png'" />
   <img [defaultImage]="'assets/img/loading.gif'" [lazyLoad]="item.baseImage+'100x100/'+item.icon+'.png'" alt="{{item.name}}">
 </picture>

[Jarigu]

Thanks for your answer, I really appreciate your help

Excuse me, I don't know what happend with it, but the correct form is with type='image/webp' and type='image/png'.

I'm trying to make an implementation of images with "webp" type format, but making sure that it is supported for all browsers.

The code that I'm using is this:

<picture> <source type="image/webp" [attr.defaultImage]="'assets/img/loading.gif'" [attr.lazyLoad]="item.baseImage+'webp/100x100/'+item.icon+'.webp'"/> <source type="image/png" [attr.defaultImage]="'assets/img/loading.gif'" [attr.lazyLoad]="item.baseImage+'100x100/'+item.icon+'.png'" /> <img [defaultImage]="'assets/img/loading.gif'" [lazyLoad]="item.baseImage+'100x100/'+item.icon+'.png'" alt="{{item.name}}"> </picture>

And the problem is this: (The browser loads both images)

But with the code without lazy-load library the same doesn't happen

`

`

Result

[flodaniel]

I can confirm this with Angular 11 with SSR

[flodaniel]

Update: I had to have some issue in my code. After reviewing the docs again, this works as expected :)