Оптимизация изображений для сайта онлайн – Online Image Сompressor

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

Список сервис для быстрого перехода к его описанию в статье:

Содержание

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

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

1. Kraken.io

Я пользуюсь данным сервисов регулярно. Он позволяет сразу сжать несколько изображений: можно загрузить ZIP архив со всеми изображениями для сжатия, можно сделать импорт из Google диска или с облачного хранилища Dropbox.

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

Подведем итоги того, что может этот kraken.io:

2. Tinypng.com

Довольно популярный сервис сжатия JPEG и PNG изображений. Позволяет одновременно загрузить до 20 файлов.

В сравнении с kraken.io на tinypng.com вы можете загрузить изображение до 5 Мб.

Помимо онлайн сервиса на данном сайте также присутствует плагин для WordPress для автоматического сжатия изображений и расширение для CMS Magento.

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

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

3. Compressor.io

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

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

Давайте посмотрим на возможности данного ресурса:

4. Imagecompressor.com

Мне понравился сервис imagecompressor.com тем, что он позволяет регулировать качество изображений.

Регулировка осуществляется с помощью ползунка, примерно также, как это можно делать в Photoshop при сохранении изображения.

Есть массовая загрузка, но она ограничена 20 изображениями.

Соберем все возможности этого сервиса в одну таблицу:

5. Jpeg-optimizer.com

Не самый современный дизайн сайта, но функцию свою сервис выполняет.

Можно точно выставить уровень сжатия. Для web хватает значения 80 в пункте «Compress Image».

Помимо прямой функции сжатия сервис jpeg-optimizer.com позволяет сразу изменить размер изображения.

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

6. Imagerecycle.com

Интерфейс сервиса imagerecycle.com напоминает чем-то kraken.io (первый сервис в сегодняшней статье).

Есть 2 варианта сжатия изображений: «Best saving» (сжатие с максимальным сохранением качества) и «Original Quality» (сжатие без потери качества изображения).

Есть русский язык, но реализован он с помощью сервиса Google Translation, поэтому могут быть странности при переводе.

Ееще хочу отметить, что есть возможность сжатия PDF файлов.

А сейчас посмотрим что умеет этот сервис:

7. Imagify.io

Великолепный сервис для сжатия изображений, где присутствует 3 вида сжатия изображений: «Normal», «Aggresive» и «Ultra».

Есть 2 варианта сжатия изображений: «Best saving» (сжатие с максимальным сохранением качества) и «Original Quality» (сжатие без потери качества изображения).

Но вот что хочется отметить на этом сервисе: он позволяет ввести URL страницы и сжать все изображения на странице, а затем скачать одним архивом.

Его сводная таблица будет выглядеть следующим образом:

БОНУС. Webspeedtest.cloudinary.com

В качестве бонуса хочу вам рассказать о сервисе webspeedtest.cloudinary.com.

Последний сервис imagify.io, который мы рассмотрели в данной статье позволял анализировать все изображения на странице.

Но сервис webspeedtest.cloudinary.com позволяет выбирать между расширениями и показывает разницу, если бы изображение было сжато в PNG, JPEG или WEBP формате:

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

Когда вы запустите анализ своего сайта, то самым выигрышным вариантом будет формат WEBP. Это неудивительно.

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

Вывод

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

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

Сайта без изображений уже тяжело представить, но в то же время, это очень сильно влияет на скорость загрузки, ведь интернет все еще не такой быстрый и нужно помнить о 3G соединениях, где загрузка занимает достаточное количество времени.

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

Если остались вопросы по использованию сервисов или знаете также хорошие онлайн сервисы сжатия изображений без потерь, то пишите в комментариях ниже.

Успехов!

С Уважением, Юрий Немец

sitehere.ru

7+ превосходных инструментов для оптимизации изображений / Habr

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

1. Smush.it!

Smush.it использует методы оптимизации для конкретного формата изображения, чтобы удалить ненужные байты из файлов изображений. Она представляет собой инструмент оптимизации «без потерь», что означает, что оптимизирует изображение, не меняет внешний вид или визуальное качество. Smush.it работает на веб-странице. В приложении сообщается, сколько байт будет сэкономлено за счет оптимизации изображения страниц и предоставляется загружаемый файл Zip с обработанными файлами.

2.RIOT

RIOT — аббревиатура от Инструмент Радикальной Оптимизации Изображений. Оптимизатор картинок для пользователей Windows, который доступна как отдельное приложение или как расширение IrfanView. Приложение поддерживает JPG, PNG и GIF файлы и способно вырезать изображение метаданных для дальнейшего сокращения файла. Также имеет утилиты, позволяющие осуществлять основные виды редактирования изображений, такие как масштабирование и поворот и отражение.

3.PNGOUT

PNGOUT является общедоступным, бесплатным, без излишеств, инструментом для оптимизации ваших изображений. PNGOUT можно запустить в командной строке Windows или диалоговом окне Выполнить. Она имеет широкий выбор настроек способов сжатия файлаов. Большинство из популярных графических форматов файлов (таких как JPG, GIF и PNG) поддерживаются.

К pngout можно добавить ключик /zl121 для совместимости со старыми парсерами png.
Чтобы перепаковать jar можно использовать kzip с тем же ключом /zl121.

И pngout, и kzip написал Ken Silverman.

4.Online Image Optimizer

Online Image Optimizer от Dynamic Drive представляет собой веб-инструмент для сжатия изображений. Вы можете указать ссылку на изображение, которое вы хотите оптимизировать, или загрузить его из локальной папки. Кроме оптимизации, вы можете выбрать тип итогового файла (по умолчанию получается тот же тип файла). Есть ограничение по размеру файла — 300 КБ.

5.SuperGIF

SuperGIF это бесплатная утилита для Windows и Mac OS, которая помогает оптимизировать GIF. Имеет интуитивно понятный и простой пользовательский интерфейс, может сжимать GIF на 50% и больше. В бесплатной версии можно оптимизировать одновременно только одно изображение, но в остальном имеет те же функции, что и коммерческая версия ($ 29,95), за исключением пакетной обработки.

6.PNGGauntlet

PNGGauntlet — это .NET приложение для PNGOUT. Оно может быть использовано для преобразования JPG, GIF, TGA, PCX, BMP и оптимизации содержимого PNG файлов. PNGGauntlet идеально подходит для тех, кто не привык работать через командную строку, но все же хотел бы воспользоваться улучшенный алгоритм оптимизации PNGOUT.

7.SuperPNG

SuperPNG — бесплатный плагин для Photoshop, позволяющий сохраненять PNG в значительно более компактном виде. Она также включает в себя некоторые продвинутые функции, например поддержку 16-битного цвета, переменного сжатия, гамма-коррекции, и метаданных.

P.S. А теперь — то, что посоветовали хабровчане.

8.Pngcrush (спасибо UUSER)

Картинки нет, так как данный плагин работает из командной строки. Работает в UNIX, LINUX а также в MS-DOS.
Оптимизирует PNG. Использует различные методы сжатия, может удалять нежелательные вспомогательные блоки.
Pngcrush имеет открытый исходный код.

9.OptiPNG (спасибо Razunter)

OptiPNG — как и следует из названия, оптимизатор PNG. Эта программа также преобразует другие форматы (BMP, GIF, PNM и TIFF) в оптимизированный PNG, и выполняет проверку целостности и исправлений.
Имеет открытый исходный код, распространяется по zlib/libpng лицензии.

10.punypng (спасибо Razunter)

Веб- сервис по сжатию PNG, JPEG и GIF.
Из последних обновлений:
Предпросмотр качества итогового изображения.
Удаление вашего изображения с сервера после 15 мин. после конвертации.
Поддержка прозрачности.

11.ImageOptim (спасибо Conquearse)

Приложение для Mac-OC. Обрабатывает PNG, JPEG и GIF анимацию.
ImageOptim сочетает в себе различные инструменты оптимизации: AdvPNG от AdvanceCOMP, OptiPNG, Pngcrush, JpegOptim, jpegtran от Libjpeg, Gifsicle и опционально PNGOUT.
Открытый исходный код на условиях GPLv2.
Поддерживает удобный drag’n’drop изображений в свое окно.

12. pngre (спасибо homm)

Оптимизатор графики в формате PNG. Также конвертирует GIF и BMP в PNG.
Позволяет тонко вручную или автоматически настроить размер PNG файла.

13. pngquant (спасибо homm)

Работает из командной строки. Умеет только одно, конвертирует 32-х битные PNG с альфа-прозрачностью в 8-и битные палитровые PNG с альфапрозрачностью. Но делает это очень хорошо, много лучше Fireworks, хотя тоже не без проблем.

14. PictureBeaver (спасибо Carl_Linnaeus)
Пример оптимизации:

Автор — Артем Сапегин
PictureBeaver автоматически оптимизирует веб-графику (в форматах PNG, GIF и JPEG), удаляя из файлов вспомогательные данные, которые не влияют на отображение. Обычно удаётся добиться сокращения объёма файлов на 10—30%.
GIF без анимации переводится в PNG, если такие файлы выходят меньше. Для оптимизации используются бесплатные утилиты OptiPNG, jpegtran и Gifsicle.

15. Color quantizer (спасибо Subdivision)

Color quantizer — это небольшая программа позволяющая легко оптимизировать изображения для web.
Основные возможности:

конвертирование в произвольное количество цветов
поддержка записи png8 с прозрачностью
возможность задавать маску качества для важных участков
удобное редактирование палитры
автоматический подбор оптимальных параметров для PNGOUT

16. Gifsicle (спасибо AndrewTishkin)

Это — инструмент для GIF-ок. В основном — для разных UNIX. Портирована и под Win, но эта версия не поддерживается.
Gара примеров:
Обрезаем прозрачные рамки:
gifsicle —crop-transparency src.gif > dest.gif

Сжимаем анимированный (простой тоже можно… на несколько байт 🙂 GIF:
gifsicle -O2 src.gif > dest.gif

17. jpegtran (спасибо AndrewTishkin)

А это — для JPEG. Официальная программа от Independent JPEG Group.

18. Webify (Спасибо zeka)

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

19. PngOptimizer (Спасибо Enot_23)

Очень удобный оптимайзер для Windows.
Ужимает PNG, конвертит в PNG из BMP, GIF, TGA. Позволяет делать PNG-скриншоты.

20. TweakPNG (Cпасибо stalkers)

TweakPNG это низкоуровневая утилита для изучения и изменения PNG файлов й. Для Windows 2000 или выше. Для того, чтобы использовать его, вам нужно хоть немного разбираться в формате PNG.
По словамstalkers здорово помогает с PNG, сохраненным в Photoshop CS2. Дело в том, что версии фотошопа ниже CS3 добавляют всякую фигню в файл, в т.ч. и данные о затемнении. В результате — в ИЕ картинка выглядит темнее, чем в других браузерах, т.к. все другие читали только непосредственно картинку.

С помощью утилиты это можно просто удалить. Еще можно выкинуть комментарии типа «edited in Adobe Photshop». Помимо избавления от глюков, получим также небольшой выигрыш в размере.

habr.com

15 онлайн сервисов оптимизации изображений |

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

Что значит сжать изображение?

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

Вот как раз в этом обзоре мы рассмотрим 15 онлайн сервисов сжатия изображений для сайта в различных форматах и с различными методами сжатия изображения. Тем, кто это делает постоянно уже является просто необходимостью, поэтому просто выбираем для себя некоторые из них и кладем себе в копилку, чтобы потом не искать. С их помощью можно легко делать обработку фотографий онлайн без установки каких-либо программ, согласитесь удобно иметь всегда под рукой бесплатную обработку фотографий. Когда будете просматривать или пробовать эти сервисы, обращайте внимание на возможности каждого из них, потому как они имеют разные возможности и удобства, порой не похожие между собой.

Обзор онлайн сервисов оптимизации изображений

1. OptiPic

Начнем обзор с удобного сервиса, где можно оптимизировать изображение для сайта онлайн, который сразу на главной странице предлагает проверить сжатие изображений на сайте. Этот сервис делает максимальное сжатие изображений на сайте с практически с любой CMS, в том числе может выполнять оптимизацию изображений в вордпресс. Конечно, предоставляется инструкция для подключения любой из предложенных CMS. Качество сжатия отличное, но нужно иметь в виду, что сервис платный, но у вас есть возможность получить скидку и дополнительные мегабайты путем программы скидок, выполнив некоторые условия публикации отзыва, ссылки, описания работы. Вообщем рекомендую к использованию, к тому же если воспользуетесь ссылкой, то получите скидку 10%.

2. IMAGIFY — поддержка форматов JPG, PNG и GIF

А этот сервис сжатия изображений онлайн примечателен тем, что он может сжимать изображения и вручную и оптимизировать изображения wordpress с помощью плагина. Сервис предлагает 3 уровня сжатия и причем достаточно качественное, при регистрации всего дадут 25мб для бесплатного использования, а потом уже за деньги. Причем в бесплатном режиме можно сжать фото без потерь только до 2мб. Есть возможность использовать этот сервис на нескольких сайтах, только для каждого нужно создать свой API ключ. В целом достаточно интересный и удобный сервис как для ручного сжатия так и для оптимизации изображения в WordPress с помощью плагина.

3. Tiny JPG и Tiny PNG

Данный сервис может работать вручную и как плагин, сжать фото онлайн бесплатно на лету. Из ссылок видно, что сервис может сжимать в двух форматах: JPG и PNG, но делает он в ручном режиме без визуального редактора, т.е. просто загрузил и тут же можно скачивать уже сжатую картинку. Можно загружать сразу до 20 штук и оптимизировать размер изображения не более 5мб. Для каждого формата изображений предоставляется отдельная ссылка. Такой вот утонченный подход, но видно, что сервис нацелен для новичков, чтобы было все сразу просто и понятно, но он мне приглянулся стилем панды, ничего лишнего и сверху всё что нужно для сжатия, а если вам нужно почитать о нем, то это находится уже ниже. Он на английском, но это вам не помешает при его использовании.

4. Compressor.io — поддержка форматов JPEG, PNG, GIF, SVG

А этот сервис сжатия онлайн работает только в ручном режиме и предлагает 2 режима сжатия: оптимизация изображений без потери качества (только.jpg и .png), ну и конечно с небольшими потерями. Конечно этот сервис гораздо проще чем предыдущий и поэтому им легко пользоваться, так что освоите вы его за пару минут. Основным его плюсом является его полная бесплатность, ну а на счет качества нужно вам решить самим, т.е. попробовать.

5. Optimizilla — поддержка формата JPEG и PNG

А этот сервис тоже бесплатный, но он имеет немного другой интерфейс, а что именно понравилось, так это то, что можно загрузить до 20 изображений и редактировать их в визуальном редакторе, переходя от одного изображения к другому. Удобство в том, что вы можете сжимать фото в онлайн, глядя сразу на результаты, поэтому некоторым визуальный анализ оптимизации изображений покажется удобной опцией, причем можно при просмотре увеличивать картинки при просмотре рузультатов. Правда поддерживает всего 2 формата, но увы так бывает, что и этого хватает кому-то с головой.

6. EZGIF.COM — поддержка форматов GIF, JPG, PNG, APNG, WebP

А этот сервис можно выделить супер многофункциональностью, потому как он делает много операции с картинками. Он может обрезать и сжать фото онлайн, повернуть, поменять размер, добавить текст, работать с видео и анимацией. Такой мульти-сервис может работать с форматами GIF, JPG, PNG, APNG, WebP и согласитесь, достаточно интересный и мощный, я бы даже его назвал онлайн веб-редактором изображений, который не похож на любые остальные, тем и примечателен. Он хоть и на английском языке, но интерфейс у него достаточно прост и понятен, поэтому у вас не возникнет трудностей с ним.

7. Compressjpeg com — поддержка форматов .jpg и .jpeg

А этот сервис может сжать фото онлайн форматов jpg и jpeg, но он один в один похож на сервис optimizilla.com, я так думаю, что они собраны на одном движке, потому как функционал одинаковый, ну за исключением внешнего оформления и некоторых тонкостей. Даже добавить нечего, можете прочитать про optimizill-у и будет всё ясно. Короче, кто-то у кого-то слямзил и или воспользовались одним и тем же плагином.

8. JPEGmini — поддержка форматов .jpg и .jpeg

Интересный сервис с поштучной загрузкой изображений на английском привлек моё внимание своим визуальным просмотрщиком результата. Он может сжать фото для сайта онлайн и вы можете сразу же глянуть разницу между оригиналом и готовым результатом. После сжатия сервис сразу выдаст результаты показав размер файла до и после. А в остальном такой же простачёк, но нужно заметить, что он предлагает еще и для платформы на Mac и Юникс. Но еще он может подключить сервер для облака Amazon Web Services (AWS) для сжатия изображений, который позволит сжимать изображения на ихнем сервере и использовать их с высокой загрузкой. Понятное дело за это удовольствие нужно платить. Работает сервис форматами .jpg и .jpeg.

9. Online Image Optimizer — поддержка форматов gif, jpg или png

Следующий сервис имеет не очень привлекательный интерфейс, я бы даже назвал его устаревшим, но зато это нивелируется за счет его расширенного функционала. Помимо того, что он делает сжатие фото онлайн, он может быстро сделать иконку сайта, анимированный GIF, есть создатель кнопок, шифрует адрес электронной почты(направленный против сборщиков адресов), может создать файл пароль для htaccess и даже есть простенькие игрушки и это еще не всё… Скорее я устану перечислять, что там есть, но возможности этого сервиса явно широки и выходят за рамки этой статьи. Вообщем, кому интересно, то заходим и изучаем этот немаленький сервис. В итоге это полностью бесплатный и ручной сервис, который может удивить и быть полезным не только в оптимизации картинок.

10. JPEG Optimizer

Этот же сервис выглядит простовато и умеет он всего лишь сжать фото онлайн jpg формата, менять размер, просматривать Exif данные картинки. Работает просто: загружаете фото, он его обрабатывает и тут же показывает результат оптимизации, а если вы еще поставили галочку обрезать его по определенному размеру, то он вам это тоже сделает. Причем покажет результат и всё, нет сравнения с оригиналом. К тому же оптимизирует он зачастую с потерями, что я сразу увидел при выводе результата. Оказался слабоватым сервисом и мне кажется недоработанном без выбора различных вариантов. Может сжимает он хорошо, но регулировать сжатие нужно будет самому, указав перед процедурой степень сжатия изображения вручную от 0 до 99, причем каждый раз смотреть на результат. Если есть такой богатый выбор среди других сервисов, то зачем нужен этот древний вариант.

11. Web Resizer

По названию и функционалу этого сервиса можно сказать, что он может только изменять размер и сжать фото онлайн — качество на высоте. По факту, выбрал картинку, он сжал и тут же он выдал тебе картинку до и после, но после чего можно еще изменить финальный размер хоть несколько раз, кроме того можно изменить и контраст и цветовую палитру, цветную рамку, сделать картинку черно-белой ну и развернуть кратно 90 градусам. А степень оптимизации вы тут сможете поменять в градации от 10 до 100, а так как мини веб редактор самое оно, наверно этот сервис будет удобен тем, кто перед публикацией фото захочет немного подредактировать ее, но разьве что чуток. Многим этот сервис может оказаться полезным, если под рукой нет даже Paint-а. Но здесь есть режим массовой обработки, где можно загрузить несколько картинок, указать параметры и готово. Мне вот только не понравилась скорость этого сервиса, уж очень медленная обработка, но зато он бесплатный и можно загружать одну картинку до 10Мб, а в остальном же по заявленному в пределах нормы.

12. Image Optimizer

Об этом сервисе нужно сказать, что есть возможность скачать и установить программу оптимизации изображений для сайта на свой комп и поддерживает пакетную оптимизацию изображений, просто нажав правой клавишей мыши на папку и выбрать ОПТИМИЗИРОВАТЬ по заранее заданным параметрам. Это так же многим будет удобно, иногда не взирая не небольшие потери качества. А сам сервис выглядит как обычный и простой оптимизатор и ничего лишнего. Еще может обрезать фото по заданным размерам. Сервис настолько прост, что даже не покажет вам результирующую картинку, просто загрузили и скачали с указанием размера до и после сжатия. Надо заметить, что если вы уже сжали картинку, то она выйдет без изменений и еще очень важно, что сервис старается не перебарщивать, т.е. не делает обработку с потерей качества, так сказать в щадящем режиме.

13. IMGonline

Этот украинский бесплатный сервис на русском языке может оказать так же полезным для новичков и для тех, кто в пути так сказать. Количество возможностей выходит за рамки просто оптимизации, причем описание достаточно подробное. Загрузил фото, нажал ОК и готово, вот только просмотр есть при нажатии отдельной кнопки, этакий скрытый режим. Помимо этого можно изменить размер, конвертировать в другие форматы, изменить EXIF данные картинки, применить невероятное количество эффектов, ещё можно вручную откорректировать фотки и к тому же есть инструменты для обработки и преобразования изображений. Вот такой получился богатый мультитул, это почти ручной фотошоп, а не какой-то там Paint, по сути можно грузить фото для обработки фотографий. Меня даже слегка порадовала ширина выбора для обработки изображений, дааа, тут хохлы конечно постарались и с первого взгляда простой интерфейс восполняется шикарным набором для редакции. Я даже не смогу перечислить всех его тонкостей, но кому будет интересно, тот может найти для себя вкусности и использовать их напостоянку. Сервис поддерживает формат JPEG, но в разделе конвертирования есть целая куча других форматов, в которые можно конвертнуть без проблем. Вообщем, стоящий ресурс, так что оцените сами.

14. Kraken

Англоязычный условно-бесплатный сервис Кракен может выполнять оптимизацию изображений для сайта wordpress с помощью плагина и через вэбинтерфейс. В нем нет предпросмотра картинки, также нет финального, просто показываются размеры картинки до и после. Он нас похоже не удивит изяществом, но зато удивляет скоростью обработки, по крайней мере через вэб-интерфейс это происходит достаточно быстро в полуавтоматическом режиме. Выбрал файлы для загрузки (даже десятками) и как только нажали ОК, то они сразу начнут «жариться», спустя пару секунд список готов. Но наверно чем больше список, тем больше приходится ждать, но всё равно быстро. Вот чего нет у других, так это загрузки с Гугл Драйва и Дропбокса, тут можно сказать что они выпендрились. Здесь можно легко сжать фото онлайн без потери качества бесплатно. Интерфейс не напряжный и вполне понятный, но и не простой, пару минут всё таки придется потратить на его освоение. Единственное, что удручает, так это скудность настроек, но они расширятся немного, если вы перейдете в платный PRO вариант.

15. PunyPNG

Punypng условно-бесплатный англоязычный вариант может выполнять оптимизацию изображения онлайн в форматах JPG, GIF и PNG. Но уж очень этот сервис денег хочет, а это сразу видно, сходу возникают трудности с загрузкой изображения, то формат не тот, то размер большой. Может на это и раcсчитано, но как-то это отталкивает. Сходу сразу скажу, что стиль у этого сервиса привлекательный, но функционал простейший и рассчитан на обывателя, но в бесплатном варианте попробовать и оценить получается с трудом, не то чтобы по малу поработать на халяву. Хоть и просят не так много в платной версии, но удивить им просто нечем, т.к. больших возможностей и пестротой выбора он не превосходит предыдущие экземпляры. Я считаю этот вариант темной лошадкой. Ну если только в платном варианте может устроить работа с API, ну так этим не удивить и некоторые раcсмотренные сервисы выше тоже имеют эту опцию.

Итог о сервисах сжатия изображения

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

Для экономии времени порекомендую вам сначала определиться с какими форматами нужно вам работать, затем какие действия нужно делать с изображением (оптимизацию, обрезку, разворот и что вам там еще нужно), а уж потом подбираем по данным параметрам нужный сервис онлайн сжатия изображения.

Удачного использования онлайн сервиса оптимизации изображений!

myborder.ru

Оптимизация картинок для Google PageSpeed / .io corporate blog / Habr

Например, даже на стартовой странице Google Developers графику можно сжать на 71%. Чем меньше весят фотки – тем быстрее грузится сайт. Меньше картинки — меньше трафика — все работает быстрее. Посетители тратят меньше времени – все довольны.

В этом материале подобраны основные инструменты для оптимизации графики.

Серверные инструменты

• Jpegtran сжимает картинки без потерь и удаляет метаданные:

  jpegtran -copy none -optimize -outfile output.jpg input.jpg
  

  
  
  
• Imagemagick работает практически со всеми форматами. Утилита convert позволяет указывать параметр качества для сжатия, что поможет уменьшить размер картинки:

  convert input.jpg -quality 75 output.jpg
  

  
  

Формат PNG используется для иконок, логотипов и малоцветных изображений. Инструменты для оптимизации:

• pngquant – инструмент lossy-сжатия для оптимизации PNG с потерями качества. Основной алгоритм работы — уменьшается количество используемых оттенков цветов. Это снижает размер с небольшими потерями в качестве:

  pngquant --quality 75 —speed 1 input.png
  

  
  

• pngcrush – еще одно средство оптимизации для PNG. Использует алгоритм сжатия без потерь:

  pngcrush -reduce -brute in.png out.png
  

  
  
  

Облачные инструменты

• JPEGmini. Отлично сжимает фотки на 20…30%. Создатели заявляют, что могут сжать некоторые изображения в 5 раз без потерь в качестве. Есть API для автоматизации.
• TinyPNG. Реально крутой инструмент оптимизации для PNG. Очень хорошее сжатие без заметных потерь в качестве. Также есть API и большой бесплатный пакет.
• i.onthe.io/google_speed. Простой сжиматор, работает с любым форматом. Удобен для одноразовой обработки.

Модуль PageSpeed

pagespeed on;
pagespeed FileCachePath /var/cache/nginx;

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

Прямая оптимизация ресурсов

Для этого достаточно включить в конфиг такие инструкции (для Nginx):

pagespeed InPlaceResourceOptimization on;

Конспект

• Используйте PageSpeed для поиска проблем с графикой на сайте.
• Если графики много, используйте серверные инструменты для оптимизации: jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.
• Облачные инструменты для одноразовых задач и подключения по API: JPEGmini, tinyPNG, i.onthe.io/google_speed.
• Модуль PageSpeed к Nginx/Apache сделает всю оптимизацию сам, но его нужно собирать.

habr.com

Как оптимизировать изображения для интернета и увеличить производительность сайта

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

Оптимизация изображений представляет собой процесс уменьшения размера файла с помощью плагина или скрипта. Существует два способа сжатия изображений – с потерями качества и без потерь.

Согласно HTTP Archive, изображения занимают в среднем 21% от общего размера веб-страницы. Процесс оптимизации изображений является самым простым способом повышения производительности сайта. Но при этом большинство владельцев пренебрегают им.

Среднее количество байт на страницу (кБ)

Преимущества оптимизации графического контента:

• Увеличение скорости загрузки страниц.
• Улучшает SEO-показатели сайта. Большие файлы изображений замедляют работу вашего сайта, а поисковики не любят медленные ресурсы.
• Более быстрое создание резервных копий.
• Требуется меньше места на вашем сервере.

Основная задача оптимизации – это получение баланс между наименьшим размером файла и приемлемым качеством изображения. Одним из распространенных способов является простое сжатие файлов перед их загрузкой в WordPress. Для этого используют Adobe Photoshop или Affinity Photo. А также плагины, которые мы подробно рассмотрим ниже.

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

• PNG– этот формат позволяет получать изображения высокого качества, но при этом размер файла остается большим.
• JPEG– использует оптимизацию с потерями и без потерь качества. Вы можете регулировать уровень качества, чтобы достичь наиболее подходящего баланса.
• GIF – формат поддерживает всего 256 цветов. Это лучшее решение для анимированных изображений. Он использует только сжатие без потерь.

Есть еще несколько форматов, таких как JPEG XR и WebP. Но не все они поддерживаются браузерами. Поэтому лучше использовать JPEG (или JPG) для полноцветных изображений и PNG для простых картинок.

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

Примечание: Объем оригинального изображения составляет 2,06 Мб.

Низкая степень сжатия (высокое качество) JPG – 590 Кб

Высокая степень сжатия (низкое качество) JPG – 68 Кб

Размер первого изображения составляет 590 Кб. Это довольно много для одной фотографии. Второе изображение выглядит ужасно, но при этом весит всего 68 Кб.

Применим к изображению среднюю степень сжатия. В результате мы получили хорошее качество при размере файла в 151 Кб. Это почти в четыре раза меньше размера оригинальной фотографии. Для обеспечения наилучшей производительности сайта изображения в формате PNG не должны весить более 100 Кб.

Средняя степень сжатия (отличное качество) JPG – 151 Кб

Оптимизация с потерями – это «фильтр», который убирает некоторые данные и ухудшает качество изображения. Но при этом размер файла изображения существенно уменьшается. Для этого можно использовать такие программы как Adobe Photoshop, Affinity Photo или любой другой графический редактор.

Оптимизация без потерь качества – сжатие данных без снижения качества изображения. Выполнить сжатие без потери качества можно с помощью Photoshop, FileOptimizer или ImageOptim.

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

Существует множество инструментов и программ для оптимизации изображений. Лично мы – большие поклонники Affinity Photo.

Сжатие фотографии в Affinity Photo

Ниже перечислено несколько инструментов для оптимизации изображений:

• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• ImageResize.org

WordPress, начиная с версии 4.4, поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Движок автоматически создает несколько копий изображения разного размера, загружая их в медиа-библиотеку. Используя атрибут srcset, браузеры теперь могут выбирать для загрузки файл наиболее подходящего размера, исходя из характеристик экрана устройства пользователя.

Пример кода отзывчивых изображений srcset

Медиа-библиотека WordPress создает миниатюры на основе ваших установок. Но при этом она сохраняет оригинальные изображения без изменений. Чтобы изменить размер изображений, не сохраняя оригинальные, можно воспользоваться бесплатным плагином Imsanity.

Настройка медиафайлов в WordPress

Imsanity позволяет установить ограничения для загружаемых в CMS картинок. Плагин начинает работать сразу же после загрузки изображения, еще до того как WordPress начнет его обработку.

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

Но не стоит полностью полагаться на плагины. Например, не следует загружать изображения размером более 2 Мб в медиа-библиотеку WordPress. Это приведет к быстрому расходованию дискового пространства, предоставляемого хостингом.

Плагин Imagify для оптимизации изображений

Плагин Imagify создан авторами WP Rocket, с которым большинство из вас знакомы. В нем доступна функция массовой оптимизации. Вы можете выбрать три уровня сжатия: нормальный, агрессивный и ультра. Если недовольны полученным качеством, то воспользовавшись функцией восстановления, можно будет восстановить исходное изображение. С помощью этого плагина также можно удалять оригинальные изображения, уменьшать размер больших файлов.

Изменение размера файлов в Imagify

Плагин ShortPixel

Бесплатный плагин ShortPixel Image Optimizer позволяет сжимать 100 изображений в месяц. Он работает с множеством форматов, включая PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений с потерями и без потерь. Плагин конвертирует цветовую модель CMYK в RGB. При оптимизации создается резервная копия оригинальных файлов, что позволяет при желании восстановить их вручную. Данный плагин также поддерживает массовую конвертацию файлов.

Плагин Optimole

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

Плагин включает в себя функцию отложенной загрузки и замены изображений при медленном интернет-соединении. Данная функция выгодно выделяет этот плагин из множества других решений. Данный плагин автоматически определяет браузер пользователя и поддерживает формат WebP. Все изображения, которые сжимает плагин Optimole, обслуживаются через быструю CDN- службу.

EWWW Image Optimizer Cloud- облачный плагин для оптимизации изображений

Плагин EWWW Image Optimizer Cloud оптимизирует изображения и повышает скорость работы сайта. Пользователи EWWW IO могут использовать функцию Bulk Optimizer («массовый оптимизатор»), предназначенную для сжатия имеющихся изображений.

Плагин EWWW IO позволяет конвертировать изображения в форматы нового поколения, такие как WebP или подобрать наилучший формат для изображения. Стоимость сжатия начинается от 0,003 доллара за изображение.

Функция ExactDN позволяет выполнять автоматическое сжатие (без необходимости сжатия на сервере), автоматическое изменение размера и обладает всеми  преимуществами CDN.

Плагин Optimus Image Optimizer

Плагин Optimus WordPress Image Optimizer использует сжатие без потерь. Он поддерживает WooCoomerce и мультисайты, а также включает в себя функцию массовой оптимизации. Плагин также совместим с плагином WP Retina. Если вы совместите плагин Optimus Image Optimizer  с плагином Cache Enabler, то сможете работать с изображениями, сохраненными в формате WebP.

Плагин WP Smush

Плагин WP Smush  сканирует изображения и сжимает их по мере их загрузки на сайт. Он также находит и оптимизирует уже сохраненные рисунки. Он позволяет осуществлять массовое сжатие (до 50 файлов за раз). Плагин поддерживает форматы JPEG, GIF и PNG. Размер исходных файлов ограничен 1 Мб.

• Плагин совместим с WP All Import и WPML.
• Оптимизация изображений выполняется с помощью сжатия без потерь.
• У Smush есть функция автоматической установки ширины и высоты для всех изображений.

Плагин TinyPNG

Плагин TinyPNG использует сервисы TinyJPG и TinyPNG для оптимизации изображений в форматах JPG и PNG. Для экономии места плагин конвертирует CMYK в RBG. Он сжимает файлы JPEG до 60%, а файлы PNG до 80% без видимой потери качества изображения. У него нет ограничений на размер обрабатываемого файла.

ImageRecycle- плагин для оптимизации изображений и PDF-файлов

Плагин ImageRecyle – это автоматический оптимизатор изображений и PDF-файлов. Одной из его полезных функций является способность устанавливать минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 Кб, вы можете автоматически исключить их из процесса сжатия. Данный плагин также включает в себя функцию массовой оптимизации и автоматического изменения размеров изображений.

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

Мы загрузили шесть несжатых файлов JPG на наш тестовый сайт. Размер каждого из них превышал 1 Мб. Общее время загрузки составило 1,55 секунды, а общий размер страницы -14,7 Мб.

Тест скорости передачи данных несжатых файлов JPG

Затем мы сжали файлы JPG с помощью WordPress-плагина Imagify, используя «агрессивные» установки. Взгляните на новые сжатые файлы JPG, которые все еще выглядят прекрасно. После этого мы провели пять тестов, используя Pingdom, и выбрали среднее значение. В результате общее время загрузки сократилось до 476 мс, а размер страницы уменьшился до 2,9 Мб. Общее время загрузки уменьшилось на 54,88%, а размер страницы — на 80,27%.

Тест на скорость передачи данных сжатых файлов JPG

Не существует никакой другой оптимизации сайта, которая позволила бы сократить время загрузки более чем на 50%. Поэтому оптимизация изображений является такой важной. Процесс, показанный выше, был полностью автоматизирован плагином.

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

• Файлы SVG автоматически масштабируются во всех браузерах и графических редакторах.
• Google индексирует файлы SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
• SVG-файлы отличаются меньшим размером по сравнению PNG или JPG. Это положительно сказывается на скорости загрузки.

Файл JPG (оптимизированный размер: 81,4 Кб)

Изображение JPG

Файл PNG (оптимизированный размер: 85,1 Кб)

Изображение PNG

Файл SVG (оптимизированный размер: 6.1 Кб)

Изображение SVG

Как показано выше, SVG- файл уменьшается в размере на 92,51% по сравнению с файлом в формате JPG. А при сравнении с файлом в формате PNG – на 92,83%.

• Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
• Используйте векторные изображения, где это только возможно.
• Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
• Используйте эффекты CSS3 как можно чаще.
• Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
• Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
• Уменьшайте глубину цвета для использования меньшей цветовой палитры.
• Используйте сжатие с потерей качества, где только возможно.
• Экспериментируйте для поиска наилучших установок для каждого формата.
• Используйте GIF, если вам нужна анимация.
• Используйте формат PNG, если вам требуется высокая детализация и разрешение.
• Используйте формат JPG для фотографий общего вида и скриншотов.
• Автоматизируйте процесс оптимизации изображений.
• Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.

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

Данная публикация представляет собой перевод статьи «How to Optimize Images for Web and Performance» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru