How to remove default styles from image?

[zhandosweb]

Hello, sir! First of all, thank you a lot for your plugin. The default Astro Image plugin didn't work for me, because my components load images using dynamic path, which Astro Image doesn't support by default (need to create Collections I guess). And your plugin works like a charm for me!

But I'm facing an issue with the default styles. Currently I'm using your plugin to show webp images. And my images looks like this:

<Img
          src={heroInfo[0].thumnbail}
          alt={heroInfo[0].alt_text}
          format='webp'
          attributes={{ img: { class: 'text-center md:max-w-xl md:h-full mx-auto lg:order-2' } }},
          loading = 'eager'
        />

I'm using Tailwind CSS class names to style my image. But at the output the plugin also adds his own styles, that shows blurred shadow, that is not necessary for my design: astro-imagetools-img astro-imagetools-img-FDC9B609 text-center md:max-w-xl md:h-full mx-auto lg:order-2

Please, sir, can you tell me, how I can disable/remove default styles from plugin? Also there is internal styling code like style="display: inline-block; overflow: hidden; vertical-align: middle; ; max-width: 100%; height: auto;", I guess it's also not necessary.

P.s. Sorry for my bad English, I'm not a native speaker. Thank you a lot again for your plugin!

[zhandosweb]

Also, I found, that there is an internal <style></style> generated for each image before <picture> tag in the html code. How to remove it?

[marvincaspar]

Hi,
I'm facing the same issue.

Addition to that, the data attribute for astro-cid is missing. In my case I have astro component with some styling classes. If I just the html picture element, the styling is working fine. Now I want to optimise the picture element so support responsive images. I used this Picture component and added my css class but the style is not applied to the element because astro scopes all elements with a data attribute, e.g. data-astro-cid-kq4hxfp5.

[pbowyer]

@marvincaspar I have the same use-case for the Picture element and the same problems - no way to disable the built-in CSS or get the data- attribute added.

[brandondeweese]

Gotta be able to remove these default styles.

[Good-Shepherd-Collective]

@marvincaspar I have the same use-case for the Picture element and the same problems - no way to disable the built-in CSS or get the data- attribute added.

Have you found any solution for this? I am trying to optimize remote images, but I haven't found a good solution yet.