Если после загрузки картинка становится мутной, сначала нужно понять, где теряется качество: при сохранении оригинала, создании миниатюры, выборе файла браузером, CSS-масштабировании или преобразовании на CDN. Повторная загрузка изображения большего размера не всегда помогает, если сайт продолжает отдавать маленькую или многократно сжатую копию.

Надежное исправление сохраняет качественный оригинал, создает ограниченный набор производных размеров и позволяет браузеру выбрать вариант, подходящий фактической ширине и плотности экрана.

Не перезаписывайте исходники до диагностики

  • Скачайте оригинал до загрузки и файл, который сайт показывает после обработки.
  • Сохраните настройки качества, размеры миниатюр и конфигурацию CDN.
  • Сделайте резервную копию медиа и связанных записей базы.
  • Не запускайте массовую регенерацию на рабочем каталоге без тестовой выборки.
  • Выберите несколько типов изображений: фото, логотип, скриншот и изображение с текстом.

Сравните исходный и фактически загруженный файл

Откройте инструменты разработчика, найдите запрос изображения в Network и сохраните именно ответ сервера. Сравните его с исходником по пиксельным размерам, формату и весу. Название файла в HTML может отличаться от реально выбранного ресурса из srcset.

  • Ширина и высота исходника.
  • Natural width и height файла из браузера.
  • Размер, в котором изображение нарисовано на странице.
  • Формат: JPEG, PNG, WebP или AVIF.
  • Размер ответа и параметры качества в URL.
  • Content-Type, Cache-Control и признаки CDN-преобразования.
  • Плотность экрана устройства.

Проверьте, не растягивается ли маленькая миниатюра

Самая частая причина размытия — браузер получает, например, файл шириной 400 пикселей и показывает его в блоке шириной 800 пикселей. На экране с DPR 2 для четкого результата может понадобиться ресурс около 1600 физических пикселей.

  • Rendered width не превышает natural width на обычном экране.
  • Для Retina предусмотрен вариант с достаточным разрешением.
  • CSS max-width не заставляет маленький файл занимать огромный контейнер.
  • Фоновое изображение имеет варианты для разных размеров экрана.
  • Canvas экспортируется с учетом devicePixelRatio, если картинка создается в браузере.

Проверьте srcset и sizes

Даже если большой файл существует, браузер может выбрать маленький вариант из-за неверного атрибута sizes. Он сообщает браузеру предполагаемую ширину изображения в layout. Если значение меньше реального блока, будет загружена недостаточная миниатюра.

  • В srcset перечислены существующие файлы с правильной шириной.
  • sizes соответствует сетке на каждом breakpoint.
  • Не используется постоянное значение, рассчитанное только для desktop.
  • После изменения layout обновлены правила выбора изображения.
  • В picture корректно расставлены source и fallback img.
  • Lazy-load не заменяет выбранный ресурс более маленьким после загрузки.

В DevTools можно посмотреть currentSrc — URL, который браузер выбрал фактически. Это надежнее, чем смотреть только атрибут src в разметке.

Проверьте настройки ресайза в CMS

CMS обычно создает несколько копий при загрузке. Если нужного размера нет, тема может брать ближайшую маленькую миниатюру. После изменения настроек старые файлы не всегда пересоздаются автоматически.

  • Размеры миниатюр соответствуют реальным компонентам сайта.
  • Не создается слишком маленький вариант для карточки или hero.
  • Обрезка crop включена только там, где нужен фиксированный формат.
  • Исходный файл не заменяется уменьшенной копией без сохранения оригинала.
  • Существующие изображения регенерируются после изменения конфигурации.
  • Тема или модуль не добавляет отдельное повторное сжатие.

Избегайте повторного JPEG-сжатия

Каждое сохранение JPEG с потерями ухудшает мелкие детали и контрастные границы. Если фотографию сначала экспортировали с низким качеством, затем CMS сжала ее, а CDN повторно перекодировал, результат будет заметно хуже даже при достаточном разрешении.

  • Производные размеры создаются напрямую из качественного оригинала.
  • Один и тот же файл не проходит оптимизацию при каждом запросе.
  • Настройки CMS и CDN не выполняют два независимых агрессивных сжатия.
  • После ручного редактирования сохраняется новый оригинал, а не прежняя миниатюра.
  • Для скриншотов и текста выбирается формат, сохраняющий четкие границы.

Выберите формат по содержимому

  • JPEG подходит для фотографий без прозрачности.
  • PNG полезен для изображений с прозрачностью, схем и некоторых скриншотов.
  • WebP и AVIF могут уменьшить вес, но требуют настроенного качества и fallback по требованиям проекта.
  • SVG подходит для доверенной векторной графики, но пользовательский SVG требует отдельной проверки безопасности.
  • Логотип и мелкий текст нельзя оценивать по тем же настройкам, что и фотографию.

Современный формат не гарантирует качество сам по себе. Слишком низкий quality или неправильный subsampling сделают WebP и AVIF такими же мутными.

Настройте качество осознанно

Универсального числа качества нет. Подберите настройки на тестовом наборе и сравните детали при реальном размере показа. Важны не только визуальная оценка и вес, но и тип изображения.

  • Фото с плавными переходами.
  • Товар с мелкой текстурой.
  • Скриншот интерфейса.
  • Баннер с текстом.
  • Изображение на светлом и темном фоне.
  • Мобильный и Retina-вариант.

Проверьте алгоритм уменьшения

Быстрый или устаревший алгоритм масштабирования может давать мягкий результат. Используйте качественный ресемплинг, подходящий библиотеке обработки, и применяйте умеренную резкость только после уменьшения, если это действительно нужно.

Слишком сильный sharpen создает ореолы и не возвращает детали, потерянные в маленьком исходнике. Сначала исправьте размер и источник, затем оценивайте резкость.

Не увеличивайте маленькие оригиналы

Если загруженный файл меньше целевого размера, сервер не должен создавать искусственно увеличенную производную копию и считать ее качественной. Лучше ограничить минимальные размеры при загрузке или показать пользователю понятное предупреждение.

  • Минимальная ширина зависит от места показа и DPR.
  • Проверяется фактическое изображение, а не только размер файла в байтах.
  • Ошибка указывает рекомендуемый формат и разрешение.
  • Исходник не отклоняется по завышенным требованиям для маленькой карточки без причины.

Проверьте CDN и параметры URL

Сервисы обработки изображений часто принимают ширину, DPR, формат и quality в URL. Ошибка шаблона может запросить вариант шириной 320 пикселей для большого блока или применить quality дважды.

  • Параметр width соответствует реальной ширине компонента.
  • DPR передается или учитывается при выборе варианта.
  • Fit, crop и gravity не обрезают важную часть товара.
  • Quality не переопределяется на слишком низкое значение.
  • CDN получает качественный origin, а не уже уменьшенную миниатюру.
  • После исправления выполнена точечная инвалидация старого кеша.

Убедитесь, что кеш не показывает старую копию

После загрузки улучшенного файла браузер или CDN может продолжать отдавать прежний вариант по тому же URL. Надежнее использовать versioned URL или изменяемый идентификатор файла. Query string работает не одинаково во всех кешах, поэтому правило нужно проверить.

  • Сравните currentSrc в обычном и приватном окне.
  • Проверьте заголовки Age, ETag, Last-Modified и Cache-Control.
  • Не очищайте весь CDN, если достаточно одного пути.
  • Для неизменяемых файлов используйте новый ключ и долгий кеш.
  • Service worker не должен подменять актуальный ответ старой копией.

Проверьте CSS и дробные размеры

Иногда файл качественный, но выглядит мягко из-за transform scale, дробной ширины или анимации родительского блока. Особенно это заметно на тонких линиях и тексте внутри изображения.

  • Изображение не масштабируется через transform в постоянном состоянии.
  • Ширина и высота компонента стабильны после загрузки.
  • object-fit используется вместе с подходящим соотношением сторон.
  • Картинка не растягивается независимо по двум осям.
  • Слайдер не оставляет активный кадр в промежуточном масштабе.

Сохраните цвет и прозрачность

Проблема цветового профиля обычно выглядит как изменение цвета, а не размытие, но ее часто замечают одновременно со сжатием. Приводите изображения к согласованному цветовому пространству и проверяйте прозрачность при конвертации PNG в современные форматы.

Безопасно регенерируйте миниатюры

  1. Сделайте копию оригиналов и базы медиа.
  2. Исправьте конфигурацию размеров и качества.
  3. Проверьте 5–10 изображений разных типов.
  4. Создавайте новые файлы во временном каталоге или с новым ключом.
  5. Сравните размеры, качество и ссылки.
  6. Запустите пакетную обработку с журналом и ограничением ресурсов.
  7. Не удаляйте старые варианты до успешной проверки страниц.
  8. Точечно обновите кеш и поисковые изображения.

Регенерация может сильно нагружать CPU, память и диск. Выполняйте ее пакетами, контролируйте ошибки и не допускайте одновременного запуска нескольких одинаковых задач.

Как проверить исправление

  1. Сравните currentSrc, natural width и rendered width.
  2. Проверьте обычный экран и DPR 2.
  3. Откройте карточку, каталог, zoom и мобильную версию.
  4. Сравните фото, скриншот и изображение с текстом.
  5. Проверьте качество после повторной загрузки и редактирования.
  6. Убедитесь, что вес страницы не вырос без необходимости.
  7. Проверьте CDN, кеш браузера и service worker.
  8. Сравните результат в Chrome, Safari и Firefox.

Типичные неправильные решения

  • Загружать огромный оригинал и всегда отдавать его всем устройствам.
  • Просто увеличить CSS-ширину маленькой миниатюры.
  • Поднять quality до 100 без проверки веса.
  • Несколько раз перекодировать один JPEG.
  • Применить сильную резкость вместо исправления исходного размера.
  • Регенерировать весь каталог без резервной копии.
  • Очистить весь CDN, не проверив currentSrc.
  • Оценивать качество только в уменьшенном окне desktop-браузера.

Профилактика

Опишите медиа-пайплайн: требования к исходнику, набор производных размеров, формат, качество, правила srcset и CDN. Добавьте тестовую страницу с эталонными изображениями и проверяйте ее после изменения темы, плагина оптимизации или сервиса картинок.

  • Оригиналы хранятся отдельно от производных файлов.
  • Размеры соответствуют компонентам дизайн-системы.
  • Для мобильного и Retina есть подходящие варианты.
  • Новые преобразования не применяются повторно к миниатюрам.
  • Ошибки генерации и отсутствие нужного размера наблюдаются в логах.

Итог

Когда после загрузки картинка становится мутной, нужно сравнить исходник и фактический currentSrc, проверить natural и rendered size, srcset, настройки CMS, повторное сжатие и CDN. Качественный результат получается из сохраненного оригинала и правильно выбранной производной копии, а не из одного максимального файла для всех экранов.

Если нужно исправить качество изображений, я могу проверить загрузчик, миниатюры, тему и CDN, настроить размеры и современные форматы, безопасно регенерировать существующие файлы и проверить четкость и скорость на мобильных и Retina-экранах.