Как в HTML уменьшить картинку и сделать ее адаптивной
Занимаясь самостоятельной разработкой дизайна, отнеситесь серьезно к используемым изображениям. Не стоит принимать фотографии за исключительно развлекательный контент или сопутствующие декорации. Они действительно украшают ресурс, но также усиливают эффект от статьи и привлекают читателей. Если вы не знали, это отличный способ раскрутить сайт и повысить конверсию. Поэтому сейчас мы научимся правильно выбирать изображения и вставлять их в разметку. А также разберемся как в html уменьшать картинки, обрабатывать их и добавлять эффекты.
Знакомство с тегом img
В языке гипертекстовой разметке есть специальный тег, который сообщает браузеру о том, что он сейчас получит изображение. Это тег img. У него есть два обязательных атрибута:
- src - для указания источника;
- alt - для описания.
В качестве источника можно указывать URL-путь к картинке или ее веб-адрес. А также вы можете вставлять фотографии, которые находятся на локальном компьютере. В таком случае указывается полный или относительный путь. Например, изображение находится в папке img в каталоге working_directory на диске D. А документ с разметкой index.html в папке site в том же каталоге working_directory.
Полный будет выглядеть так:
<img src="D:/working_directory/img/file_name.jpg alt="прелесная фотография Атласских гор">Относительный указываться в зависимости от местоположения документа, который ссылается на файл с изображением:
<img src="../img/file_name.jpg alt="три милых котенка">
<!-- Символ ".." означает выйти из дирректории с шагом назад-->Как уменьшить размер картинки в html
У каждого изображения есть размер. Обычно он измеряется в пикселях. Если вы возьмете файл с высотой 1200 пикселей, шириной 3000, вставите его в разметку и откроете в браузере, то в лучшем случае увидите половину фотографии. А если это сделать на планшете в 500px, то видна будет только одна пятая часть. Все потому что браузер загружает полный размер файла. Но с этой задачей легко справиться, если знать как. В HTML уменьшить картину поможет всего одно слово - width:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" >
</body>
</html>
Width — это необязательный, но полезный атрибут. Через width вы указываете браузеру какой шириной должна быть отображена фотография. По умолчанию единицей измерения является пиксель. Поэтому нет необходимости полностью записывать width="250px" для того, чтобы уменьшить картинку. В HTML, как и в графических программах для указания размеров, используются проценты, а также rem или em. С помощью атрибута height задается высота. Если он отсутствует в описании, браузер ставит значение: height="auto", что очень удобно.
Адаптация картинок
Смысл адаптации в том, чтобы сайт хорошо смотрелся на всех устройствах. Начиная с трехдюймового экрана BlackBerry, заканчивая широкоформатными мониторами. Но это не означает, что размер фото нужно высчитывать с линейкой под каждый девайс. Тогда как в HTML уменьшить картинку, чтобы она отлично смотрелась и на мобильных и на ноутбуках с компьютерами?
На помощь снова придет атрибут width, только теперь значение вы задаете ему исключительно в процентах:
<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" width="100%">Браузер поймет эту запись как указание отобразить фото на всю ширину экрана. После этого вы указываете в метатеге следующую конструкцию:
<!--Волшебный мета-тег!!!!!--------------------------->
<meta name="viewport" content="width=device-width, initial-scale=1">
Тег viewport масштабирует страницы, включая изображения, под экраны на которых их просматривают. Теперь у нас получилось адаптивное фото на сайте, которое будет отлично смотреться на всех устройствах.
Блок-контейнер для изображений
Вам далеко не всегда нужны будут фото на весь экран, в большинстве случаев размер нужно будет подгонять под окружающие блоки с текстом или видео. Поэтому приучите себя заключать тег img в контейнер div:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="img-wrapper">
<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" width="100%">
</div>
</body>
</html>
Теперь, чтобы уменьшить картинку на сайте в html, как и увеличить ее, вам нужно только указать ширину в 100%. Размер изображения теперь полностью зависит от блока контейнера, которым вы будете управлять в CSS-документе. Например, добавить эффект увеличения фото при наведении курсора:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.img-wrapper{
display: block;
width: 80%;
max-height: 50vh;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
img{
transition: all .5s ease;
}
img:hover{
transform: scale(2);
opacity: .7;
}
</style>
</head>
<body>
<div class="img-wrapper">
<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" width="100%">
</div>
</body>
</html>
Картинка увеличивается в два раза, но не выходит за пределы блока-контейнера. Теперь вы полностью готовы к работе с изображениями. Главное - используйте их в меру. Картинки существенно влияют на скорость загрузки. Заменяйте их по возможности фоновыми градиентами или CSS-анимацией.