Однажды я провел целый день, убедившись, что сайт клиента работает медленно из-за ошибки рендеринга в моем коде React. Профилировал компоненты, запоминающиеся вещи, прогонял переименов. Фактической проблемой было фоновое изображение героя: 3,1 МБ JPEG, сохраненный при 100%-ном качестве, когда точно такое же изображение при 80% качестве было бы 480 КБ и выглядело идентично. Я перепроектировал приложение и недодумал активы. Это очень разработчик способа тратить день.
С тех пор сжатие изображений было первым, что я проверяю, а не последним. It's также самым непонятым - "compress без потери качества" обрабатывается как парадокс, когда на самом деле это's просто вопрос знания, какой рычаг отбрасывает данные, а какой нет't.Это руководство - ментальная модель, которую я использую, построенная во время доставки Toolz.dev и настройки Основные веб-жизненные ресурсы на клиентских сайтах: как на самом деле работает сжатие, когда использовать lossy versus lossless и почему один конкретный номер качества продолжает выигрывать.
TL;DR: обычай Изображение компресс при качестве веб-фотографий около 80%, что' это сладкая точка, где файл сжимается на 60-80%, и вы все равно можете't отличить его от оригинала при нормальном размере. Сжимать Из оригинала (Никогда не повторно сжимайте JPEG) и всегда менять размер Для отображения размеров перед сжатием. Для максимальной экономии, обращаться фотографии к webp первый. в вашем браузере все работает - ничего не загружается.
Что на самом деле происходит, когда вы сжимаете изображение?
Цифровое изображение представляет собой сетку пикселей, каждый из которых сохраняет цвет. Вот почему необработанные изображения огромны. Изображение 1920×1080 24-битного цвета:
1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB
Почти шесть мегабайт на одну картинку. Страница с десятью из них будет составлять 60 МБ загрузок перед загрузкой текста. Сжатие существует, чтобы сделать это выживаемым, и оно делает это одним из двух принципиально разных способов.
Сжатие без потерь Находит шаблоны в данных и кодирует их более компактно, ничего не отбрасывая. Распакованное изображение пиксель-для-пиксель идентично оригиналу. Техники элегантны: кодирование длины длины кодирования сворачивается "красный, красный, красный, красный, красный" в "5-кратный красный" код словаря (алгоритм сдувающегося ядра) заменяет повторяющиеся паттерны короткими кодами; прогнозирование фильтрации сохраняет каждый пиксель, поскольку его отличие от прогнозируемого значения, так что плавные градиенты становятся длинными крошечными числами, которые красиво сжимаются. PNG, WebP без потерь и AVI без потерь, все работают таким образом.
Сжатие с потерями достигает гораздо большей экономии, выбрасывая данные, которые ваша зрительная система вряд ли заметит - и it's умнее, чем & quot;удалить некоторые пиксели.& quot; Он преобразует изображение из RGB в модель яркость плюс цвет (ваш глаз гораздо более чувствителен к яркости, чем к цвету), затем уменьшает разрешение цветовых каналов, сохраняя при этом яркость резкой. Он разбивает изображение на блоки, преобразует каждое в частотные коэффициенты и округляет высокочастотные - тонкие текстуры и шум - до меньшего количества значений. Этот этап округления, квантование - это место, где данные фактически теряются. JPEG, WebP с потерями и AVIF с потерями - все следуют за этой дугой.
Практический upshot: lossless предназначен для изображений, где каждый пиксель имеет смысл - логотипы, скриншоты, диаграммы, что угодно с четким текстом.Lossy предназначен для фотографий и естественных изображений, где & quot; выглядит идентично & quot; имеет гораздо большее значение, чем & quot;is bit-for-bit идентичен. & quot;
Что на самом деле означают настройки качества?
«Качество 80%» — это число людей, не зная, что они покупают. Вот карта, которую я использую для JPEG и Lossy WebP, основанная на множестве сравнений до и после реального размера просмотра.
100% (максимум): Почти никогда не правильный выбор. Файл часто составляет 3–5 раз больше, чем 80%, без видимых улучшений. Здесь сохранился образ героев впустую.
85–95% (высокий): Для фотопортфолио и изображений, где тонкие детали действительно важны. При 90% артефакты невидимы для большинства зрителей даже при 100% зуме.
75–85% (веб-приятная точка): На 60–70% меньше максимума, с невидимыми артефактами при нормальном размере просмотра. Здесь относятся почти все веб-изображения.
50–75% (агрессивно): Для миниатюр и просмотров, где размер критический. Артефакты начинают показываться гладкими градиентами и тонкими текстурами, если внимательно присмотреться.
ниже 50%: Видимая блочная и цветопередача. Зарезервируйте его для действительно низкоприоритетных изображений или жестких ограничений по размеру.
PNG не имеет 't имеет "quality" слайдер, потому что он 's без потерь - вы оптимизируете его по-другому. Уровень сжатия (09) меняет время кодирования на файл меньшего размера, с 6 разумным по умолчанию. Уменьшение глубины цвета чрезвычайно помогает, когда изображение использует мало цветов: 16-цветный логотип, упавший с 24-битного до 8-битного, резко сокращается с нулевым видимым изменением. И удаление метаданных - EXIF, цветовые профили, временные метки - обрезает байты, которые никогда не влияли на изображение.
WebP - это мой режим по умолчанию для Интернета: при качестве 80 он работает на 25 35% меньше, чем JPEG, при эквивалентном качестве, а также работает в режиме без потерь, который превосходит PNG примерно на четверть. AVIF сжимается еще сильнее - обычно на 50%+ меньше, чем JPEG - но кодируется медленнее и поддерживается 't довольно повсеместно, поэтому я обслуживаю его с помощью резервного копирования WebP, а не отдельно.
В какой формат сжимать?
Выбор формата — это половина битвы сжатия, и решение проще, чем варианты делают его вид. Вот сравнение я подаю новому товарищу по команде:
| формат | тип | против JPEG Размер | прозрачность | лучше для |
|---|---|---|---|---|
| неправильный | потеря | базовый | нет | Фотографии в электронной почте, универсальный запасной вариант |
| png | без потерь | намного больше для фотографий | да | Скриншоты, логотипы, текст, диаграммы |
| webp | оба | 25–35% меньше | да | По умолчанию для веб-фотографий и графики |
| авиаф | оба | ~50% меньше | да | Максимальная экономия, с запасным вариантом WEBP |
Единственная наиболее распространенная ошибка формата - и I' ловила его в обзоре кода больше раз, чем я могу сосчитать - это сохранение фотографий как PNG. Поскольку PNG не имеет потерь, фотография, сохраненная как PNG, может быть во много раз больше, чем та же фотография, что и JPEG 85%-ного качества без видимой разницы. PNG предназначен для графики с жесткими краями и текстом, а не для естественных изображений. Используйте JPEG или WebP для фотографий, и вы вернете себе большую часть раздутой страницы и #39;s вес за одно изменение.
Конвертирование — это задание с двумя кликами на конвертер формата, йо- Шаблон, который я на самом деле отправляю, позволяет браузеру согласовывать:
<img src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description">
что srcset Вручает браузер несколько размеров и позволяет загружать тот, который подходит для устройства, поэтому телефон никогда не тянет изображение рабочего стола. В сочетании с правильным форматом это разница между быстрым сайтом и медленным.
Какой правильный порядок сжатия веб-изображений?
Заказ имеет больше, чем любая отдельная настройка, и неправильная ошибка — это тихая ошибка большинства «я сжимала ее, и она все еще огромная». Последовательность, каждый раз:
Измените размер сначала. Сжатие изображения 4000×3000, которое будет отображаться при 800×600 трат на пиксели, которые должны быть отброшены, и результат все еще намного больше, чем необходимо. менять размер к размерам дисплея (двухуровневые для сетчатки) перед касаясь компрессора. Этот переупорядочение устраняет более негабаритные проблемы, чем любая настройка качества.
конвертировать секунду. Переместить фотографии в WebP (или AVIF с запасным вариантом) с помощью конвертер формата, йо- Теперь вы сжимаете меньший, более качественно отформатированный изображение.
Сжать третью. длина Изображение компресс около 80% для изображений с потерями, а затем оцените результат При фактическом размере просмотра- не увеличен до 400%, потому что никто не просматривает веб-страницу таким образом.
Чтобы сделать это конкретным, здесь & #39; проходит веб-оптимизацию. Я запускаю на реальной странице: проверяю с помощью Lighthouse, чтобы найти тяжелые изображения, изменяю размер каждого до размера дисплея, преобразую в WebP, сжимаю на 7580%, затем повторно запускаю Lighthouse, чтобы подтвердить. Типичный результат - это скидка 5080% от общего веса изображения и измеримый скачок в самой большой контентной краске - это показатель, который в первую очередь отправил меня по всему этому пути.
Для более широкого тура по изменению размера, выбора формата и удалению фона наряду с компрессией Руководство по инструментам изображения Покрывает полный набор инструментов.
Какие ошибки сжатия стоят больше всего?
На большинство потерь байтов приходится на большинство трат и наиболее заметный урон от качества. Я сделал все из них.
относительно -Сжатие уже сжатого JPEG. Каждый раунд компрессии с потерями складывает новые артефакты поверх старых, и урон кумулятивен и необратим. Всегда сжимайте Из исходного источника, и сохраните эти оригиналы - создайте из них каждую сжатую версию, а не из предыдущей сжатой копии.
Использование PNG для фотографий. Покрыто выше, но это самая большая победа, когда вы ее замечаете: фото 5 МБ 500 КБ без видимой разницы.
Сверху сжатие. Снижение JPEG до 30% делает крошечные файлы с видимой блочной благой и полосой. Оставайтесь на уровне 75–85% для паутины и тестируйте реальный размер, чтобы найти свой этаж.
Пропуск шага изменения размера. Сжатие перед изменением размера, как описано выше, создает файлы, которые являются как большими, так и более низкими, чем должны быть.
Не обращая внимания на современные форматы. Обслуживание JPEG, когда WebP доступен, оставляет 25–35% потенциальной экономии на столе без причины.
Если вы хотите объективно проверить свою работу, существуют показатели восприятия - SSIM выше 0,95 обычно "визуально без потерь, " и Google's Баллы Butteraugli ниже 1,0 означают различия, по сути, невидимые - но, честно говоря, для повседневной работы просмотр оригинала и сжатой версии рядом в реальном размере говорит вам почти все, что могла бы сделать математика.
Часто задаваемые вопросы
Как сжать изображения без потери качества?
Для истинного, идеального сжатия без потерь используйте PNG или WebP без потерь. Для & quot;визуально без потерь& quot; - никакой разницы вы не видите - используйте JPEG или WebP с качеством 80 pix90%.The Изображение компресс Инструмент позволяет вам задать качество и сравнить оригинал с сжатой версией перед загрузкой, чтобы вы могли найти точную точку, где размер падает, но изображение все еще выглядит нетронутым.
Почему 80% качество считается магическим числом?
При большом количестве тестирования до и после реального размера просмотра, качество JPEG или WebP, около 80%, привело к тому, что файл уменьшился на 60–70% от максимального, но артефакты по-прежнему невидимы без пиксельных писем. Поднимитесь выше и вы заплатите много байтов за детали, которые никто не видит; идите намного ниже и градиенты начинают в полосе. Это лучший баланс для использования в Интернете, поэтому я добываюсь по умолчанию.
Какой формат изображения лучше всего подходит для сайтов в 2026 году?
WebP - лучший вариант по умолчанию - примерно на 25 (35%) меньше, чем JPEG, с эффективной универсальной поддержкой браузера. Для максимальной экономии используйте AVIF (примерно на 50% меньше, чем JPEG), обслуживаемый с резервным копированием WebP в a <picture> стихия конвертировать с конвертер формата, йо- Сохраняйте подлинное векторное искусство, как логотипы, как SVG, а не сжимая их как растровые.
В чем разница между сжатием с потерями и без потерь?
Сжатие без потерь перестраивает данные более эффективно, не отбрасывая ни одного из них, поэтому результат идентичен исходному - PNG работает таким образом. Сжатие с потерями навсегда удаляет данные, которые ваш глаз вряд ли заметит, достигая гораздо более высокой экономии - JPEG работает таким образом. Lossless обычно дает сокращение на 10 40%; потери обычно дают 60 90%. Используйте текст и графику без потерь, потери для фотографий.
Должен ли я изменить размер изображения до или после сжатия?
Всегда сначала изменяйте размер. сжатие большого изображения, а затем его сжатие тратит усилия сжатия на пиксели, которые изменение размера отбрасывает, оставляя файл, который 's и больше, и ниже качества, чем должно быть. сначала измените размер до размеров дисплея, затем сжимайте меньшее изображение - этот порядок дает наименьший, самый чистый результат.
Безопасно ли сжимать изображения с помощью онлайн-инструмента?
Большинство онлайн-компрессоров загружают ваши изображения на свои серверы для их обработки, что вызывает беспокойство за личные фотографии или работу с клиентом. выше Изображение компресс инструмент на Toolz.dev полностью работает в вашем браузере с помощью API холста, поэтому ваши изображения никогда не покидают ваше устройство - безопасно для чего-либо частного или собственного.
Почему сжатие одного и того же изображения дважды плохой идеей?
Потерянное сжатие отбрасывает детали, и делая это дважды отбрасывает его дважды - второй проход добавляет свежие артефакты поверх первого прохода 's, и ничего из этого не возвращается. вот почему вы всегда должны сохранить оригинал и генерировать из него каждую сжатую версию, а не сжимать файл, который уже был сжат один раз.
Как узнать, слишком ли большие мои изображения?
Запустите на своей странице Lighthouse Google или PageSpeed Insights; пометьте негабаритные изображения и предложите лучшие размеры. Быстрое правило: если какое-либо отдельное изображение превышает 200 КБ, его стоит оптимизировать, и изображения Hero особенно должны хорошо подходить под это, поскольку они двигают наибольшую содержательную краску. Направьте правонарушителей через рабочий процесс изменения размера-конверт-конверт и повторно аудите.
Как сжать изображение до определенного размера файла, например, 200 КБ или 1 МБ?
Измените размер сначала до размеров дисплея, затем уменьшите качество, пока не очистите цель: начните с 80%, а если вы все еще закончили, попробуйте 70%, затем 60%. выше Изображение компресс Инструмент показывает размер выходного сигнала при перемещении ползунка, поэтому вы можете наблюдать, как он пересекает порог, а не догадывается и повторно экспортирует. Переключение формата на WebP обычно покупает вам еще 25–35% при той же настройке качества, что часто достаточно само по себе.
Сокращает ли сжатие изображения его разрешение или размеры?
Нет - сжатие и изменение размера являются отдельными операциями. сжатие фотографии 3000×2000 оставляет ее 3000×2000; она просто сохраняет эти пиксели, используя меньше байт, за счет некоторых мелких деталей. если вы хотите меньше пикселей, то 's изменение размера, и it's изменение, которое обычно экономит наибольший вес. выполнение обоих, в таком порядке, является тем, что превращает файл камеры 6 МБ в веб-изображение 90 КБ.
