Image Optimization in Astro with Cloudinary

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

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

  • @colbyfayock
    @colbyfayock  6 месяцев назад

    Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

  • @JamesQQuick
    @JamesQQuick 2 года назад

    Does loading="lazy" just work as is? I tried it in a vanilla js project and it didn't seem to work?

    • @colbyfayock
      @colbyfayock  2 года назад

      Weird it's supposed to. Do you have the code somewhere?

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

    Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

  • @mariansam_was_taken
    @mariansam_was_taken 2 года назад

    Cool video, looks like an ad, but a really good one!

    • @colbyfayock
      @colbyfayock  2 года назад

      thanks, but oh :( is there something particular that came off that way? i intentionally try not to appear that way and primarily deliver value (even though i work for Cloudinary, this is not a Cloudinary channel for instance)

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

    Thanks

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

    Hey Colby, great job on the video, it was very informative and I was able to get up and running quite fast. I was wondering if there is a types module for Cloudinary? I noticed in your video you are getting type errors (specifically for .delivery() and .resize() methods) and I am as well.

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

      hey, thanks! so i think the reason it was giving that error is because technically i was using the SDK in an unintended way, as i prefer the shorter syntax than the more verbose. but since then i learned about some shortcuts, specifically `.quality('auto')` instead of using the delivery method
      cloudinary.com/documentation/javascript_image_transformations#shortcuts_and_aliases
      as far as resize goes, unfortunately there's not a shortcut, so you'd either have to let the TS error go or adhere to the SDK, which you can find how to use it "properly" here: cloudinary.com/documentation/javascript_image_transformations#resizing_and_cropping

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

      @@colbyfayock thank you!

  • @strangequark723
    @strangequark723 2 года назад +1

    In this context, how could we include a named transformation (into the fetched URL, for specific images)?

    • @colbyfayock
      @colbyfayock  2 года назад +1

      so in this example, you'd likely want to create a prop on CldImage that controls that named transformation
      for instance:
      const { src, namedTransformation, ...props } = Astro.props;
      and then conditionally apply it to the image instance
      if ( namedTransformation ) {
      cldSrc.addTransformation(namedTransformation)
      }

    • @strangequark723
      @strangequark723 2 года назад

      @@colbyfayock Worked like a charm; thank you very much Colby!

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

    Fucking master. Just what i was looking for. Thanks a lot, man, nice explanation and straight to the points.
    Thanks a lot

  • @djmtype
    @djmtype 2 года назад +1

    Video idea: Astro with Wordpress structured content and Cloudinary

    • @colbyfayock
      @colbyfayock  2 года назад +1

      nice idea! I'll add it to my list

  • @AlbertoChamorro
    @AlbertoChamorro 2 года назад +1

    Really great video Colby! Thank you so much! One question: have you tried @astrojs/image integration? It could be a great second part about using images in Astro

    • @colbyfayock
      @colbyfayock  2 года назад +1

      no i haven't yet! when i made this i dont think it was quite ready yet. i was talking to the Astro team though about how we can give a good experience for Cloudinary