nuxt / nuxt/image

Lighter webp is a lot slower than png

Open
#1,647 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

I've tried to use webp format to make loading big images faster, but it seems that webp is a lot slower than the same file in png when accessed from the _ipx path (or if accessed with NuxtImg):

http://localhost:3000/ipx//fractal.png produces a ~60ms wait:
Image

http://localhost:3000/ipx//fractal.webp produces a ~400ms wait:
Image

format="webp" also doesn't do better... http://localhost:3000/_ipx/f_webp/fractal.png produces a ~400ms wait:
Image

It is even cached, and most of the time it's just connecting.

If i request a raw file from http://localhost:3000/fractal.webp it gives the cached file in no time:
Image

Dev or production mode, nightly or stable, firefox or chrome doesn't matter, it's still a lot slower.

Repo to reproduce (it's really just a few files in the public directory): https://github.com/LasterAlex/nuxt_bad_webp

Am i doing something stupid? Is this expected? A lot of sources encourage the use of webp for optimization, so it's kind of confusing to see that the nuxt-image path is both slower than the raw public file AND slower than the less compressed file format.

Thank you for your time in advance.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked nuxt_bad_webp reproduction repository and its public image files. Compare the _ipx and NuxtImg requests for PNG, WebP, and format="webp" in development and production modes, then determine whether the delay is expected or identify the image-processing path responsible; done means the behavior is explained or corrected.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.