Почему одни шрифты выживают при сжатии, а другие превращаются в кашу
Опубликовано: 26.05.2026
Каждый, кто загружал картинки в интернет, сталкивался с эффектом: чёткий на экране текст после сохранения в JPEG с умеренным качеством покрывается артефактами, теряет контуры, а мелкие надписи и вовсе становятся нечитаемыми. Проблема особенно ощутима при оформлении карточек товаров, баннеров, превью для соцсетей — везде, где текст идёт непосредственно внутри растрового изображения, а не поверх него.
Алгоритмы сжатия с потерями работают предсказуемо: они объединяют соседние пиксели с близкими цветами, чтобы уменьшить объём файла. Тонкие линии, плавные переходы и небольшие детали первыми попадают под «укрупнение». Отсюда правило — чем массивнее знаки, тем больше шансов, что они переживут компрессию без критических потерь.
Жертвы сжатия: тонкие и светлые начертания
Шрифты с весом от Thin до Light выглядят элегантно в макете на десктопе, но в сжатом JPEG ведут себя непредсказуемо. У них малая толщина штрихов, и когда алгоритм начинает усреднять цвета, эти штрихи просто растворяются в фоне или сливаются с соседними элементами. Буквы «и», «ш», «м» с их вертикальными линиями страдают сильнее всего — тонкие засечки и ножки исчезают первыми.
Extra Light начертания в кириллице особенно уязвимы. Наш алфавит содержит много вертикальных элементов одинаковой толщины, расположенных близко друг к другу. При сжатии они сливаются в сплошные пятна. Латиница в этом смысле чуть устойчивее за счёт большей вариативности форм.
Курсивные варианты лёгких начертаний — отдельная история. Наклон добавляет антиалиасинг-размытие по краям, и компрессор воспринимает это как лишнюю градиентную информацию, которую можно «оптимизировать». Итог — буквы теряют форму, превращаясь в смазанные пятна.
Обычный вес: базовая устойчивость
Regular (400) — рабочая лошадка, которая при грамотном подходе переживает сжатие до качества 70–75% без критических потерь. Толщина штрихов достаточна, чтобы алгоритм не счёл их шумом. Но есть нюансы, зависящие от конкретного шрифта.
Гротески с геометрической конструкцией (Montserrat, Gilroy, Oscine) держатся лучше, чем гуманистические или диджитальные гарнитуры. У геометрических гротесков штрихи более равномерные по толщине, нет резких контрастов между тонкими и толстыми элементами. А там, где есть контраст (как у Didot или Playfair Display), компрессор усиливает этот контраст непропорционально — тонкие места становятся ещё тоньше вплоть до исчезновения.
Шрифты с замкнутыми контурами (о, а, в, б, ю, ф) при обычном начертании обычно сохраняют читаемость. Открытые формы (ж, ш, щ, м) чуть хуже, потому что просветы между штрихами могут заполниться артефактами. Критерии читаемого шрифта перечислены в этой инструкции.
Полужирные начертания: запас прочности
SemiBold (600) и Bold (700) — оптимальный выбор для текста внутри сжатых изображений. Толщина штрихов создаёт достаточную «массу», чтобы компрессор оставил знаки практически нетронутыми. Даже при агрессивном сжатии (60% и ниже) полужирный текст остаётся различимым, хотя вокруг букв могут появляться характерные «блики» JPEG-артефактов.
Для карточек товаров, где нужно уместить название, цену и пару характеристик в ограниченное пространство, SemiBold часто оказывается золотой серединой. Он читается хорошо, но не выглядит грубо и не съедает площадь, которую можно было бы отдать фотографии продукта.
ExtraBold и Black (800–900) — перебор для основного текста, но отлично работают для крупных заголовков и акцентных цифр (цена, скидка). При сжатии они могут даже выигрывать визуально, потому что артефакты сглаживают излишнюю массивность, делая буквы чуть мягче.
Контурные и декоративные начертания
шрифты, переведённые в кривые (только контур, без заливки) при сжатии страдают катастрофически. Тонкая линия контура — идеальная мишень для алгоритма. То же касается шрифтов с внутренней штриховкой, текстурной заливкой, тенями. Любая сложная детализация внутри букв превращается в шум после компрессии. Если и использовать такие шрифты в сжатых изображениях, то только для очень крупных заголовков с минимальным уровнем сжатия.
Размер имеет значение, но не тот, о котором думают
Мелкий текст (меньше 12–14 пикселей в итоговом изображении) теряет читаемость при любом начертании, если применяется сжатие с потерями. Полужирный 10-пиксельный текст после JPEG-компрессии будет выглядеть хуже, чем Regular 16-пиксельный. Массивность штрихов не компенсирует недостаток площади.
Практический ориентир: если текст должен быть читаемым после сжатия до 70–80% качества, его размер в итоговом изображении должен быть не меньше 16–18 пикселей по высоте строчной буквы. Для Regular лучше заложить 20+ пикселей.
Цвет и контраст как скрытый фактор
Начертание — не единственная переменная. Контраст между цветом текста и фоном напрямую влияет на то, как компрессор обработает границу. Высокий контраст (белый на чёрном, чёрный на белом) даёт чёткую границу, которую алгоритм стремится сохранить. Низкий контраст (серый на светло-сером, тёмно-синий на чёрном) создаёт размытую границу, и компрессор легко «съедает» её.
Цветной текст на цветном фоне — худший сценарий. Если буквы красные, а фон оранжевый, разница в каналах минимальна, и при сжатии красные буквы буквально растекаются по оранжевому полю. В таких случаях даже Bold не спасает. Приходится либо увеличивать размер, либо вводить контурную обводку, либо менять цветовую схему.
Формат сжатия меняет правила игры
Всё сказанное выше относится преимущественно к JPEG и WebP с потерями. PNG сжатие без потерь — текст в нём остаётся таким же, как в исходнике. Но файлы получаются тяжёлыми, и многие площадки их ограничивают или автоматически конвертируют в JPEG.
WebP с потерями при том же качестве файла даёт чуть меньше артефактов, чем JPEG, но принципиально ситуацию не меняет — тонкие начертания всё равно страдают. AVIF ведёт себя похожим образом, хотя при равном весе файла артефакты визуально менее заметны.
Практические рекомендации без магии
- Для текста внутри сжатых изображений используйте SemiBold (600) как базовый вес. Это даёт запас прочности без визуальной тяжести.
- Избегайте Light и Thin начертаний — они работают только при минимальном сжатии или в PNG.
- Выбирайте шрифты с равномерной толщиной штрихов (геометрические гротески). Контрастные гарнитуры (с резкой разницей между тонкими и толстыми элементами) искажаются непредсказуемо.
- Не полагайтесь на Bold для мелкого текста — лучше увеличить кегль и оставить Regular.
- Проверяйте итоговый файл именно в том виде, в котором его увидит пользователь. Сохранённый в Photoshop макет при просмотре в браузере может показать совершенно иную картину артефактов.
- Если площадка позволяет, используйте WebP вместо JPEG — при одинаковом визуальном качестве артефакты вокруг букв будут менее выраженными.
Выбор начертания для сжатого изображения — это всегда компромисс между эстетикой макета и реальностью алгоритмов компрессии. Красивый тонкий шрифт, который идеально смотрится в дизайне, может стать нечитаемым мусором после загрузки на сайт. Проверка реального результата при целевом уровне сжатия — единственный надёжный способ убедиться, что текст доживёт до пользователя в пригодном виде.