Как правильно изменить размер изображения в HTML с помощью CSS
На конкретном примере разобрали, как управлять размером картинки в CSS, и рассказали об основных параметрах изображения для email-рассылки. А ещё ответили, нужно ли CRM- и email-маркетологам знать CSS.
Для тех, кто в первый раз
CSS — это язык, который отвечает за описание внешнего вида HTML-документа. Если HTML используется для разметки и структурирования контента на странице, то CSS позволяет отформовать документ и сделать его более цепляющим для читателя.
Нужно ли CRM- или email-маркетологу знать CSS
Сразу отвечаем.
Обязательно — нет.
Желательно — да.
Знать вёрстку — обязанность верстальщиков. Но если маркетолог тоже подкован в этой области — большой плюс. Такому специалисту будет проще работать с задачами: давать правки исполнителям, оценивать результат или банально корректировать в макете мелочи, которые требуется исправить «здесь и сейчас». Зная основы вёрстки, CRM- или email-маркетолог сможет быстро исправить цвет элемента, скорректировать размер или любую другую мелочь.
А ещё при приёме на работу маркетолог с подобными навыками будет выделяться на фоне остальных кандидатов. Да и зарплату можно будет побольше попросить — мы вам этого не говорили 🤫
Каким должен быть размер изображения в письме рассылки
Как и в случае со знанием вёрстки СРМ- и имейл‑маркетологами, точного ответа с конкретными цифрами нет.
Иллюстрации в имейле могут быть любого размера. Но у них есть другие ограничения, которые необходимо соблюдать для корректного отображения иллюстраций в рассылке.
Чтобы пользователь увидел всю красоту вашего письма, а не поехавшую или поплывшую фотографию, она должна быть весом до 0,5 мегабайт. Для гифки актуален вес до 1 мегабайта.
Подогнать вес под ограничения и увеличить скорость загрузки иллюстраций можно с помощью минификации кода. А как это сделать, мы подробно рассказали в этой статье.
Совет
Retina-дисплеи обладают повышенной плотностью пикселей. Поэтому, если открыть на ретине неадаптированное под него изображение, оно будет замыленным. Чтобы избежать такой неприятности в рассылке, сохраните файл в двух версиях: с обычной и повышенной плотностью. В Фигме для этого надо экспортировать изображение в разрешении x2.
И совет для тех, кто любит нагружать письмо десятками рисунков — не надо так. Если добавить в рассылку слишком много картинок, то имейл улетит в спам.
Как изменить размер с помощью кода
Переходим к главному.
Один из простых способов увеличить или сжать изображение в CSS на HTML — через атрибуты <img>. Для этого необходимо задать значения высоты или ширины в пикселях. Чтобы изменить размер иллюстрации, но сохранить её пропорции необходимо задать только высоту (height) или только ширину (width). Если вы укажете одно значение, второе появится автоматически, исходя из исходных пропорций картинки.
![](https://letteros.com/wp-content/uploads/mf48b_letteros.png)
![](https://letteros.com/wp-content/uploads/image-36.png)
Если вы самостоятельно установите и ширину, и величину, картинка может быть искажена.
![](https://letteros.com/wp-content/uploads/mf48b_letteros-2.png)
![](https://letteros.com/wp-content/uploads/image-37.png)
Как изменить размер изображения в Letteros
В редакторе есть два способа настроить разрешение картинки.
Через код
В нём можно также задать высоту или ширину картинки, чтобы получить изображение в исходных пропорциях.
![](https://letteros.com/wp-content/uploads/2023-09-08-18.38.53.jpg)
Через загрузку изображения
Просто введите нужные значения, и редактор настроит картинку под заданные требования.
![](https://letteros.com/wp-content/uploads/image-39.png)
Если вы хотите, чтобы в ваших рассылках или на сайте картинки отображались корректно и в идеальном качестве, не забывайте правильно настраивать их размер с помощью CSS или любыми другими методами.