Image Optimization in Astro with Cloudinary

Рет қаралды 3,808

Colby Fayock

Күн бұрын

Пікірлер: 20

@colbyfayock 4 ай бұрын

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

@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 2 жыл бұрын

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

@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 Жыл бұрын

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 Жыл бұрын

@@colbyfayock thank you!

@strangequark723 2 жыл бұрын

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

@colbyfayock 2 жыл бұрын

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 2 жыл бұрын

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

@AlbertoChamorro 2 жыл бұрын

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 2 жыл бұрын

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

@mariansam_was_taken 2 жыл бұрын

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

@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)