Image optimization in SvelteKit with vite-imagetools

Поделиться
HTML-код
  • Опубликовано: 26 окт 2024

Комментарии • 13

  • @liam_k
    @liam_k Год назад +3

    is there something to do about the typescript error when importing the image with a query

    • @hartenfellerdev
      @hartenfellerdev  Год назад

      I would like to know too 😅️

    • @SilvestreVivo
      @SilvestreVivo Год назад +2

      @@hartenfellerdev You can add this alias to the tsconfig => "$images": ["./static/assets"], "$images/*": ["./static/assets/*"],, and then import the image like this import { Tablet } from '$images'; The error is gone.

  • @isaacdruin
    @isaacdruin Год назад +1

    Oh my god, this is amazing!

  • @oussamasethoum1665
    @oussamasethoum1665 Год назад

    Just what I was looking for, how does it work in production?

  • @skryonline5825
    @skryonline5825 Год назад

    How would you go about optimizing remote images that are set in src?

    • @hartenfellerdev
      @hartenfellerdev  Год назад

      There are separate services for image optimization on the go, like this: github.com/webp-sh/webp_server_go . I have not used them, and there are many alternatives.

  • @44galore
    @44galore Год назад

    Awesome video ... thnx for sharing this. So I guess this is a compile step, right ? Is it somehow possible to use vite-imagetool also for uploaded images? Images that a user of the app would upload and should be displayed somewhere in the app.

    • @hartenfellerdev
      @hartenfellerdev  Год назад +1

      Thanks! Yes, for prod the images are optimized during the build step. It does this on the fly in dev mode but I am uncertain if it can do it in prod mode. But there are separate services for image optimization on the go, like this: github.com/webp-sh/webp_server_go . I have not used them, and there are many alternatives.

  • @poiterme1986
    @poiterme1986 Год назад

    Hi, great explantation video.
    i have one problem with my configuration... vite-imagetools works great for me.., at least in dev-mode.
    as soon, as i try to bundle it with the adapter static, i get 404 errors, like the following:
    Error: 404 /_app/immutable/assets/Gewässerkarte.1af63ad5.webp (linked from /gewaesser)
    have you already noticed this, or do you have a solution for it, I'm despairing….
    thank u

    • @hartenfellerdev
      @hartenfellerdev  Год назад

      Hmm, maybe check if it works if you put the file into the lib folder like I have: github.com/phartenfeller/sveltekit-1.0-sqlite-demo-app/tree/main/src/lib/assets/img

    • @poiterme1986
      @poiterme1986 Год назад

      Found it. German umlaut in filename, I usually don’t use such things.. but that what it was.
      Thx 🙏 anyway

    • @hartenfellerdev
      @hartenfellerdev  Год назад +1

      Great! That this causes an error is kind of "unverständlich" and "unverschämt" :)