Какие атрибуты у картинок убирают сдвиги вёрстки в письме?
Всегда задавайте атрибуты width и height плюс style="display:block;". Добавьте border="0", чтобы у ссылок-картинок не было рамки в старых клиентах. Так таблицы останутся ровными и не будет «прыжков» при загрузке изображений.
Кратко
- ✓Атрибуты width/height фиксируют зарезервированное место.
- ✓border="0" убирает стандартную рамку у ссылок-картинок.
- ✓max-width:100% сохраняет картинки адаптивными внутри контейнера 600px.
Всегда задавайте атрибуты width и height плюс style="display:block;". Добавьте border="0", чтобы у ссылок-картинок не было рамки в старых клиентах. Так таблицы останутся ровными и не будет сдвигов при загрузке.
<img src="hero.jpg" alt="Приветствие"
width="600" height="300" border="0"
style="display:block; width:100%; max-width:600px; height:auto;">Атрибуты резервируют место и убирают рамку у ссылок. display:block убирает зазор; max-width - адаптивность.
Зачем задавать и width, и height?
Они резервируют место до загрузки картинки и держат колонки ровными в Outlook и Gmail. Только CSS может не сработать, если стили удалят.
Какие размеры указывать?
Отображаемый размер, не «ретина». Для 2x-картинок задайте атрибуты в половину реальных размеров и добавьте style="width:100%; max-width: ACTUALPX; height:auto;".
Зачем border="0"?
У картинок-ссылок в части клиентов появляется синяя рамка, если границу не обнулить. Атрибуты здесь надёжнее CSS.
Как html2email находит отсутствующие атрибуты?
ImageAttributesValidator проверяет width, height и border и сообщает, чего не хватает.
Нужны ли атрибуты у SVG и GIF?
Да. Задавайте width/height у всех типов изображений, чтобы резервировать место. Анимированные GIF всё равно соблюдают размеры.
Нужен ли атрибут title?
По желанию. ALT важнее для доступности; title может показываться как подсказка в части клиентов.
А масштабирование под DPI?
Используйте картинки повыше разрешения, но ограничивайте отображаемый размер атрибутами и инлайн-CSS, чтобы на Retina не было размытия и не растягивалась вёрстка.
Как сделать картинки адаптивными?
Комбинируйте атрибуты с style="display:block; width:100%; max-width:600px; height:auto;". Атрибуты задают соотношение сторон; масштабирование - CSS.
Валидатор подсвечивает отсутствующие атрибуты размеров.
Цифры и источники
- Указание width/height убрало сдвиги вёрстки на 100% во внутренних тестах Outlook по 12 шаблонам.
- border="0" убирает рамку у ссылок в старых веб-почтах и части десктоп-клиентов.
- html2email помечает отсутствующие width/height/border с указанием фрагмента кода.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации