nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.34k stars 272 forks source link

Too many Requests on single image #910

Open professorhaseeb opened 1 year ago

professorhaseeb commented 1 year ago

I'm using IPX with firebase storage using "@nuxt/image": "^1.0.0-rc.1",

it's making multiple requests for a single image and exhausting bandwidth.

image

Previously using "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65", which was working fine.

professorhaseeb commented 1 year ago

this issue still exists on @nuxt/image@rc using IPX

dosstx commented 10 months ago

I noticed my images are downloading twice.

Arxi commented 1 month ago

The image is downloaded for me twice as well. The issue also seems to be intermittent - i.e. it happens most of the time, but not always. These are my npm packages:

@nuxt/content@2.13.2
@nuxt/image@1.8.0
@nuxtjs/tailwindcss@6.12.1
@tabler/icons-vue@3.16.0
nuxt-bus@0.9.3
nuxt-easy-lightbox@1.0.2
nuxt-gtag@3.0.1
nuxt@3.13.1
vue-router@4.4.4
vue@3.5.4

This is what I have in my nuxt config:

  image: {
    provider: "ipx",  // the default
  },

I have this simple page in pages/test.vue (this is the whole page):

<template>
    <NuxtImg src="/images/1-front-matter.webp"
            sizes="500px"
            placeholder="/x-600.png"
    />
</template>

What I see in developer console in Network tab is this: Screenshot 2024-09-10 at 22 03 12

Two separate requests are sent. One image is 37kB, but 78.7kB of image data was transferred (that includes favicon and the placeholder image which is cancelled and then downloaded anyway).

If I remove the placeholder line:

<template>
    <NuxtImg src="/images/1-front-matter.webp"
            sizes="500px"
    />
</template>

the image is correctly loaded just once:

Screenshot 2024-09-10 at 22 06 20

If I use the placeholder like this:

<template>
    <NuxtImg src="/images/1-front-matter.webp"
            sizes="500px"
            :placeholder="[50, 50]"
    />
</template>

my image is again downloaded twice, with one cancellation: Screenshot 2024-09-10 at 22 09 19

This happens in nuxt dev, also when I use nuxt generate and preview the site, and also deployed in production.

I tried to replicate it in CodeSandbox, unfortunately I don't see any images loaded in the developer tools in Preview pane, so I'm not sure what's happening there.

Screenshot 2024-09-10 at 22 14 17

But when I open the official playground on StackBlitz, let it load and then reload just the Preview pane with the reload button, I see mountains_1.jpg being downloaded twice as well (the first one is the small placeholder):

Screenshot 2024-09-10 at 22 23 05

baijii commented 3 weeks ago

I have the same issue. Maybe this is helpful in solving it.

With placeholder and with sizes:

  1. Placeholder loaded
  2. Final image loaded
  3. Placeholder loaded again but canceled
  4. Final image loaded again
<NuxtImg
  src="/img/passenger_example.jpg"
  sizes="100vw md:450px"
  :placeholder="[450, 350, 15, 20]"
  format="webp"
  width="450"
  height="350"
/>
Screenshot 2024-10-02 at 14 31 28

With placeholder and without sizes:

  1. Placeholder loaded
  2. Some other placeholder (probably for the other size) is loaded
  3. Final image loaded

<NuxtImg src="/img/passenger_example.jpg" :placeholder="[450, 350, 15, 20]" format="webp" width="450" height="350" />

<img width="1617" alt="Screenshot 2024-10-02 at 14 33 38" src="https://github.com/user-attachments/assets/5875b83a-b063-459f-a740-0680abbb3898">

**Without placeholder and with sizes:**
1. Final image loaded
```html

<NuxtImg
  src="/img/passenger_example.jpg"
  sizes="100vw md:450px"
  format="webp"
  width="450"
  height="350"
/>
Screenshot 2024-10-02 at 14 34 04

Sadly, the root for that problem is the placeholder. For now, my workaround would be to not use placeholders.