Как оптимизировать изображения для интернета с помощью Squoosh.app

Ты, вероятно, уже знаешь об оптимизации изображений.

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

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

Но теперь настало время что-то делать. Твой заклятый враг… то есть… твой ближайший конкурент абсолютно разгромил твой сайт в войне за производительность. Пришло время отбиваться.

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

В этом руководстве мы рассмотрим, как использовать Squoosh для сжатия изображений и сокращения времени загрузки. Давай начнем!

Как Оптимизировать Изображения С Помощью Squoosh за 30 Секунд

Перейдем сразу к делу.

Ты можешь начать оптимизировать изображения для своего сайта очень быстро.

Перейди на https://squoosh.app.

Кликни на большой розовый объект в верхней части страницы и выбери изображение, которое хочешь сжать.

Затем ты перейдешь на экран предварительного просмотра с панелью настроек в правом нижнем углу.

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

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

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

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

Вуаля, готово.

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

Подробнее о Squoosh

Это краткая версия, но Squoosh предлагает гораздо больше.

Этот инструмент для сжатия изображений с открытым исходным кодом был разработан специалистами из Google. Он доступен как в виде веб-приложения, так и в виде дополнения для браузера Chrome.

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

Squoosh поддерживает PNG, JPG, TIFF, GIF и множество других форматов. Каждая версия доступна для использования бесплатно, и приложение обрабатывает сжатие локально. Это хорошие новости для конфиденциальности, потому что изображения никогда не покидают твой компьютер.

Как Использовать Squoosh Как Профессионал

Еще одна замечательная особенность Squoosh заключается в том, что он предоставляет множество возможностей управления. Тебе просто нужно знать, как управлять панелью управления.

Давай быстренько осмотримся.

Когда ты впервые загружаешь изображение в Squoosh, ты увидишь всего четыре опции на панели управления:

Изменение размера

Если ты планируешь использовать изображение для миниатюры, не нужно полное разрешение. Ты можешь переключить этот тумблер, чтобы изменить размер изображения.

Укажи количество пикселей, которое ты хочешь, но оставь выбранными настройки по умолчанию, если у тебя нет веских причин поступить иначе. Убедись, что выбрана опция «Сохранить пропорции», чтобы изображение не искажалось!

Сократить Палитру

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

Этот ползунок «Dithering»? Он фактически создает шумовой рисунок, чтобы скрыть уменьшенную цветовую палитру.

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

Формат

Под меткой «Сжать» ты можешь выбрать формат вывода для своего изображения. Варианты делятся на две основные категории.

• Lossy (например, JPG, GIF): Эти форматы удаляют незначительные части изображения для экономии места. Обычно ты не заметишь разницы, если тебе не нужно что-то с очень высоким разрешением.
• Lossless (например, PNG, AVIF): В отличие от них, безубыточные форматы находят способы уменьшить размер файла, не влияя на качество изображения.

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

Качество

Если ты выберешь формат с потерями, ты также увидишь этот ползунок. Он идёт от 0 (полное сжатие изображения) до 100 (без изменений).

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

Если ты переводишь в WebP, ты также увидишь ползунок «Усилия». Это управляет тем, насколько тщательно Squoosh будет анализировать твоё изображение перед тем, как решить, как применить сжатие. Выбери большее число, если у тебя есть детали, которые ты хочешь сохранить.

Расширенные Настройки

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

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

Быстрые Советы для Улучшения Работы со Squoosh

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

Но мы видим тебя, читатель. Ты хочешь стать богом сжатия изображений, не так ли?

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

• Перетаскивание: Не беспокойся о меню файлов. Просто перетащи своё изображение прямо в Squoosh.
• Знай свои форматы: Используй WebP для современных браузеров, MozJPEG для фотографий и OptiPNG для графики. Помни, AVIF — это новичок на рынке; проверь, какие браузеры с ним справляются.
• Размер имеет значение: Сжимай изображения, думая о качестве, а не только о размере файла. Если твоё изображение из шедевра превращается в детский рисунок, отступи и настрой параметры.
• Усилия важны: Увеличь ползунок усилий для PNG и WebP, чтобы выжать максимум из размера файла, не сильно влияя на качество. 
• «Уменьшение палитры» — твой друг: Сколько различных цветов содержит твоё изображение? Если оно достаточно простое, ты можешь сэкономить много места, передвинув ползунок «Уменьшение палитры» влево.

Помни, каждый сохранённый мегабайт означает меньшее время ожидания для твоих пользователей!

Как Управлять Изображениями На Сайте Для Повышения Производительности

Хотя Squoosh может уменьшить размеры ваших изображений, чтобы они стали более удобными, это не универсальное решение.

Следуй этим рекомендациям, чтобы убедиться, что сжатые изображения обеспечивают ожидаемый прирост производительности!

• Используй CDN: Сети доставки контента (CDN) оптимизированы для медиа и снимают нагрузку с серверов твоего хоста.
• Тщательно подумай о типах файлов: Легко сделать все изображения одинаковыми. Но твой выбор файла должен соответствовать требованиям каждого изображения на твоем сайте.
• Удали ненужные метаданные: Нужно ли твоему изображению таскать за собой информацию о местоположении и камере? Скорее всего, нет.
• Попробуй использовать спрайты: Вместо использования одного большого изображения с повторяющимся узором, возможно, ты сможешь использовать маленький спрайт несколько раз. Это действительно может ускорить процесс!

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

• Прощай, JPG: Как оптимизировать изображения для современного Интернета (WebP, SVG и другие)
• Как исправить 16 распространенных проблем с изображениями в WordPress
• Распространенные проблемы с загрузкой изображений в WordPress и способы их решения (5 методов)

Альтернативы Squoosh: Лучшие Инструменты Для Сжатия Изображений

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

• TinyPNG: Это веб-приложение мгновенно сжимает изображения, сохраняя при этом впечатляющее качество. Бесплатно для пакетной загрузки до 20 изображений; вы можете разблокировать больше за $39 в месяц.
• ShortPixel: Если у тебя есть сайт на WordPress, этот плагин позволяет сжимать изображения прямо из административной зоны. Бесплатно до 100 изображений в месяц.
• ImageOptim: Для владельцев Mac. Это приложение с открытым исходным кодом позволяет сжимать пакеты изображений на вашем компьютере. И это совершенно бесплатно!
• Kraken.io: Этот мощный инструмент для сжатия изображений работает подобно Squoosh, хотя и без красивого предварительного просмотра. Ах да, и он бесплатен только для файлов размером до 1 МБ.
• JPEGmini: Работаешь с большим количеством фотографий высокого качества? С помощью быстрого перетаскивания это настольное приложение позволяет уменьшить размер файлов JPG на до 80%.

Сделай свой сайт более плавным уже сегодня

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

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

Хочешь что-то, что обеспечит более надежную работу? В DreamHost все наши тарифы предоставляют гарантию 100% времени работы и неограниченную пропускную способность. Это значит, что твой сайт никогда не будет терять стабильность под нагрузкой.

Хочешь попробовать? Зарегистрируйся сегодня, чтобы ощутить разницу!