(NEW!) Optimize Image Features in Astro 3.0

[@nikitaliakhovka3489]

hey Chris, thanks for sharing that custom responsive image component idea! I think you should also include same img attributes (width, height, loading, etc...) new Astro Image adds, for the best loading experience

[@CodinginPublic]

Hey! Great idea! That would definitely be an improvement! And Astro gives you those in the function, so it’d be really easy to add. I admittedly had to put together the function quickly; so there’s a lot more you can do with it. Great idea!!

[@josucode5048]

​@@CodinginPublic How would you do that ? I tried by importing the Image component inside the ImageResponsive.astro and replacing the img tag by the Image component but it didn't work. Thanks for your amazing content! 🙂

[@demystifyingdev]

Very conscientious videos being published here almost on a daily basis... really looking forward to seeing more about the course! One thing: I really like how you thoughtfully provide the code with these videos, not everyone does: it just underlines the seriousness of what you're doing. Thanks for the effort you are making, very helpful results!

[@CodinginPublic]

So glad you've found them helpful! I just try to do what I'd like, so glad to know it connects with others. Everyone learns differently; there are so many great teachers on YT and elsewhere, so glad my style connects with you. Thanks for saying something!

[@KOBE42__]

Just found your channel, loving the Astro content and your teaching abilities. I have subscribed 👌

[@CodinginPublic]

Thanks, my friend. I'm glad you've found the channel helpful!

[@KOBE42__]

@@CodinginPublicI’m coming from learning raw html/css/js so Astro is the perfect framework for me right now.

[@ycemilk]

keep on goin' Chris! thanks for showing us an excellent content again

[@CodinginPublic]

Glad it was a help! Thanks for saying something!

[@lopo889]

What a good timing to start learning astro

[@CodinginPublic]

Never been better!

[@bipradeepsaha8731]

Hi, Chris, thanks for such an informative video. Is there a way to pass the optimized image to a tailwind class in a static build?

[@CodinginPublic]

Glad it was a help. Not sure I understand your question? Mind trying again?

[@josucode5048]

Hey Chris, thank you for your component code but there's a problem. In your video we can see at 17:10 that you are at 320px width and the image that you get is the 700px one. With sizes={[400, 700, 900]} the 400px image only gets fired when when the viewport width is below 265px. It would be awesome if you could find the bug and fixed it, I'm pretty much a newbie in JS. Thanks 🙂

[@matthijsbremmers8638]

This probably has to do with the Device Pixel Ratio (DPR) that is set in DevTools. Phones and other smaller devices with high resolution screens use multiple screens pixels for a single CSS pixel, because text/images would be too small otherwise. Imagine having a font-size of 16px on an iphone screen of 2340 x 1080 pixels. It would be tiny. So these devices use 2 or more screen pixels for every CSS pixel. The standard DPR in Chrome DevTools is 2, but could also be set higher. So if you debug with mobile/tablet view in the DevTools, when you see 320px it is actually 640px (or more). You can change the DPR in the DevTools.

[@CodinginPublic]

Hey! So all you’re doing is suggesting to the browser which one to use. But it actually decides. I _think_ that's what’s going on here? I don’t currently have a chance to investigate, but I remember this article being very helpful! Hope that helps some! developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#why_responsive_images

[@MirkoVukusic]

Browser decides which is the best image variant to serve and one of (often forgotten) parameters it considers is DPI of the screen (DPR of 1x, 2x 3x...). In the video, my guess is that screen is DPR 2x so browser chose double sized image. Also, video (and a comment above) is a bit misleading here. You don't suggest browser what to serve with 'srcset' IMG attribute, you only give it options to choose from. What you can use to help it to decide is a media query in 'sizes' attribute (which is unfortunately overwritten with array of sizes in the component from this video). If you omit this media query in 'sizes', browser will assume image is full screen width (not optimal in most cases).

[@krupnitsky]

How to add more than one image? For each image to do import? For example, like this: import localImage from "../assets/logo.png"; import localImage2 from "../assets/logo2.png"; import localImage3 from "../assets/logo3.png"; import localImage4 from "../assets/logo4.png"; Or how?

[@CodinginPublic]

Yep! That’s how I’d do it. There’s other ways, but that would work

[@JeromeAbelDev]

Great video. Thanks Chris. Your code is useful. Is it possible to use it inside mardown files and do you know why Picture component is missing now ?

[@CodinginPublic]

8:35 :) And I heard the Picture component introduces some complexity. They're working on it, though!

[@JeromeAbelDev]

@@CodinginPublic Thanks for your feedback! I'd like to know how to use your custom Responsive Image Component in md. Also, do you know how to add a blurry image as a placeholder? Would it be possible in Astro ?

[@couragic]

Thanks for the video! Right on time. One question on the responsive image component:if I use it on two different pages will it generate two different optimized instances of the image or second usage will reuse the result of the first one ?

[@CodinginPublic]

Glad you found it helpful! I’m almost sure it will generate one instance of each image if you pass it the same parameters? But I could be wrong? You can test it by building and seeing the dist output?

[@couragic]

Ok. I`ll check it.

[@couragic]

Yes, you`re absolutely right. I checked it. Astro reuses previous generated images. Thanks.

[@CodinginPublic]

🙌@@couragic

[@MackRichardson]

Is it necessary to install the "astro:assets" component? Even though the component works, VS Code keeps throwing this error: "Cannot find module 'astro:assets' or its corresponding type declarations." when I use it.

[@CodinginPublic]

I’d restart the dev server. That should fix it. :)

[@Sebo-Highlights]

Amazing video chris

[@CodinginPublic]

Glad you enjoyed it

[@codescandy]

Hi, thank you for your tutorial. How we can add in the json files? I m beginner in AstroJs. Thank you

[@CodinginPublic]

Hey! Not sure I understand. What do you want to use the JSON files for? I just did a video on data loading that may help?

[@codescandy]

Actually my problem is the working with image. When i add image in the JSON file, its take public path. (Working Good) But i want to optimize the image from src root. If i m adding image in the src>asstes>images then JSON file can't load the image. The result i want to add image via json from the src>asstes>images. Thank you for your reply. Your tutorial really will help me. Thank you again.​@@CodinginPublic

[@CodinginPublic]

Ah, okay. You have to actually IMPORT the image you want in the file where you’re using it. If you’re using content collections, they let you load images using a helper function in your config.ts. I mention that in this video when setting up the content collection.@@codescandy

[@codescandy]

Sure, i think this "ResponsiveImage.astro" @@CodinginPublic

[@GeorgeDonnelly]

This is super helpful, thank you.

[@CodinginPublic]

Glad it was helpful!

[@NeverCodeAlone]

Thx a lot. Super video.

[@CodinginPublic]

You’re welcome! Just did a big update video on my channel for Astro images!

[@electrpaleo]

How can I use optimized images inside Frameworks in Astro? like react for example? or I am stuck with unuptimized images? can I pass the array of images and make a component inside react?

[@CodinginPublic]

I hadn’t done it yet. So not sure it’s possible? I’d guess using the getImage function?

[@riklaunim]

If you don't care about MS Edge (5-6%) then you can use Avif and WebP if you want that compatibility. Sad part is there is no official MS news if/when they will turn AVIF on (Chrome supports it already and MS didn't enable this feature).

[@CodinginPublic]

Yes, I think that's why they use webp by default.

[@mtpk0]

How do we reference a remote image inside the frontmatter of a markdown file? Anything other than a public path crashes the dev server for some reason.

[@CodinginPublic]

You should be able to just put the full url in there. Just make sure you define a height and a width if you plan on using the Astro Image or Picture component.

[@mtpk0]

@@CodinginPublic we had to update the config.ts schema to url: z.string().url().optional(), instead of image: image().optional(), and change the post.data accordingly, i,e post.data.url as opposed to post.data.image in the html logic.

[@mamasiddiqove]

Good time of day. So it means, Astro convert images internally?

[@CodinginPublic]

Yes, images in your src folder are included in your final build! :)

[@mamasiddiqove]

@@CodinginPublic it's cool thanks ))

[@louisv9447]

Is it possible to link an image from css l Background-image: linear-gradient(red, black), URL(images/astro.png)

[@CodinginPublic]

You should be able to do that using the getImage function! I show it towards the end of the video, I believe.

[@louisv9447]

@@CodinginPublic thanks that was really helpful

[@hiryuimajin]

LFG! 🎉

[@MirkoVukusic]

@CodinginPublic your ResponsiveImage component overwrites 'sizes' attribute of the standard IMG, and a vital one for responsive images. It is used as a media query to help browser choose a correct image size. Without it, browser just calculates that image is going to be 100vw (full screen width) which is often wrong. So your component will often serve too large images. Basically all images smaller that full width of the screen will be serving too large variants. Just touching on responsive images without explaining (or doing) sizes attribute properly is really misleading to beginners. I really think you should add a comment to this video to clarify it.

[@CodinginPublic]

Thanks for the comment! It seems I don't quite understand how the srcset works then because I've used code very similar to what I posted for a couple of years. Let me go do some learning and I'll post my findings. Any suggested resources?

[@MirkoVukusic]

​@@CodinginPublic, it's actually quite simple 'srcset' gives options to browser, and 'sizes' helps browser choose the best option. To test, just make a gallery with small thunmbnails and a large main image, and inspect your browser network tab for images loaded. I suggest for start to NOT use hidpi screen tso you have one less confusing factor in the formula

[@brandondeweese7123]

Without the ability to set focal points or aspect ratios, it’s kind of just “meh” upgrade. The way Astro handles assets is really the only thing I find lacking with it.

[@Jorgejhms]

You could pass any css property or html attribute that img tag accept, so you can pass aspect ratios and focal points with css.

[@CodinginPublic]

Yep! it’s just moved to an img tag in the end, which takes care of a lot of these edge cases.

[@CodinginPublic]

It’s early and the team has been careful to build things out only when they feel they can do it well, so I think a lot of these things will be enhanced over the next little bit here. Because it converts things to an img tag in the end, you can pass it any props a normal img tag can accept.

[@brandondeweese7123]

I get it. Right now I’m just using sanity to host images and setting all of this in the url string. I’m a huge Astro fan for sure tho.