ты не с правильной стороны заходишь. Смотри есть изображения контентные, т.е. значимые, и есть оформительские.
без контентных сайт будет выглядеть не так норм как хотелось бы но будет работать, значит они не должны заствлять юзера ждать себя, а вот контентные изображения важны для понимания поэтому они должны грузиться в основном потоке.
не усложняя себе работу можно вспомнить что имиджи в штмл браузер грузит и рендерит сразу, еще до обработки стилей, а бэкграунды уже после...
вот исходя из смысла картинки и надо думать в фон ее и или в тег img.
а по вопросу что с img делать что бы он вел себя как фон:
абсолютом его выносишь на задний план и растягиваешь на весь блок, дальше смотри свойства object-size, object-position.

Стоит по книгам вёрстку изучать?

Ого, спасибо

Книгу за пару дней прочитаешь, спека глобально не поменяется за эти дни. Главное чтобы в книге не было про вёрстку таблицами и флотами, хотя и они могут пригодится для верстки емаил рассылок и для поддержки ие9

https://www.youtube.com/channel/UCaTfYudJUVA8cV_But8KZVQ
и загугли еще штмл шорты (это старенький но интересный проект, там очень коротенькие но емкие видосики, хотя некоторые устарели)
ну и без веб стандартов никуда (я имею ввиду подкаст)

почитай что я написал. пока читаешь не поменяется, она УЖЕ поменялась пока ее издавали.

На сайте MDN есть туториалы что-то типа Learn Web Development. HTML, CSS, JS основы. Думаю это один из лучших источников (английская версия)

Я скопировал html из письма, потом создал файл и вставил туда код, но при попытке открыть в браузере выдает это, почему так происходит?

согласен, и они обновляются опреативно, а mdn к тому же почти весь перевели

Поставил meta-теги?

<meta charset="UTF-8">

Надо смотреть конкретную книгу. Если она 2019-2020 скорее всего норм