при вставке изображения на сайт с прозрачным фоном (png) вместе с изображением появляется белый фон вокруг него? как убрать его

В зависимости как было сохранено это изображение, этот "шахматный" фон можно убрать при помощи Photoshop. Вот линк на видео с примерами как можно удалить этот задний фон: https://www.youtube.com/watch?v=-FIYgibZazY Автор данного видео показывает 2 способа как можно удалить "шахматный" фон у картинки. Все зависит от того как изображение было создано и в зависимости от этого применяется один из способ удаления "шахматного " фона у картинки.

перепроверьте ещё раз следующие пункты

1. Формат должен быть строго .png, а не .jpg, .webp, .jpeg и т.д.
2. Проверить, что у картинки реально прозрачный фон. Даже если в редакторе фон выглядит как «шахматная сетка» — это может быть просто картинка, а не настоящая прозрачность
3. Убедись, что на сайте не добавляется белый фон через css. Например, не должно быть background: white; для div-а в котором картинка

вот пример, где я беру картинку типа .png с прозрачным фоном, и использую её на голубом фоне

body {
  margin: 0;
  background-color: #87CEEB;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.cloud {
  width: 300px;
  height: auto;
}

<img src="https://i.sstatic.net/4hlqdQGL.png" alt="Облако" class="cloud">

теперь возьмём изображение, которое с "шахматным фоном", формата .jpg, или такое же в формате .png, то есть "обманчивый" прозрачный фон и к примеру не верного формата...

1. заходим на сайт https://www.photopea.com/
2. Нажмите File → Open и выберите ваше изображение

3. Выберите инструмент "Волшебная палочка"

4. Кликните по шахматному фону shft+click

5. удалите, нажав delete на клавиатуре, фон удалится и станет "шахматно-прозрачным"
6. экспортируйте файл в формате .png

Теперь у вас прозрачная png-картинка — вставляйте на сайт, и будет видно только само изображение без белого прямоугольника✅