Squoosh: сжатие картинок для сайта без потери качества

Ты собрал приложение или сайт, добавил красивую обложку, пару скриншотов и иконки — а страница грузится по несколько секунд. Чаще всего виноваты не скрипты и не «тяжёлый фреймворк», а картинки, которые весят в десятки раз больше, чем могли бы. Хорошая новость: исправить это можно за пару минут, бесплатно и прямо в браузере. Инструмент называется Squoosh. Ниже — что это такое, почему вес картинок так влияет на сайт, чем Squoosh отличается от генеративных ИИ-редакторов и как встроить его в свой рабочий процесс перед каждой публикацией.

Что такое Squoosh простыми словами

Squoosh — это бесплатный веб-инструмент от команды Google Chrome для сжатия изображений. Он живёт по адресу squoosh.app, работает прямо в браузере и не требует ничего: ни установки программы, ни регистрации, ни подписки. Открыл страницу, перетащил картинку, покрутил настройки, скачал результат — всё. Это один из тех редких случаев, когда профессиональная задача решается инструментом проще, чем большинство «любительских» альтернатив.

Инструмент умеет принимать привычные форматы вроде PNG и JPEG и сохранять результат как в них же, так и в современных форматах WebP и AVIF, которые при том же визуальном качестве дают заметно меньший размер файла. Для каждого формата доступны настройки качества, а результат виден сразу — ещё до скачивания.

Главная особенность Squoosh, которую важно понять с самого начала: обработка происходит локально, в твоём браузере. Хотя это сайт, твоя картинка никуда не загружается на сервер. Вся работа выполняется на твоём компьютере силами браузера — ты можешь даже отключить интернет после загрузки страницы, и сжатие продолжит работать. Это принципиальное отличие от большинства «онлайн-сжималок», куда файл сначала уезжает на чужой сервер, обрабатывается там и возвращается обратно.

Почему это важно на практике:

• Конфиденциальность. Если ты сжимаешь скриншот с личными данными, макет ещё не анонсированного продукта или фото документа, файл не покидает твой компьютер. Нет риска, что он осядет на чужом сервере или попадёт в чужие руки.
• Скорость. Не нужно ждать загрузки файла в облако и обратно — на больших картинках по медленному каналу это ощутимо.
• Нет лимитов. Поскольку серверная часть не участвует в обработке, нет привычных ограничений вроде «до двадцати файлов в день на бесплатном тарифе» или «не больше пяти мегабайт на файл».

Ещё одно следствие такой архитектуры: Squoosh устроен как прогрессивное веб-приложение (PWA), поэтому после первого открытия он умеет работать офлайн — страница и все её «мозги» кешируются в браузере. Если хочешь, его можно «установить» на компьютер или телефон как обычное приложение через меню браузера, и ярлык появится рядом с остальными программами. Исходный код проекта открыт и лежит на GitHub — это не чёрный ящик, а инструмент, который при желании можно изучить изнутри.

Почему вес картинок вообще важен для сайта

Новичку кажется, что картинка — это «просто картинка»: вставил в страницу и забыл. На практике изображения — почти всегда самая тяжёлая часть веб-страницы. Один неоптимизированный скриншот в PNG может весить несколько мегабайт — больше, чем весь остальной код сайта вместе взятый: вся разметка, стили и скрипты учебной «Змейки» весят в разы меньше, чем один её скриншот.

Из этого следуют три прямых последствия.

Скорость загрузки. Чем больше весит страница, тем дольше она открывается, особенно на мобильном интернете. Пользователь, который ждёт больше пары секунд, с высокой вероятностью закроет вкладку и уйдёт — ещё до того, как увидит твою работу. Это особенно обидно, когда приложение хорошее, а отток происходит из-за обложки на четыре мегабайта.

SEO. Поисковые системы учитывают скорость загрузки при ранжировании. У Google даже есть формальный набор метрик качества страницы — Core Web Vitals, и одна из ключевых метрик в нём измеряет, как быстро загружается самый крупный видимый элемент страницы. На страницах с картинками этим элементом очень часто оказывается именно изображение. Медленная страница получает более низкие позиции в выдаче, а значит — меньше посетителей из поиска. Уменьшение веса картинок — один из самых дешёвых способов ускорить сайт: не нужно менять хостинг или переписывать код, достаточно прогнать изображения через сжатие.

Расход трафика и места. Если ты публикуешь проект на бесплатном хостинге вроде GitHub Pages, у тебя есть ограничения на объём репозитория и трафик. Лёгкие картинки берегут и то и другое. А посетителям с лимитным мобильным интернетом ты экономишь мегабайты из их тарифа — мелочь, которая влияет на то, вернутся ли они ещё раз.

Типичная ситуация из курса: ты сделал игру «Змейку», снял скриншот игрового поля и добавил его на страницу-визитку проекта. Скриншот из системы сохранился в PNG весом два с половиной мегабайта. После прохода через Squoosh и перевода в WebP тот же скриншот будет весить сто пятьдесят — триста килобайт: в десять раз меньше, а глазом разницы почти не видно. Страница начинает открываться мгновенно даже с телефона на нестабильном соединении.

Как устроено сжатие: две минуты теории

Чтобы осознанно крутить настройки, полезно понимать одну простую вещь: существует два вида сжатия изображений.

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

Сжатие с потерями отбрасывает часть информации, которую глаз почти не замечает: мельчайшие оттенки цвета, невидимые переходы. За счёт этого файл уменьшается в разы. Так работают JPEG, WebP и AVIF. Уровень «потерь» ты регулируешь ползунком качества: выше качество — больше файл, ниже качество — меньше файл, но заметнее искажения.

Вся работа в Squoosh — это поиск точки, где потери ещё невидны глазу, а файл уже лёгкий. И именно для этого у него есть ползунок сравнения «до/после»: ты не гадаешь по цифрам, а смотришь на результат своими глазами.

Отдельный момент — размер в пикселях. Если картинка будет показываться на странице в блоке шириной восемьсот пикселей, не имеет смысла загружать её в разрешении четыре тысячи пикселей по ширине — лишние пиксели это чистый лишний вес. Squoosh умеет уменьшать размер изображения перед сжатием, и для сайта это часто даёт даже больший выигрыш, чем само сжатие.

Сколько можно выиграть в сумме? Зависит от исходника, но порядок цифр такой. Скриншоты и экспорты из редакторов в PNG обычно худеют при переводе в WebP в пять-десять раз. Фотографии в JPEG с фотоаппарата или телефона после уменьшения до разумного размера и пересжатия теряют больше половины веса, нередко — две трети и больше. А вот уже оптимизированный файл повторно почти не сожмёшь: если картинка весит сто килобайт и выглядит хорошо, чуда не будет. Поэтому самый большой эффект Squoosh даёт именно на «сырых» файлах, которые попали в проект напрямую из редактора, генератора или скриншотилки.

Чем Squoosh отличается от генеративных ИИ-инструментов

В статьях курса мы уже разбирали инструменты, которые работают с картинками при помощи ИИ: Remove.bg убирает фон с фото, Topaz Photo AI улучшает качество и повышает разрешение. Важно не путать их с Squoosh — это инструменты разных задач.

Генеративные и ИИ-редакторы меняют содержимое картинки: стирают фон, дорисовывают детали, увеличивают разрешение, исправляют резкость и убирают шумы. Они создают новую версию изображения, которой раньше не существовало.

Squoosh ничего в картинке не меняет. Он берёт готовое изображение и делает его файл меньше — подбирает более экономный способ описать те же пиксели. Картинка остаётся той же по содержанию, размерам в пикселях (если ты сам не уменьшил их) и внешнему виду — насколько это возможно при выбранном качестве. Меняется только вес файла.

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

Разница в одной таблице:

Это значит, что Squoosh — не конкурент и не замена этим сервисам, а последний шаг в конвейере. Сначала ты готовишь картинку: генерируешь, обрезаешь, чистишь фон, выравниваешь цвета. А когда изображение готово и больше не будет редактироваться — прогоняешь его через Squoosh перед тем, как положить в проект. Менять порядок бессмысленно: если сначала сжать, а потом редактировать, правки придётся вносить в уже «просевшую» по качеству картинку, и итог будет хуже.

Чем это лучше, чем «Сохранить для веба» в Photoshop

Опытные пользователи помнят классический способ оптимизации: открыть Photoshop и выбрать «Сохранить для веба». Он работает до сих пор, но для новичка у Squoosh есть несколько веских преимуществ.

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

Современные форматы из коробки. В Squoosh доступны WebP и AVIF — форматы нового поколения, которые заметно эффективнее старого JPEG. С ними ты получаешь тот же визуальный результат при меньшем весе, и не нужно ничего докупать или настраивать.

Живое сравнение «до/после». В центре окна Squoosh есть ползунок: слева исходник, справа сжатая версия. Ты двигаешь ползунок по картинке и буквально глазами смотришь, где начинаются видимые искажения. Одновременно на экране в реальном времени показывается размер файла: крутишь настройку качества — и сразу видишь, сколько весит результат. Это превращает выбор настроек из лотереи в осознанное решение.

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

Есть и честные ограничения: Squoosh не умеет работать пакетно — файлы обрабатываются по одному. Если тебе нужно оптимизировать сотни изображений разом (например, целый каталог товаров), удобнее искать инструменты с пакетным режимом. Но для типичной ситуации — от одной до пары десятков картинок на страницу или проект — ручной проход через Squoosh быстрее, чем поиск и настройка «большого» решения.

Для учебного проекта вроде «Змейки» или лендинга это идеальное соотношение: результат профессионального уровня без профессионального инструмента и без единого потраченного рубля.

Как пользоваться: практический workflow

Разберём весь путь на живом примере — подготовим обложку для страницы проекта. Предположим, ты нарисовал или сгенерировал обложку и экспортировал её в высоком разрешении.

Шаг 1. Экспортируй картинку в исходном качестве. Из графического редактора или генератора сохрани файл в PNG или JPEG в максимальном качестве. Не пытайся сжать его заранее — финальное сжатие сделает Squoosh, а двойное сжатие только ухудшает картинку.

Шаг 2. Открой squoosh.app в браузере. Никакой регистрации не будет — страница сразу предложит выбрать или перетащить изображение.

Шаг 3. Перетащи файл в окно. Картинка появится на экране с ползунком сравнения посередине. Помни: файл обрабатывается локально и никуда не отправляется.

Шаг 4. Проверь размер в пикселях. Если картинка заметно больше того места, где она будет показываться на странице, уменьши её прямо здесь. Обложке для статьи редко нужна ширина больше полутора-двух тысяч пикселей, а иконке — больше нескольких сотен.

Шаг 5. Выбери формат. На панели настроек переключи формат результата — начни с WebP. О том, как выбирать между WebP, AVIF и JPEG, — в следующем разделе.

Шаг 6. Настрой качество, глядя на сравнение. Двигай ползунок качества и одновременно следи за двумя вещами: размером файла на экране и картинкой «после». Подвигай разделитель «до/после» по самым важным местам — лицам, тексту, мелким деталям. Как только артефакты стали заметны, вернись на шаг назад. Для фотографий и обложек хорошей стартовой точкой обычно служит качество в районе 75–85.

Шаг 7. Скачай результат. Кнопка сохранения отдаст готовый файл. Сравни его вес с исходным — разница в разы при неизменном виде это норма, а не чудо. Заодно дай файлу понятное имя латиницей без пробелов — например, zmeyka-oblozhka.webp: так его проще подключать в разметке и не будет сюрпризов с путями на хостинге.

Шаг 8. Используй файл в проекте. Положи оптимизированную картинку в папку проекта вместо исходника и укажи её в разметке страницы. Исходник в высоком качестве сохрани отдельно — вдруг картинку понадобится отредактировать: править лучше исходник, а уже после правок снова прогнать результат через Squoosh.

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

Как выбрать формат: WebP, AVIF или JPEG

Это главный практический вопрос при работе со Squoosh. Ответ проще, чем кажется: выбор делается один раз на картинку, и почти всегда он сводится к одному и тому же решению.

WebP — выбор по умолчанию. Формат разработан Google специально для веба: при том же качестве файлы обычно заметно легче JPEG, а прозрачность поддерживается, как в PNG. WebP понимают все современные браузеры, поэтому для большинства картинок на сайте — обложек, скриншотов, иллюстраций — это оптимальный вариант «поставил и забыл».

AVIF — максимальное сжатие. Формат ещё новее и при низком весе держит качество лучше WebP, особенно на фотографиях и градиентах. Плата за это — поддержка в браузерах пока не стопроцентная и кодирование заметно медленнее. Если хочешь выжать минимум из обложки, попробуй AVIF и сравни с WebP прямо в Squoosh — но актуальную поддержку формата браузерами проверяй на сайте caniuse.com перед тем, как делать его единственным вариантом.

JPEG — универсальный запасной вариант. Старый формат, который открывается везде и всегда. Он проигрывает WebP и AVIF по весу при том же качестве, зато не подведёт ни в одной программе и ни на одном устройстве. Используй его, когда нужна гарантированная совместимость — например, если файл будет не только на сайте, но и рассылаться в мессенджерах или открываться в старых программах.

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

Краткая шпаргалка:

Если сомневаешься — сохрани картинку в двух вариантах и сравни вес. Squoosh показывает размер честно, до байта.

Что ещё умеет Squoosh помимо сжатия

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

Изменение размера. Перед сжатием картинку можно уменьшить в пикселях — задать новую ширину и высоту. Для сайта это часто важнее самого сжатия: если изображение показывается в блоке шириной восемьсот пикселей, незачем хранить его в четырёх тысячах. Сначала уменьшай размер, потом подбирай качество.

Поворот. Если картинка лежит на боку — например, фото с телефона, у которого сбились метаданные ориентации, — её можно повернуть прямо в интерфейсе, не открывая редактор.

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

Несколько кодеков на выбор. Под словом «сжать» Squoosh скрывает несколько разных движков сжатия для каждого формата, включая усиленные варианты вроде MozJPEG для JPEG и OxiPNG для PNG — они жмут эффективнее стандартных, которыми пользуются обычные редакторы. Новичку не обязательно разбираться в различиях: выбирай WebP, и этого достаточно. Но если однажды захочется выжать ещё несколько процентов — знай, что они там есть.

Всё это остаётся в рамках одной философии: картинка меняется только технически, её содержимое остаётся прежним. Это не редактор и не генератор — это аккуратная упаковка уже готового результата.

Как встроить сжатие в работу над проектом

Сжатие картинок приносит пользу только тогда, когда это привычка, а не разовый подвиг. Вот как встроить его в обычный процесс, если ты делаешь учебный или личный проект.

Правило «ни одного сырого файла». В папку проекта попадают только оптимизированные изображения. Исходники в полном качестве хранятся отдельно — в другой папке, которая на сайт не попадает. Тогда не будет ситуации, когда «эта картинка уже сжата или ещё нет».

Проход перед публикацией. Собрался выкладывать новую версию — пробегись по новым картинкам: обложка, скриншоты, иконки. Каждая проходит через Squoosh за пару минут. Для «Змейки» это обычно три-четыре файла: иконка приложения, обложка страницы-визитки и пара скриншотов игрового процесса.

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

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

Чек-лист «Картинка готова к публикации»

• Картинка полностью готова и больше не будет редактироваться.
• Исходник в полном качестве сохранён отдельно от проекта.
• Размер в пикселях не больше, чем реально нужно на странице.
• Формат выбран осознанно: WebP по умолчанию, AVIF для самых тяжёлых, JPEG как запасной, PNG только для точной графики.
• Качество проверено глазами на ползунке «до/после» — артефактов на важных деталях нет.
• Вес результата разумен: обложки и фото — килобайты, а не мегабайты.
• Сжатый файл лежит в проекте, исходник — вне его.

Частые ошибки при сжатии картинок

Напоследок перед вопросами — несколько типичных промахов, которые легко избежать, если знать о них заранее.

Публикация «как есть». Самая частая ошибка — взять скриншот или экспорт из редактора и сразу положить на сайт, минуя оптимизацию. Такие файлы почти всегда переупакованы в PNG и весят в пять-пятнадцать раз больше необходимого.

Сжатие уже сжатого. Каждый проход через сжатие с потерями добавляет искажения. Если взять JPEG, прогнать через Squoosh, потом отредактировать и прогнать ещё раз — качество будет деградировать с каждым кругом. Правильный цикл: правишь всегда исходник, сжимаешь один раз, в самом конце.

Лишние пиксели. Картинка шириной четыре тысячи пикселей, показанная в блоке шириной шестьсот, грузит канал впустую. Сначала уменьшай размер, потом сжимай.

Пережатие ради цифры. Гнаться за минимальным весом, опуская качество до заметных артефактов, не стоит: экономия в пятьдесят килобайт не окупает «мыльную» обложку. Ориентир — глаза на ползунке «до/после», а не число само по себе.

Игнорирование форматов. Оставить всё в JPEG «по привычке» — значит добровольно отказаться от двадцати-сорока процентов экономии, которые даёт WebP без видимых потерь.

Частые вопросы

Squoosh действительно бесплатный? В чём подвох?

Подвоха нет: это открытый проект команды Google Chrome, созданный чтобы показать возможности современных браузеров и форматов изображений. Он не просит регистрацию, не ограничивает число файлов и не вставляет водяные знаки. Сжать фото онлайн бесплатно можно сколько угодно раз — обработка идёт на твоём компьютере, поэтому сервису неважно, сколько картинок ты прогнал. Исходный код проекта открыт, так что «бесплатность» здесь не маркетинговая ловушка, а свойство самого проекта.

Куда загружаются мои картинки?

Никуда. Это необычно для онлайн-сервиса, но Squoosh работает полностью в браузере: файл читается с твоего диска, сжимается процессором твоего компьютера и сохраняется обратно. Можешь проверить сам — отключи интернет после загрузки страницы, и всё продолжит работать.

Сжатие портит качество картинки?

Зависит от настроек. При умеренном качестве (для фото это ориентировочно 75–85) разница с оригиналом не видна глазу, а вес падает в разы. Если выкрутить сжатие на максимум, появятся заметные артефакты — размытие мелких деталей, «квадратики» на градиентах. Поэтому в Squoosh и есть ползунок сравнения «до/после»: он позволяет остановиться ровно на той границе, где качество ещё устраивает.

Что лучше для сайта: WebP или AVIF?

Для большинства случаев — WebP: он поддерживается практически всеми современными браузерами и даёт отличное сжатие. AVIF жмёт ещё сильнее, но поддержка чуть уже, а кодирование медленнее. Практичная стратегия: используй WebP как основной формат, а AVIF пробуй на самых тяжёлых картинках, проверив поддержку на caniuse.com.

Нужно ли сжимать картинки, если их всего две на странице?

Да. Даже одна неоптимизированная обложка на пару мегабайт может стать самым тяжёлым элементом всей страницы и заметно замедлить её загрузку на мобильном интернете у реального посетителя. Сжатие занимает пару минут, так что порог «когда уже стоит» здесь практически нулевой: если картинка идёт на сайт — она идёт через Squoosh.

Squoosh умеет менять размер картинки или обрезать её?

Изменять размер в пикселях — да, и это стоит делать, если картинка сильно больше места, где она будет показана. А вот обрезать кадр, убрать фон или поправить цвета в нём нельзя: это не редактор. Для таких задач картинку сначала готовят в другом инструменте, а в Squoosh несут уже финальную версию.

Заключение

Squoosh — это обязательный последний шаг перед публикацией любой готовой картинки на сайте: бесплатный, без установки и регистрации, работающий локально в браузере и потому безопасный даже для конфиденциальных изображений. Пара минут на файл — и страница грузится быстрее, поисковики довольны, а посетители не уходят, не дождавшись обложки.

При этом Squoosh не генератор и не редактор: если исходной картинки ещё нет, сначала понадобится генератор вроде Midjourney или Nano Banana (о других вариантах — в разборе Шедеврума), а Squoosh возьмёт готовый результат и подготовит его к загрузке на сайт. Порядок всегда один: сначала создать и отредактировать, потом — один раз сжать и опубликовать.

Попробуй прямо сейчас: возьми самую тяжёлую картинку из своего проекта, прогони её через squoosh.app и сравни вес до и после. Скорее всего, результат удивит — и следующие картинки ты будешь сжимать уже на автомате. Добавь этот шаг в свой процесс один раз — и он станет такой же привычкой, как сохранение файла.