Add proper image processing (resizing/optimisation) into Astro build process

[andygrunwald]

Most of the pictures are either not optimized or simple way too big.

It would make sense to add an additional step into the build process to optimize the pictures.

Resources:

• 💡 RFC: Astro Image Assets withastro/astro#492
• https://codetea.com/image-optimization-tools-for-the-astro-js-framework/
• https://www.reddit.com/r/webdev/comments/7wd351/workflow_with_resizing_images_on_static_site/

[andygrunwald]

Astro itself launched an Image component. See https://github.com/withastro/astro/tree/main/packages/integrations/image
Still experimental.

We will wait until Astro is either 1.0.0 stable or this component have been moved out of the experimental status.

Until then: This ticket is on-hold

[dkotik]

I ran into this. The experience is not fun. *.mdx integration handles the optimized assets correctly without any kind of special component. But, you cannot glob *.mdx the same way - the .file property is empty, breaking all my *.md globs.

I tried the experimental component and it did not work. If this already works for *.mdx, why not port the changes to regular Markdown?

[EraYaN]

And it also does not support something for scss or sass so we can use image-set for background and stuff. That would also be very useful.

[Oudwins]

It would be ideal to have support for this resizing/optimization to also happen for images imported into react/vue/etc components at least as long as the component itself is static.

[andygrunwald]

FYI:

@astrojs/image 📷
⚠️ This integration will be deprecated in Astro v3.0 (Fall 2023) in favor of the astro:assets module. Please see the Assets documentation for more information.

We will wait until Astro v3 is out and then directly use the new asset module.

[andygrunwald]

See https://astro.build/blog/astro-3/#image-optimization-stable

[andygrunwald]

See

• Use Astro Image Processing for the Meetup-Section #640
• Use Astro Image Processing for the Engineering Kiosk Logo #641
• Use Astro Image Processing for the GermanTechPodcasts #642

[andygrunwald]

Primarily done.
A few other sections will be handled in their own tickets.