html:

 <span>
        <img src="C:\Users\giann\Downloads\194-1948906_free-security-icons-open-lock-icon-png-clipart.jpg" alt="lock logo">
    </span>

I downloaded the image from google and it does have a transparent background (grey and white boxes). But in my page the whole image is being displayed instead of displaying the image without theb background as it should.

I tried this with several images and still that problem occurred. I also tried converting the image to png but it did not work

CodePudding user response：

There are some images that put a background of white and gray squares to give the effect as if they had no background. It has happened to me, maybe this is it. try to search for your image in google, go to tools, open the color section and select "Transparent background"

CodePudding user response：

Regular JPG images are not transparent. In your case, I might recommend converting it into a transparent webp file. However, I think it was more of an icon in which case an SVG could be much smaller in size than a webp file and still be transparent.

"Raster file formats that support transparency include GIF, PNG, BMP, TIFF, TGA and JPEG 2000, through either a transparent color or an alpha channel." https://en.wikipedia.org/wiki/Transparency_(graphic)

If you open the image in a new tab, click in the URL and press the End key to see whether it's a JPG, PNG, or something else.

There are many conversion services online that allow you to make the background of your image transparent. https://www.adobe.com/express/feature/image/convert/jpg-to-png/transparent-png

Other software that can make backgrounds transparent are PowerPoint, GIMP, Inkscape, etc. Inkscape can convert to webp or SVG as well. https://inkscape.org/

Some methods of converting or saving JPG as PNG doesn't automatically make the backgrounds transparent. It's relatively straightforward in Inkscape, but this thread might help too: https://inkscape.org/forums/questions/transparent-background-marked-with-checkerboard/