Почему логотип размытый и как сделать его чётким — разбор всех причин
На макете логотип был идеальным, а на сайте превратился в мыло. Или в презентации на проекторе. Или на визитках из типографии. Размытый логотип — это то, что клиенты и посетители замечают мгновенно: он делает бренд «дешёвым» ещё до того, как человек прочитал хоть слово. Хорошая новость: причин размытости всего шесть, и все они чинятся.
В 9 случаях из 10 логотип размытый потому, что маленький растровый файл растянули до большого размера. Лечится одним из двух способов: взять SVG (вектор не мылится в принципе) или взять PNG минимум в 2 раза больше размера показа — из‑за ретина‑экранов.
Причина 1. Маленький PNG растянули
Классика. Логотип скачали размером 200×200, а на сайте он стоит в блоке 400 пикселей шириной. Браузер вынужден «додумывать» недостающие пиксели — интерполировать, — и края плывут.
Как проверить: откройте файл и посмотрите его реальные размеры в пикселях. Если размер показа больше размера файла — вот и диагноз.
Как починить: взять исходник большего размера. Увеличить сам PNG «без потери качества» нельзя — апскейлеры на нейросетях помогают фотографиям, но на логотипах с чёткими краями обычно оставляют артефакты.
Причина 2. Ретина‑экраны: пикселей нужно в два раза больше
Даже если размеры совпадают точь‑в‑точь — 200-пиксельный PNG в 200-пиксельном блоке, — на iPhone и большинстве современных ноутбуков он всё равно будет мягким. Физических пикселей у таких экранов в 2–3 раза больше, чем CSS‑пикселей: в блок 200×200 экран упаковывает 400×400 или 600×600 точек.
Как починить: правило 2x. Файл должен быть минимум вдвое больше размера показа: блок 200 px → PNG 400 px. Либо — SVG, которому плотность пикселей безразлична.
Причина 3. Это JPG
JPG сжимает картинку с потерями и особенно плохо переносит резкие границы — именно из них состоит любой логотип. Вокруг букв и контуров появляется характерная «грязь» (артефакты сжатия), которую часто принимают за размытость.
Как починить: пересохранить из JPG нельзя — потери уже случились. Нужен исходный PNG или SVG. Почему JPG вообще не подходит для логотипов, мы разбирали в сравнении форматов.
Причина 4. Логотип сжала сама платформа
Вы загрузили отличный файл, а соцсеть, маркетплейс или CMS пересжали его по‑своему: уменьшили, конвертировали в JPG, наложили своё сжатие. Особенно этим славятся аватарки и обложки.
Как починить: загружать файл ровно в том размере, который требует площадка (тогда её ресайзер не включится), и с запасом по качеству. Для аватарок — квадрат от 400×400, без мелких деталей: при уменьшении до 40 пикселей тонкие линии исчезнут у любого формата.
Причина 5. Дробные размеры и трансформации в CSS
Логотип может мылиться из‑за вёрстки: элемент получил дробную ширину (например, 199.5 px из‑за флексов), масштаб через transform: scale(), или картинка стоит в контейнере с width: 100% и растягивается на глазок.
Как починить: задать картинке целые размеры, а лучше — вставить SVG, которому эти проблемы безразличны. Если SVG всё равно выглядит мягко в мелком размере, проверьте, не рендерится ли он через filter или opacity — некоторые комбинации заставляют браузер растеризовать вектор заранее.
Причина 6. Печать: 72 dpi вместо 300
На экране файл выглядел отлично, а на визитках — мыло. Экранного разрешения (72–96 dpi) для печати мало: типографии нужно 300 dpi. PNG 1000×1000 px на печати — это всего 8,5 см чёткого изображения.
Как починить: отдавать в печать вектор (EPS, PDF, SVG — что примет типография). Если вектора нет — растр из расчёта 300 пикселей на каждые 2,54 см физического размера.
Таблица‑шпаргалка
| Симптом | Причина | Лечение |
|---|---|---|
| Мыло на сайте везде | маленький PNG растянут | SVG или PNG ×2 от размера |
| Чётко на мониторе, мыло на iPhone | ретина | правило 2x или SVG |
| «Грязь» вокруг букв | JPG‑артефакты | найти PNG/SVG‑исходник |
| Мыло только в соцсети | платформа пересжала | грузить точный размер |
| Мыло только на печати | 72 dpi | вектор или 300 dpi |
Заметили закономерность? Почти каждая строка таблицы лечится словом «SVG». Вектор не зависит ни от размера блока, ни от плотности экрана, ни от dpi печати. Если платформа принимает SVG — всегда выбирайте его, и класс проблем «размытый логотип» исчезнет целиком.
Пошаговая диагностика: находим причину за пять минут
Когда мыло на месте, а причина неочевидна, идите по цепочке:
- Откройте сам файл отдельно от сайта (перетащите в браузер, посмотрите в 100%). Файл чёткий? Значит, проблема в том, как его показывают, — идите к шагу 3. Мыльный уже сам файл — к шагу 2.
- Файл мыльный. Посмотрите свойства: расширение (JPG?), размеры в пикселях (меньше, чем нужно?). Ищите исходник лучшего качества — обработкой этот файл не спасти.
- Файл чёткий, на сайте мыло. Откройте DevTools (правый клик по логотипу → «Просмотреть код») и сравните два числа: реальный размер файла и размер, в котором он отображается (вкладка Computed или наведение на элемент). Отображается крупнее файла → причины 1–2. Размеры совпадают, но мыло на телефоне → ретина, причина 2.
- Мыло только в одном месте (соцсеть, маркетплейс, письмо) → площадка пересжала, причина 4. Сравните загруженный файл со скачанным обратно — разница будет видна.
Эта последовательность закрывает практически все случаи и, что важнее, показывает, где чинить: в файле, в вёрстке или в настройках загрузки.
Про «улучшайзеры»: может ли нейросеть спасти мыльный логотип
Апскейлеры (Topaz, Real‑ESRGAN, встроенные в редакторы) творят чудеса с фотографиями, и рука тянется прогнать через них логотип. Результат обычно разочаровывает: на чётких границах и типографике нейросети дорисовывают волнистые края, скругляют углы букв и «изобретают» детали. Для логотипа корректный путь другой — не восстанавливать пиксели, а вернуться к вектору: найти SVG‑оригинал или отрисовать заново (как — в статье про перевод логотипа в вектор). Апскейлер допустим как временная мера для второстепенной картинки, но не для знака, который представляет бренд.
Отдельный случай: мыло в видео и презентациях
Логотип в углу ролика или на слайде мылится по своим причинам:
- Видео пережато. YouTube и соцсети жмут видео агрессивно, и мелкий логотип страдает первым. Лечение: крупнее размер логотипа в кадре, контрастный фон и — для интро — векторная анимация вместо статичной картинки (см. статью про анимированные логотипы).
- Презентация проецируется в чужом разрешении. Проектор 1024×768 растянет ваш аккуратный макет. Вставляйте в слайды SVG (PowerPoint умеет) или PNG двойного размера.
- Zoom/видеозвонки сжимают демонстрацию экрана — логотип на шаринге всегда выглядит хуже, чем локально. Это ограничение канала, а не вашего файла.
Коротко
Размытость — это всегда нехватка пикселей в конкретном месте: их либо мало в файле, либо съело сжатие, либо им не хватило плотности под ретину или печать. Решение одно из двух: вектор — или растр с двойным запасом.
Чтобы не искать чёткие исходники по всему интернету — в нашем каталоге логотипов каждый бренд лежит в оригинальном SVG и PNG высокого разрешения. Скачивайте нужный размер сразу, без мыла.