Главная /
Блог /
Как изменять размеры изображения в css на html

Как изменять размеры изображения в css на html

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

Если в коде css на html не задать размер изображения, то его высота и ширина на сайте будут такими же в пикселях, как у исходного файла. То есть вы можете изменить размер изображения без css и html, используя, только графический редактор и оно автоматически будет меняться на сайте, если не указывать его размер. Но есть случаи, когда необходимо программно изменять размер картинки в css на html.

Содержание статьи:

1. Изменение картинки в графическом редакторе

Изменять размер изображения вы можете в любом графическом редакторе(photoshop, gimp, xnview) и оно автоматически будет меняться на сайте в соответствии с оригинальными размерами.

Плюсы метода:

картинка грузится быстрее поскольку не нужно скачивать лишние данные(пиксели), которые будут потом сжаты программно.

Минусы:

графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.

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

2. Изменение картинки в коде css на сайте

Плюсы:

Быстрее и удобнее задать размер. Данный способ уменьшения изображения обычно применяется для удобства. Например, когда у одной картинки может быть много различных размеров — часто удобнее менять значения у одной и той же программно, чем закачивать все варианты форматов одного изображения, отредактированные в графическом редакторе.
Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите, чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить хорошее качество при уменьшении.
При этом разница в скорости загрузки сайта чувствоваться не будет т. к. небольшие изображения занимают очень мало места и при увеличении их размера на 30% вы не заметите изменений. Но разницу в качестве заметите.

Минусы:

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

Как изменить размер картинки в html с помощью css

Чтобы изменить размера изображения в html средствами css используются свойства width (ширина) и height (высота) внутри атрибута style. Вы можете написать только width или height, и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки. Например, указав только ширину изображения с помощью width, его высота (height) изменится автоматически, сохранив пропорции. И наоборот, при указании только высоты (height), его ширина также автоматически поменяется, сохранив пропорции картинки.

Пример кода без указания размеров изображения

Результат в браузере

Код страницы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<img src="my_img/dogs.jpg" >
</body>
</html>

Пример кода с изменением размеров изображения в .css

Результат в браузере

Код страницы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<img src="my_img/1.jpg"
style="width:150px; " >
</body>
</html>

В обоих примерах, показанных выше использована одна и та же картинка с размером 300x184px (ширина и высота). В 1 примере картинка отобразилась в браузере без изменений с оригинальным размером 300x184px т. к. в css не указывались ширина и высота. А во 2 примере картинка отобразилась в браузере уменьшенная в 2 раза т. к. была указана ширина 150px, высота соответственно автоматически изменилась до 92 px. Как вы видите, свойство height, можно не указывать вообще т. к. оно автоматически изменяется пропорционально width.

Если вы укажете оба параметра: width(ширина), height(высота) и они не будут соответствовать пропорциям, то картинка будет иметь именно такой размер, но в сжатом или растянутом виде, в зависимости от значений.

Почему нежелательно увеличивать картинки

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

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

Нужна доработка сайта?

Команда Hardkod профессионально доработает ваш сайт: добавим новый функционал, улучшим существующие процессы, подключим платежные системы и CRM. Мы технически поддержим ваше развитие, превращая пожелания в рабочие инструменты для увеличения продаж. Вы фокусируетесь на стратегии — мы на её техническом воплощении. Звоните 8 (800) 350-81-86 или оставляйте заявку на сайте.

Автор статьи

Александр Одинцов

Технический специалист Hardkod

Обновлено: 22 ноября 2024

Время на чтение: 5 минут

Количество просмотров: 114

Кейсы

Seo-продвижение сайта поставщика медицинского оборудования

Продвижение сайта типографии «Флай-Арт» по Москве и области

Продвижение интернет-магазина товаров для рыбалки

Остались вопросы? Оставьте заявку

Закажите услугу прямо сейчас и получите консультацию специалиста бесплатно

Оставить заявку

Многолетнее развитие сайта дистрибьютора Tyco Electronics в Яндексе

Производство и продажа спецодежды «Энергия»

Остались вопросы? Оставьте заявку

Закажите услугу прямо сейчас и получите консультацию специалиста бесплатно

Оставить заявку

Содержание статьи:

1. Изменение картинки в графическом редакторе

Плюсы метода:

картинка грузится быстрее поскольку не нужно скачивать лишние данные(пиксели), которые будут потом сжаты программно.

Минусы:

графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.

2. Изменение картинки в коде css на сайте

Плюсы:

Быстрее и удобнее задать размер. Данный способ уменьшения изображения обычно применяется для удобства. Например, когда у одной картинки может быть много различных размеров — часто удобнее менять значения у одной и той же программно, чем закачивать все варианты форматов одного изображения, отредактированные в графическом редакторе.
Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите, чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить хорошее качество при уменьшении.
При этом разница в скорости загрузки сайта чувствоваться не будет т. к. небольшие изображения занимают очень мало места и при увеличении их размера на 30% вы не заметите изменений. Но разницу в качестве заметите.

Минусы:

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

Как изменить размер картинки в html с помощью css

Пример кода без указания размеров изображения

Результат в браузере

Код страницы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<img src="my_img/dogs.jpg" >
</body>
</html>

Пример кода с изменением размеров изображения в .css

Результат в браузере

Код страницы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<img src="my_img/1.jpg"
style="width:150px; " >
</body>
</html>

Почему нежелательно увеличивать картинки

Нужна доработка сайта?

1. Изменение картинки в графическом редакторе

Плюсы метода:

картинка грузится быстрее поскольку не нужно скачивать лишние данные(пиксели), которые будут потом сжаты программно.

Минусы:

графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.

2. Изменение картинки в коде css на сайте

Плюсы:

Быстрее и удобнее задать размер. Данный способ уменьшения изображения обычно применяется для удобства. Например, когда у одной картинки может быть много различных размеров — часто удобнее менять значения у одной и той же программно, чем закачивать все варианты форматов одного изображения, отредактированные в графическом редакторе.
Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите, чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить хорошее качество при уменьшении.
При этом разница в скорости загрузки сайта чувствоваться не будет т. к. небольшие изображения занимают очень мало места и при увеличении их размера на 30% вы не заметите изменений. Но разницу в качестве заметите.

Минусы:

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

Как изменить размер картинки в html с помощью css

Пример кода без указания размеров изображения

Результат в браузере

Код страницы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<img src="my_img/dogs.jpg" >
</body>
</html>

Пример кода с изменением размеров изображения в .css

Результат в браузере

Код страницы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<img src="my_img/1.jpg"
style="width:150px; " >
</body>
</html>

Почему нежелательно увеличивать картинки

Нужна доработка сайта?

Остались вопросы? Оставьте заявку

Закажите услугу прямо сейчас и получите консультацию специалиста бесплатно

Оставить заявку

Кейсы

Как изменять размеры изображения в css на html

1. Изменение картинки в графическом редакторе

2. Изменение картинки в коде css на сайте

Как изменить размер картинки в html с помощью css

Пример кода без указания размеров изображения

Пример кода с изменением размеров изображения в .css

Почему нежелательно увеличивать картинки

Многолетнее развитие сайта дистрибьютора Tyco Electronics в Яндексе

Производство и продажа спецодежды «Энергия»

Остались вопросы? Оставьте заявку

1. Изменение картинки в графическом редакторе

2. Изменение картинки в коде css на сайте

Как изменить размер картинки в html с помощью css

Пример кода без указания размеров изображения

Пример кода с изменением размеров изображения в .css

Почему нежелательно увеличивать картинки

Читайте также

1. Изменение картинки в графическом редакторе

2. Изменение картинки в коде css на сайте

Как изменить размер картинки в html с помощью css

Пример кода без указания размеров изображения

Пример кода с изменением размеров изображения в .css

Почему нежелательно увеличивать картинки

Остались вопросы? Оставьте заявку

Продвижение интернет-магазина товаров для рыбалки

Продвижение сайта типографии «Флай-Арт» по Москве и области

Технические правки для сайта косметологической клиники

Читайте также