Изображения
Учим английские слова (в контексте HTML)
image - (имэйдж) - изображение
source - (сорс) - источник
width - (вэйдс) - ширина
height - (хайт) - высота
HTML изображения
Для добавления на страницу изображения используется тег <img>. Тег <img> не имеет закрывающего тега.
Пример:Source
src - обязательный атрибут, указывает путь к изображению
Пример:Альтернативный текст
alt - атрибут содержит текстовое описание изображения,
которое не является обязательным , но является чрезвычайно полезным.
Если изображение не будет загружено по какой-либо причине
например, из-за сетевых ошибок, блокировки контента или ссылки, то будет показан альтернативный текст.
А ещё поисковые системы желают видеть описания изображения,
так что рекомендую всегда указывать этот атрибут и будет вам счастье в жизни!
Размер изображения
Вы можете менять размеры изображения с помощью атрибутов width и height.
Значения задаются в пиеселях px, либо в процентах %.
- Размер в процентах вычисляется относительно родительского элемента и исходный размер изображения никак на это не влияет. Так например если тег <body> по ширине 1000px, то изображение с width="100%" будет тоже 1000px по ширине, соответсвено изображение с width="50%" будет 500px, так как родительский элемент равен 1000px.
- Если вы указываете только один атрибут, например только ширину,
то высота будет изменена пропорционально.
Например изображение в исходном виде имеет размеры: ширина 1000px, высота 800px. Разместим изображение на страницу и укажем ему атрибут width="500", в этот момент браузер автоматически назначит высоте размер 400px для соблюдения пропорции.
Где хранить изображения сайта
Для хранения изображений, в директории public_html обычно создают поддиректорию img.
Дополнительные материалы
Рекомендации по работе с Google КартинкамиИндексирование картинок Яндекс