Домой Интернет Как в HTML уменьшить картинку и сделать ее адаптивной

Как в 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-анимацией.