astro-imagetools
astro-imagetools copied to clipboard
RafidMuhymin
Weird blur/shadows on images
I am getting some weird shadowy blurry things on my images and I am not sure why. Any ideas?
This is my usage:
<Img
alt="A desktop and mobile app mockup being worked on by a tentacle."
attributes={{
img: {
class:"h-auto max-w-xl mt-8 mx-auto w-full lg:ml-0 lg:mt-0"
}
}}
format="webp"
loading="lazy"
src="/img/hero-images/app-development.png"
/>
@rwwagner90 Is the image transparent?
@RafidMuhymin it's a png and has some transparency, yeah. Is there not png support?
By default, astro-imagetools creates a blurred version of the original image (with a much smaller file size) and sets it as a background, with the idea that when the actual image loads in, it will cover up the blurred background. If there is transparency in the image, then the placeholder will show through.
As a workaround, you can set placholder="none" to avoid the blurred background.
According to Erika, astro-eleventy-img uses an onload to remove the background, perhaps that's something we could explore here too.
@IanVS thanks for the tip, I am okay with no placeholders for my use case, I think. Will see how that goes. Definitely agree we should remove those background images. This is a pretty common case I think.
Hey, quick fix example for the <Img /> component.
<Img {...props} attributes={{ img: { onload: "this.style.background = 'transparent';" } }} />
Of course it only works if the client has JS so I added this at the bottom of my <body>
<noscript><style is:inline>.astro-imagetools-img{background:none;}</style></noscript>
