NextImage component doesn't compress images

[HighProteinFlapjack]

Description

I used the NextImage component to display an image but saw no compression in the image size, while the native NextJs image component produced a dramatic decrease in image size and also returned images in webp format

Expected behavior

I would have expected NextImage to produce identical results to the native nextjs Image component e.g. image size / type as I understand it is a wrapper around this component that sets its src property .

Steps To Reproduce

<NextImage
      field={props.fields.sample2}
      height="105"
      width="200"          
    /> 

<Image src={props.fields.sample2.value?.src} height="105"
      width="200"/>

Your Environment

• Sitecore Version: 10.2
• JSS Version: 20.0.2
• Browser Name and version: Chrome / Edge
• Operating System and version (desktop or mobile): Windows 10 Enterprise

Screenshots

[illiakovalenko]

@HighProteinFlapjack Thank you for your ticket. As far as I can see you are using JSS 20.
We started to use NextImage internally starting from JSS 20.1, see related PR. Since JSS 20.1 there are also more changes added.
Can you try to test it using JSS 20.1 (or even the latest JSS 21.1)? Please, provide feedback on your results, if you have the same issue - we will investigate that

[achievecreative]

I think I have the same issue, I'm trying the following example on my local:

Your environments:

Sitecore Version: Sitecore XMCloud 1.4.254
JSS Version: 21.1.1
Browser Name and version: Chrome
https://github.com/Sitecore/XM-Cloud-Introduction

Hero component:

Output

[art-alexeyenko]

@achievecreative do you see a difference in size between two images too?

[achievecreative]

@art-alexeyenko Yes, webP format has smaller size than original one.

[illiakovalenko]

@HighProteinFlapjack @achievecreativeI I've added a ticket to our internal backlog, we will investigate this issue

[mg-aceik]

@HighProteinFlapjack per the docs you need to white-list the parameter sets on the server. Or you can temporarily disable Media.RequestProtection.

<setting name="Media.RequestProtection.Enabled">
  <patch:attribute name="value">false</patch:attribute>
</setting>

[stale]

This has been automatically marked as stale because it has not had recent activity. It will be closed if there is no further activity within 30 days. You may add comments or the 'keep' label to prevent it from closing. Thank you for your contributions.