html

Проблема масштабування зображень у Outlook

Last updated: 09.04.2026
Views: 121

HTML верстка електронних листів – це досить складний і не завжди приємний процес. Це головним чином пов’язано з тим, що багато поштових клієнтів не підтримують сучасні веб-стандарти. Крім того, існує величезна кількість різних поштових клієнтів та сервісів.

Коли я верстав HTML листи для електронної пошти, я зіткнувся з тим, що в настільному Outlook (виявляється, ним хтось ще користується) картинки відображалися в дивному масштабі. Всі картинки були збільшені. Я вирішив цю проблему наступним чином. Я додав спеціальний код Outlook до розділу head і додав деякі атрибути до тегу html. Після додавання коду зображення в настільному Outlook почали відображатися нормально.

HTML

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
   
  <!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

Outlook (особливо версії для настільних ПК, як-от Outlook 2016, 2019 і Office 365) масштабує зображення завдяки налаштуванням DPI (точок на дюйм). Багато версій Outlook використовують Word як механізм візуалізації, який обробляє зображення інакше, ніж браузери. Якщо ваше зображення виглядає розмитим або зміненого розміру, це, ймовірно, пов’язано з автоматичним масштабуванням DPI Outlook (125% або 150% на дисплеях із високою роздільною здатністю).

Microsoft Outlook — це широко використовуваний поштовий клієнт і програма для керування особистою інформацією, розроблена Microsoft. Він є частиною пакету Microsoft 365 і доступний як для настільних комп’ютерів, так і для веб-платформ.

author
Автор: Ігор Рибалко
Працюю фронтенд розробником з 2014 року. Основний стек технологій - Vue.js і WordPress

Схожі записи:

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *