21 replies

1. Konnor Rogers 17 min later

   @zachleat are you gasping, or is that sound of pieces of you dying inside?

   1. Zach Leatherman 30 min later

      @konnorrogers yes

2. Nicolas Hoizey 45 min later

   @zachleat there should be an additional category on https://images.tooling.report/

3. Phil Wolstenholme 49 min later

   @zachleat Would you mind sharing any examples? No problem if you don't want to support Vercel/Next free of charge, or don't have time, but I use Next at work and would be open to making a PR with improvements for my team/product's sake (and my own satisfaction with our performance)

   1. Zach Leatherman 2 hr later

      @philw_ just working on some Eleventy Image comparisons, will probably highlight some of these at 11ty Conf. The biggest ones are: 1. the DX of requiring a static import for the image or you’ll need to specify a width/height. 2. The valid image widths are hardcoded as global configuration and not specific to the width you specify for the image (if I want my image to render 129px, it returns a 256px image on 1.0 DPR screen) 3. The classic complaint about unnecessary content-negotiation.

      1. Erika 3 hr later

         @zachleat @philw_ I never understood the global configuration for widths, some people asked for it in Astro (I made Astro's Image component) and when I asked them typically they couldn't quite answer why 🤷‍♀️

         1. Zach Leatherman 4 hr later

            @erika @philw_ because Next does it that way! 😭

      2. Nicolas Hoizey 4 hr later

         @zachleat I want to hear more about “The classic complaint about unnecessary content-negotiation”… but I can wait for 11ty Conf! 😅

         @philw_

4. Eric Portis 3 hr later

   @zachleat it is very bad! I dislike it! Very much!!!

   1. Zach Leatherman 4 hr later

      @eeeps …say more 😅

      1. Eric Portis 6 hr later

         @zachleat Here's an (official?) demo I was looking at a few weeks ago: https://nextjsconf-pics.vercel.app

         The hardcoded list of srcset breakpoints kills me. You're taking an image, asking Cloudinary to resize it to w_720, and then downsizing it to 256w, 384w, and 640w (fine) but then serving it, as-is (at least they don't upscale!), under different URLs, as the 750w, 828w, 1080w, 1200w, 1920w, 2048w, and 3840w versions. Lots of useless load events, cache entries/misses, & WILD .naturalWidths result.

         1. Eric Portis 6 hr later

            @zachleat https://nextjs.org/docs/pages/api-reference/components/image#devicesizes lets you override that list, but wow, bad name! Misleading documentation! Bad framing!

            I'm glad they give you a per-component way to specify `sizes` (via `imageSizes`), and they try to explain it in the docs, but I wish they did more to help here (especially in lazy contexts), because this is the hardest problem in respimg.

            I'm not sure why they are always setting decoding=async but whatever can't hurt lol.

            1. Zach Leatherman 19 hr later

               @eeeps that demo mixing cloudinary and next image middleware is… something! Looks like the images only render ~485 max width too

               1. Eric Portis 19 hr later

                  @zachleat Right. And! Speak of the devil! This just came across my desk.

                  1. Eric Portis 19 hr later

                     @zachleat Some of this is obviously user error, and yet.

                  2. Zach Leatherman 19 hr later

                     @eeeps I… please tell me that isn’t just serving the same file for all of those 😬

                     1. Eric Portis 19 hr later

                        @zachleat 😬

                        1. Zach Leatherman 19 hr later

                           @eeeps 😅😅😅😅😅😅😅

                     2. Nicolas Hoizey 19 hr later

                        @zachleat @eeeps 🤢

                        1. Eric Portis 3 days later

                           @nhoizey @zachleat FULL DISCLOSURE FOLLOW UP: this ended up being my fault, not Next.JS's

                           (rouge regex replace during analysis)

                           (I still don't like it, but this particular level of awful: all me 😬)

                           1. Nicolas Hoizey 3 days later

                              @eeeps ok, that’s a bit reassuring at least! 👍

                              @zachleat