Image component not supporting webp and gif doesnt render animations

[kiran_22_12]

I have a client who doesn't use core components within their project and has a Image Component where I want to upload a jpeg, jpg, png, gif and webp image formats. Jpeg, jpg, png work fine but gif does not render animations and webp shows a broken link. The image component uses simple getters and setters rather than the core component. for src alone the below logic is used.

Note: filereference as the src generates proper gif but we need a src={baseresourcepath}.{img}.{extension}

How to make gif and webp work here.

@arunpatidar  @PrinceShivhare 

[EstebanBustamante · Accepted solution]

Prior to answering your question, I think you should step back and consider other options, here are some options:
1. Start using the image core component (although most likely the hardest one due to business people I guess?)
2. Update your image component to inherit (proxy) from the image core component (may be a sensitive change but you may want to pursue this or option #1 for the long term)

3. Update the component the way you are trying to do it and to answer your question: the only thing you need to know is which format the "src" will need to be built to be leveraged by the frontEnd, which seems you already know: 

src={baseresourcepath}.{img}.{extension}

That being said, due to your method is returning a String, you can manually check when a GIF(another format) image is used and manually return the expected format in the getter.

4. Return directly the GIF's file source without any transformation format, due GIF and WEBP are formats already optimized for web it won't necessarily take advantage of the transformations process, so I think you will be safe as well. In other words, return simply "/content/dam/mygif.gif". (Please double check this is ok with your performance )

[DiegoOl1]

Hey Esteban

Im facing a similar issue with gif/webp images, Im using the direct path to the file "/content/dam/path-to-file/example.gif" and im getting a 404 response from the request 

It there any additional configuration that i need to do into assets to let the service serve this kind of images?

Thanks in advance!!!