Занимаясь самостоятельной разработкой дизайна, отнеситесь серьезно к используемым изображениям. Не стоит принимать фотографии за исключительно развлекательный контент или сопутствующие декорации. Они действительно украшают ресурс, но также усиливают эффект от статьи и привлекают читателей. Если вы не знали, это отличный способ раскрутить сайт и повысить конверсию. Поэтому сейчас мы научимся правильно выбирать изображения и вставлять их в разметку. А также разберемся как в html уменьшать картинки, обрабатывать их и добавлять эффекты.
Вам будет интересно:Как узнать дату создания сайта на своем компьютере
Знакомство с тегом img
В языке гипертекстовой разметке есть специальный тег, который сообщает браузеру о том, что он сейчас получит изображение. Это тег img. У него есть два обязательных атрибута:
- src - для указания источника;
- alt - для описания.
В качестве источника можно указывать URL-путь к картинке или ее веб-адрес. А также вы можете вставлять фотографии, которые находятся на локальном компьютере. В таком случае указывается полный или относительный путь. Например, изображение находится в папке img в каталоге working_directory на диске D. А документ с разметкой index.html в папке site в том же каталоге working_directory.
Полный будет выглядеть так:
Относительный указываться в зависимости от местоположения документа, который ссылается на файл с изображением:
Как уменьшить размер картинки в html
У каждого изображения есть размер. Обычно он измеряется в пикселях. Если вы возьмете файл с высотой 1200 пикселей, шириной 3000, вставите его в разметку и откроете в браузере, то в лучшем случае увидите половину фотографии. А если это сделать на планшете в 500px, то видна будет только одна пятая часть. Все потому что браузер загружает полный размер файла. Но с этой задачей легко справиться, если знать как. В HTML уменьшить картину поможет всего одно слово - width:
Width — это необязательный, но полезный атрибут. Через width вы указываете браузеру какой шириной должна быть отображена фотография. По умолчанию единицей измерения является пиксель. Поэтому нет необходимости полностью записывать width="250px" для того, чтобы уменьшить картинку. В HTML, как и в графических программах для указания размеров, используются проценты, а также rem или em. С помощью атрибута height задается высота. Если он отсутствует в описании, браузер ставит значение: height="auto", что очень удобно.
Адаптация картинок
Смысл адаптации в том, чтобы сайт хорошо смотрелся на всех устройствах. Начиная с трехдюймового экрана BlackBerry, заканчивая широкоформатными мониторами. Но это не означает, что размер фото нужно высчитывать с линейкой под каждый девайс. Тогда как в HTML уменьшить картинку, чтобы она отлично смотрелась и на мобильных и на ноутбуках с компьютерами?
На помощь снова придет атрибут width, только теперь значение вы задаете ему исключительно в процентах:
Браузер поймет эту запись как указание отобразить фото на всю ширину экрана. После этого вы указываете в метатеге следующую конструкцию:
Тег viewport масштабирует страницы, включая изображения, под экраны на которых их просматривают. Теперь у нас получилось адаптивное фото на сайте, которое будет отлично смотреться на всех устройствах.
Блок-контейнер для изображений
Вам далеко не всегда нужны будут фото на весь экран, в большинстве случаев размер нужно будет подгонять под окружающие блоки с текстом или видео. Поэтому приучите себя заключать тег img в контейнер div:
Теперь, чтобы уменьшить картинку на сайте в html, как и увеличить ее, вам нужно только указать ширину в 100%. Размер изображения теперь полностью зависит от блока контейнера, которым вы будете управлять в CSS-документе. Например, добавить эффект увеличения фото при наведении курсора:
Картинка увеличивается в два раза, но не выходит за пределы блока-контейнера. Теперь вы полностью готовы к работе с изображениями. Главное - используйте их в меру. Картинки существенно влияют на скорость загрузки. Заменяйте их по возможности фоновыми градиентами или CSS-анимацией.