Squoosh — бесплатный сервис, который сожмёт любую картинку без потери качества
3 марта 2022 Веб-сервисы
Мощный инструмент с живым превью и массой настроек, который даст фору платным приложениям.
Если вы часто загружаете изображения для встраивания на сайт, в блог или в документы, то наверняка знаете, что размер фото имеет значение. Сжать картинку не проблема, но не потерять при этом в качестве довольно сложно. Сервис с говорящим названием Squoosh может в пару кликов оптимизировать снимок, наглядно оценив, как те или иные опции повлияют на итоговый результат и размер.
Для загрузки изображения достаточно перетащить его в окно браузера или вставить из буфера обмена. Примечательно, что операции с файлами осуществляются локально на вашем устройстве — после загрузки страницы не нужен даже интернет. К тому же сервис имеет открытый исходный код, доступный на GitHub.
Особенность Squoosh в невероятном количестве настроек, которому позавидуют даже специализированные настольные приложения.
Всё пространство окна занимает изображение. С помощью панели инструментов внизу легко повернуть и отмасштабировать картинку, а также включить подложку. Двигая вертикальный ползунок, можно наглядно сравнивать части фото. А панели справа и слева содержат все настройки, каждая из них отвечает за свою часть снимка. В нижнем углу сразу отображается размер файла и процент, на который он уменьшился в сравнении с оригиналом.
Оптимизация файла осуществляется тремя способами: изменением разрешения, сужением цветового спектра и, собственно, сжатием. После включения соответствующего тумблера, например Resize, появляются дополнительные настройки. Доступны пресеты, ручные установки, выбор метода масштабирования и вспомогательные опции.
Основной интерес представляет раздел Compress.
Настроек здесь очень много. Есть целых девять алгоритмов с отдельными параметрами у каждого, а плюс к этому ещё и расширенные конфигурации у некоторых. Если никак не можете определиться, какой пресет лучше, то вместо оригинала слева можно запустить изменение с другими настройками и сравнивать между собой уже сжатые варианты.
Squoosh полностью бесплатен и не содержит рекламы. Сервис работает в любых браузерах, включая мобильные.
Попробовать Squoosh →
Читайте также 🖥🖼📁
- 15 лучших графических редакторов, которые не стоят ни копейки
- 5 сервисов для быстрой оптимизации изображений перед публикацией
- Imgbot — простой редактор изображений у вас в браузере
- 3 способа уменьшить размер документа в MS Word
- Resizing App — простой онлайн-инструмент для работы с изображениями
Как оптимизировать картинки для сайта
Изображения на сайте не просто иллюстрируют текст, но и влияют на трафик.
Если картинки долго загружаются или залиты в плохом качестве, это негативно скажется на поведении пользователей. Правильная оптимизация поможет этого избежать — пользователь часто не вчитывается в текст, а скроллит страницу, и качественная иллюстрация привлекает его внимание.
Оптимизировать изображения нужно, чтобы они меньше весили и быстрее загружались.
Как оптимизировать изображения
Чтобы изображение оптимизировалось, нужно правильно задать формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.
Формат
Google индексирует картинки в форматах JPEG, PNG, GIF, BMP, SVG и WebP. Яндекс — JPEG, PNG и GIF. Подробнее о том, как Яндекс индексирует изображения, можно узнать в справке.
JPEG — подходит для портретных и пейзажных фотографий, где важна цветопередача. Есть также JPEG 2000 и JPEG XR. Они сжимают изображения ещё сильнее, чем обычный JPEG, но пока эти форматы поддерживаются не всеми браузерами;
PNG — для сложных графических элементов, в которых нужно сохранить прозрачность и тени;
GIF — для анимации и мелких элементов: иконок, кнопок и так далее;
BMP — для растровых изображений;
SVG — для векторной графики в логотипах и значках;
WebP — сохраняет высокое качество изображений небольшого размера.
Качество
Чем качественнее будет картинка, тем больше пользователей обратит на неё внимание и тем лучше она проиндексируется.
Следите, чтобы при сжатии графика не испортилась и изображение было привлекательным и чётким.
Размер
От того, какого размера иллюстрация и сколько она весит, зависит скорость загрузки и индексация страницы.
Укажите ширину и высоту изображения в CSS, чтобы поисковик быстрее проиндексировал страницу. Оптимальный размер внутри страницы — в районе 300 px. Если изображение нужно растянуть на всю ширину экрана — 1920 px.
Приемлемый вес картинки — от 200 КБ до 1 Мб. Вес меньше 200 КБ сделает картинку некачественной, а изображение больше 1 Мб уже будет медленно загружаться.
Узнать размер и вес иллюстраций можно благодаря аудиту сайта от Serpstat:
Атрибуты alt и title
Название атрибута alt — сокращение от alternative. Это название изображения, которое покажется на месте картинки, если она не прогрузится. То есть это альтернативная, исходя из названия, информация, которую пользователь узнает об изображении.
Именно благодаря alt картинки попадают в выдачу поисковиков. Название должно содержать в себе три-четыре слова и соответствовать тому, что изображено. Желательно, чтобы в него входили ключевые слова.
Alt — это не то же самое, что название файла. Атрибут прописывается уже в коде, а название — перед загрузкой на сайт. Но назвать изображение тоже нужно правильно. Например, если на иллюстрации — аэропорт Шереметьево, назовите файл SVO-airport.jpg, а не именем, которое присвоила система.
Так alt выглядит в коде изображения
Второй атрибут — title — показывается, если просто навести курсор на изображение, даже если оно прогрузилось. Эта настройка не так обязательна, как alt, но всё же с её помощью картинка может косвенно продвигаться — на изображении с текстом пользователи останавливают внимание чуть дольше.
Так title выглядит на сайте
Подписи
Если alt и title — подписи, которые появляются при каком-то действии, то обычная подпись сопровождает изображение всегда.
Изображение с подписью. Кстати, текст, который вы сейчас читаете — тоже пример подписи
Подписи помогают оптимизировать картинку по двум причинам:
- даже если пользователю лень читать полный текст, при скролле страницы он задержит взгляд на подписях;
- в подпись можно добавить ключевые слова, которые заметит поисковик.
Чтобы подпись помогла не только оптимизации, но и читателю, напишите в ней что-нибудь полезное и не противоречащее иллюстрации.
Sitemap-файл
Sitemap — это карта сайта в виде кода, по которому можно читать, где находятся те или иные объекты. Чтобы поисковики проиндексировали труднодоступные изображения (например, загруженные с помощью JavaScript), их нужно прописать в sitemap-файле в формате XML.
В коде это выглядит так:
Подробнее о том, как настроить sitemap-файл, можно узнать в справках Яндекса и Google.
Разметка OpenGraph
Материалы, опубликованные на сайте, можно продвигать также с помощью соцсетей.
Чтобы на него обратили внимание в новостной ленте, пост со статьёй нужно красиво оформить. В этом помогает разметка OpenGraph.
Если OpenGraph есть на сайте, то при публикации в соцсетях автоматически заливается изображение нужного размера, а также правильные заголовок и ссылка. Это повышает привлекательность поста.
Пост со статьёй на OpenGraph
Материал не на OpenGraph опубликуется в соцсети в сжатом виде — если нажать на изображение, оно будет вести на сайт, и картинку не получится посмотреть полностью, не перейдя по ссылке.
Подробная инструкция, как настроить OpenGraph, есть у Яндекс.Помощи.
CDN
Если страница медленно загружается, это может привести к потере аудитории и, как следствие — убыткам. Кроме веса контента, на скорость загрузки влияет географическая удалённость сервера. Чтобы сайт открывался одинаково быстро в любой точке мира, можно использовать сети доставки контента (Content Delivery Networks), которые распределяют нагрузку на один сервер.
Кроме того, CDN улучшает вертикальные поиски — к ним относится поиск по картинкам и видео. Однако поисковик может индексировать страницу с изображением не на вашем сайте, а на том сервере, который закэшировал картинку. Это означает, что фактически изображение расположено не у вас и из-за этого вы теряете трафик.
Чтобы этого не произошло, стоит создать поддомен для CDN и размещать изображения на нём.
Где сжать изображение и не потерять качество
Есть много онлайн-сервисов, которые качественно оптимизируют изображения. Расскажем о нескольких из них.
I love image
Сжимает картинки форматов JPG, PNG и GIF.
Image Compressor
Сжимает одновременно до 20 изображений форматов JPEG и PNG.
EzGIF
Как понятно из названия, этот сервис оптимизирует гифки.
Imagifiy
Позволяет оптимизировать все картинки на сайте сразу.
Compressor
Сервис, в котором можно выбрать — нужно ли искажать качество изображения или нет. Сжимает картинки на 90%.
Вывод
Изображения не просто делают контент разнообразнее, но и помогают сайту ранжироваться. Для этого нужны качественные, нетяжёлые по весу и небольшие по размеру картинки.
Оптимизируя изображения, не забудьте настроить формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.
Сжать иллюстрации можно с помощью сервисов, которые специализируются на разных форматах или расположениях изображений.
Онлайн-компрессор изображений
Загрузить файлы
Перетащите сюда свои файлы
С точки зрения цифровых файлов сжатие — это процесс кодирования информации с использованием меньшего количества битов, чем в исходном файле. Проще говоря, это означает преобразование большого файла в файл меньшего размера.
Существует два типа сжатия: без потерь и с потерями. Сжатие без потерь — это когда инструмент сжатия удаляет пустые, ненужные или дублированные биты из исходного файла.
В результате получается файл меньшего размера, который имеет то же качество, что и оригинал. Сжатие с потерями — это когда компрессор удаляет лишние или неважные биты из исходного файла. Это приводит к меньшему размеру файла, но с более низким качеством. При сжатии с потерями размер конечного файла будет зависеть от того, с какой потерей качества вы согласны.
Зачем вам сжимать изображения?
В зависимости от источника изображения файл может быть довольно большим. Например, JPG с профессиональной цифровой зеркальной камеры может занимать десятки мегабайт. В зависимости от ваших потребностей, это может быть слишком большим. Сжатие этого изображения было бы очень полезно.
Точно так же у вас могут быть большие изображения на вашем телефоне. Эти изображения могут занимать много места на жестком диске и мешать вам делать больше фотографий. Их сжатие может освободить больше внутренней памяти, решив эту проблему.
Как работает компрессор изображений?
Наш инструмент использует сжатие с потерями для сжатия файлов изображений.
Он поддерживает три типа файлов: PNG, JPG/JPEG и GIF. Эта система интеллектуально анализирует загруженные изображения и уменьшает их до минимально возможного размера файла без негативного влияния на общее качество.
Для начала вам нужно загрузить несколько изображений, которые вы хотите сжать. Вы можете загружать до 20 изображений одновременно, и вы можете свободно смешивать и сочетать типы файлов. Другими словами, вам не нужно загружать только JPG и ждать загрузки PNG. Наш сервер может автоматически анализировать файлы для вас.
Сначала нажмите кнопку «Загрузить файлы» и перейдите к своим изображениям. После загрузки вы увидите миниатюры для всех ваших изображений, поступающих в очередь. Вы сможете видеть их прогресс в режиме реального времени, когда наш сервер анализирует их.
Как уже говорилось, наш сервер определит идеальную степень сжатия, чтобы уменьшить размер файла, не снижая слишком сильно качество. Однако, если вам нужно большее или меньшее сжатие, вы можете его контролировать.
Коснитесь миниатюры изображения, которое хотите изменить. Теперь переместите ползунок качества вверх или вниз, пока не остановитесь на параметрах размера/качества файла, которые вы считаете правильными. Когда вы закончите, нажмите кнопку «ПРИМЕНИТЬ» и перейдите к повторению этих шагов со следующим изображением.
Если вас устраивает текущий пакет, нажмите кнопку «СКАЧАТЬ ВСЕ». Это загрузит ZIP-файл со всеми вашими сжатыми изображениями. Если вам не нужны все они, вы можете нажать кнопку «СКАЧАТЬ» под каждой миниатюрой вместо того, чтобы загружать каждую по отдельности.
Готовы к следующей партии? Нажмите кнопку «ОЧИСТИТЬ ОЧЕРЕДЬ» и начните заново. Вы можете использовать этот инструмент столько раз, сколько необходимо, бесплатно.
Безопасно ли сжимать изображения?
Не нужно беспокоиться о безопасности нашего бесплатного сервиса. Ваши исходные файлы останутся нетронутыми в вашей системе, поэтому, если вы недовольны своими сжатыми файлами, вы можете просто попробовать еще раз.
Кроме того, наша автоматическая система удаляет все данные через час, поэтому вам не нужно беспокоиться о безопасности ваших данных.
TinyPNG — API разработчика
Начало работы
Как только вы получите свой ключ, вы можете сразу начать сжимать изображения. Официальные клиентские библиотеки доступны для Ruby, PHP, Node.js, Python, Java и .NET. Вы также можете использовать плагин WordPress для сжатия изображений JPEG и PNG.
Сообщество также создало большое количество сторонних надстроек с помощью Developer API.
Вы также можете создать собственную интеграцию с любым клиентом HTTP(S). Сервер сожмет ваше изображение и ответит URL-адресом, по которому вы сможете получить результат.
curl --user API: YOUR_API_KEY \
--data-binary @ неоптимизированный.png -i https://api.tinify.com/shrink
Функции
Тот же API для изображений WebP, JPEG и PNG
API сжимает изображения WebP, JPEG и PNG.
Вам нужно только загрузить исходное изображение и загрузить результат. Все остальное происходит автоматически .
Загрузить напрямую или указать URL-адрес изображения
Вы можете либо загрузить изображений напрямую, либо указать URL-адрес изображения, которое вы хотите сжать.
Преобразование изображений в WebP, JPEG или PNG
(новое)Преобразование изображений в другой формат или запросите у API наименьший формат изображения! Изображения с прозрачным фоном можно залить указанным цветом.
Сохранить метаданные
Вы можете сохранить информацию об авторских правах , местоположение GPS и дату создания в сжатых изображениях JPEG. Для изображений PNG информация об авторских правах может быть сохранена.
Amazon S3 и Google Cloud Storage
(новый) Вы можете указать API сохранять оптимизированные изображения непосредственно в корзинах Amazon S3 или Google Cloud Storage .
При этом вы также можете установить собственные заголовки Cache-Control и Expires.
Идеальное изменение размера изображения
API может изменять размер ваших изображений, а также оптимизировать их. Вам нужно только один раз загрузить оригинал, а затем сгенерировать изображения нужных размеров. Изменение размера включает корректное масштабирование гаммы, коррекцию краев бикубической прозрачности и естественное повышение резкости изображения.
Обнаружение области интереса
Воспользуйтесь преимуществами интеллектуальной обрезки для создания миниатюр с различными соотношениями сторон . API изменит размер ваших изображений и обрежет части, которые визуально наименее интересны.
Объяснение обнаружения области интереса
загрузите исходное изображение …… обнаружена область интереса …… изображение масштабируется и обрезаетсяОбнаружение вырезания изображения
(новый) Мы добавлен новый алгоритм для обнаружения отдельно стоящих объектов на однотонном фоне.
API добавит фоновое пространство или удалит лишние области при изменении соотношения сторон. Таким образом, объект на вашем изображении останется отдельно стоящим и не будет обрезан по краям при изменении размера.
Объяснение изменения размера вырезанных изображений
загрузите исходное изображение …… обнаружен отдельно стоящий объект …… применяется новый размер изображенияЦены
Вы платите только за то, что используете. Первые 500 компрессий каждый месяц бесплатны. ты будешь оплачивается только как , если вы сжимаете более 500 изображений.
Нет абонентской платы и нет минимальной платы . Плата взимается только за успешное сжатие.
Images uploaded with APIPrice per unit
- First 500 images per month free
- Next 9 500 image compressions $0.
