Изображения, документы и данные
Как сжать изображение без заметного размытия
Уменьшите файл, правильно выбирая размеры, формат и качество.
Краткий ответ
Сначала выберите размеры показа, затем формат и качество. Компрессор сохраняет размеры в пикселях; для изменения размера используйте инструмент товарных изображений. Кружка — вымышленный образец, созданный ИИ, а не фотография реального товара.
Пошагово
Откройте mug-source.png, выберите JPEG и сбалансированное качество, сохраните результат. Снова откройте оригинал и повторите для WebP. Все эталоны имеют размер 1254 × 1254: PNG 1 806 784 байта, JPEG 98 914, WebP 47 638. Они получены программным canvas с качеством 80; браузер может дать другой размер файла.
Частые ошибки
Непрозрачное изображение фотографического типа не показывает результат для логотипов или снимков экрана. JPEG не сохраняет прозрачность: здесь она заменяется белым. Настройка качества PNG работает иначе, чем JPEG; оптимизированный файл иногда увеличивается. Для каждой попытки используйте оригинал.
Итоговая проверка
При масштабе 100% сравните крапинки кружки, край ручки и градиент тени. Сверьте размеры, формат, ориентацию и объём, затем оцените изображение в размере витрины. Выберите наименьший визуально приемлемый файл. Таблица описывает конкретные загрузки, а не универсальный коэффициент сжатия.
Разберите конкретный пример
Формат выбирают по важным деталям
Фактура товара, мелкий текст и прозрачный край требуют разных сравнений. Экспортируйте варианты из одного оригинала, а не из уже сжатой копии.
| Что проверить | Пример или действие | Как оценить результат |
|---|---|---|
| Фото с непрозрачным фоном | Сравните JPEG и WebP кружки одинакового размера. | При 100% проверьте ручку, крапинки и тень. Экономия полезна только при приемлемых деталях. |
| Прозрачный логотип | Сравните PNG и WebP, избегайте JPEG. | Проверьте файл на цветном фоне: белый фон не доказывает прозрачность. |
| Снимок экрана или мелкий текст | Начните с PNG и сравните WebP в целевом размере. | Откажитесь от ореолов и смазанных букв, даже если размер сильно уменьшился. |
Практический пример
Примеры Boundarysline содержат вымышленные данные. Их можно скачать для выполнения шагов; это не клиентские документы и не сертифицированные результаты.
| mug-source.png | 1254 × 1254 | 1,806,784 B |
|---|---|---|
| mug-balanced.jpg | 1254 × 1254 | 98,914 B |
| mug-small.webp | 1254 × 1254 | 47,638 B |