Воскресенье21 октября
Интернет

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

23 сентября 2018

Занимаясь самостоятельной разработкой дизайна, отнеситесь серьезно к используемым изображениям. Не стоит принимать фотографии за исключительно развлекательный контент или сопутствующие декорации. Они действительно украшают ресурс, но также усиливают эффект от статьи и привлекают читателей. Если вы не знали, это отличный способ раскрутить сайт и повысить конверсию. Поэтому сейчас мы научимся правильно выбирать изображения и вставлять их в разметку. А также разберемся как в 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", что очень удобно.

как уменьшить картинку на сайте html

Видео по теме

Адаптация картинок

Смысл адаптации в том, чтобы сайт хорошо смотрелся на всех устройствах. Начиная с трехдюймового экрана BlackBerry, заканчивая широкоформатными мониторами. Но это не означает, что размер фото нужно высчитывать с линейкой под каждый девайс. Тогда как в HTML уменьшить картинку, чтобы она отлично смотрелась и на мобильных и на ноутбуках с компьютерами?

На помощь снова придет атрибут width, только теперь значение вы задаете ему исключительно в процентах:

<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" width="100%">

Браузер поймет эту запись как указание отобразить фото на всю ширину экрана. После этого вы указываете в метатеге следующую конструкцию:

<!--Волшебный мета-тег!!!!!--------------------------->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	

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

как в html уменьшить картинку

Блок-контейнер для изображений

Вам далеко не всегда нужны будут фото на весь экран, в большинстве случаев размер нужно будет подгонять под окружающие блоки с текстом или видео. Поэтому приучите себя заключать тег 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-анимацией.

Источник: fb.ru
Похожие материалы
Как узнать реквизиты банковской карты и сделать на нее перевод средств? Финансы
Как узнать реквизиты банковской карты и сделать на нее перевод средств?

Многие пользователи платежных карт прекрасно осведомлены о том, как с их помощью оплатить товар в магазине или снять наличные деньги. Однако это не все возможные операции, которые можно совершить с помощью этого кусоч...

Как в Компьютеры
Как в "Хроме" восстановить историю и посмотреть ее

Хранить на компьютере историю посещенных сайтов не всегда хочется. Поэтому время от времени люди занимаются ее очисткой. Но при определенных обстоятельствах возникает потребность в восстановлении хронологии посещенных...

Верстка веб-сайта: как в html сделать фон картинкой Компьютеры
Верстка веб-сайта: как в html сделать фон картинкой

Многие начинающие верстальщики, только вникающие в суть создания сайтов, часто задаются вопросом, как в html сделать фон картинкой. И если некоторые и могут разобраться с этой задачей, то все равно возникают проблемы ...

Картофельное пюре: технологическая карта и использование ее в приготовлении Еда и напитки
Картофельное пюре: технологическая карта и использование ее в приготовлении

В любой семье регулярно готовят блюда из картошки. И пюре из нее смело можно назвать любимейшим вариантом. Обычно хозяйки творчески подходят к процессу его готовки. А тем, кто хочет получить настоящее, по всем правила...

Сколько делается виза в Италию, какие для оформления необходимы документы и какова ее стоимость? Закон
Сколько делается виза в Италию, какие для оформления необходимы документы и какова ее стоимость?

Италия - страна с потрясающими древними достопримечательностями, красивейшими пляжами и отличными магазинами. Как же попасть в этот земной рай? Первым шагом будет решение визовых проблем, а если точнее - получение офи...

Привлекательные страницы, или О том, как в HTML сделать бегущую строку Компьютеры
Привлекательные страницы, или О том, как в HTML сделать бегущую строку

Выдержка баланса между привлечением внимания посетителей и анимацией страниц сайта имеет существенное значение. Современный пользователь интернета достаточно опытен и следует своим конкретным планам, которые укладываю...

Урок: как в HTML сделать ссылку? Компьютеры
Урок: как в HTML сделать ссылку?

Перед тем, как в HTML сделать ссылку, нужно разобраться, что это такое и какие их виды бывают. Любая ссылка начинается с тега и закрывается тегом . Пользователю отображается только то, что заключено между этим...

Как искать в Компьютеры
Как искать в "Гугле" по картинкам и по фотографии?

Давайте разберемся с тем, как искать в "Гугле" по картинкам, а также фотографиям, которые имеются у вас на компьютере. Данный вопрос заслуживает внимания хотя бы потому, что такой вариант поиска работает стабильно, од...

Как в «Фейсбук» добавлять музыку и можно ли это сделать? Компьютеры
Как в «Фейсбук» добавлять музыку и можно ли это сделать?

Владельцы аккаунтов в популярной социальной сети «Фейсбук» очень часто хотят поделиться с друзьями каким-то музыкальным треком. Однако, как показывает практика, сделать это не так-то и просто, особенно есл...

Как в прикорм вводить мясо и когда это нужно делать? Дом и семья
Как в прикорм вводить мясо и когда это нужно делать?

Питание детей первого года жизни является очень важным. Именно сейчас желудочно-кишечный тракт настраивается на полноценную работу, а растущий организм требует все большего количества питательных веществ. В первые мес...