Тег img выглядит предельно просто — src и всё, картинка на месте. Но именно вокруг этого простого тега строится немало практик, от которых зависит и доступность сайта, и скорость его загрузки.
Атрибут alt задаёт текстовое описание изображения — оно показывается, если картинка не загрузилась, и озвучивается скринридером незрячему пользователю. Хороший alt описывает суть изображения кратко и по делу, а не повторяет очевидное вроде слова "картинка" в начале описания.
Если изображение чисто декоративное — например, фоновый узор без смысловой нагрузки — правильнее оставить alt пустым, но не убирать атрибут вовсе. Пустой alt говорит скринридеру пропустить элемент, а вот отсутствие атрибута иногда заставляет его зачитывать имя файла, что только сбивает с толку.
Атрибуты width и height у img давно стоит указывать даже при резиновой вёрстке — так браузер заранее резервирует место под картинку и страница не "прыгает" во время загрузки, когда изображения подгружаются постепенно. Это напрямую влияет на ощущение стабильности страницы у пользователя.
Про современные форматы изображений, ленивую загрузку через атрибут loading и адаптивные картинки с srcset хорошо рассказано в разделе про тег img на MDN.
Для галерей и карточек товаров, где картинок на странице действительно много, атрибут loading со значением lazy сам по себе способен заметно ускорить загрузку — браузер начинает подгружать изображение только тогда, когда оно приближается к видимой области экрана, а не всё разом при открытии страницы.
Первую крупную картинку на экране — например, баннер в самом верху страницы — лучше, наоборот, не делать ленивой, а загружать сразу, потому что именно она формирует первое впечатление от скорости сайта. Ленивая загрузка полезна для контента ниже, до которого пользователь ещё долистает.
