Sign In Sign Up
Phil

Improving lighthouse score for "Serve images in next-gen formats"

Does anyone have much experience in this: https://web.dev/uses-webp-images/

Should I store images in both normal formal (e.g. png/jpg and also store a copy converted to webp) and then display webp (or png for older browsers)?

Should I store multiple sizes too? Any recommendations on how to do this in a js/react app? i.e. any packages I can put images through to achieve this?

0 Likes 2 Comments
Sergio Mattei

Hey Philip! Meant to reply this the other day but took some time off.

I'm also struggling with that metric per se, I'm not sure how Lighthouse wants us to tackle it. Especially for highly dynamic, user-generated content, where converting every image is not feasible.

If you stumble upon any info, do share: I'm also looking for ways to solve this.

In terms of image sizes, imagekit.io provides a very generous image resizing package for free. It's what we use over here to make sure all images are optimized and load fast.

0 Likes
Phil Author

sure, will soon dig more into this and find a solution!

0 Likes
Wojciech Kocjan

NextJS and Gatsby have nice solutions for it:

  • https://nextjs.org/docs/api-reference/next/image
  • https://www.gatsbyjs.com/plugins/gatsby-image

As an alternative, you may use CDN like https://www.imgix.com and it will do the job for you, but not for free ;)

0 Likes
Phil Author

@woj Had an issue with that, locally it worked fine but as soon as I deployed to production the images could not be loaded (status code 400). Ever encounter that?

0 Likes
Wojciech Kocjan

@strange_quirks Which solution you ended using?

0 Likes
Phil Author

@woj Opps forgot to mention. Using next/images

So i do this:

And locally it works, but on production it fails to get the images (status 400):

GET https://launchafrica.io/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&w=1920&q=75 400

0 Likes
Wojciech Kocjan

@strange_quirks Looks like adding Firebase domain to the next.config.js may help.

See this documentation section: https://nextjs.org/docs/basic-features/image-optimization#domains

0 Likes

Please sign in to leave a comment.