Обзор онлайн сервиса TinyPNG для сжатия фотографий

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

Некоторые скажут: «На кой черт мне сдался этот твой сервис, если я могу спокойно сжать картинку, допустим, в том же Фотошопе?» 

Так вот! Во-первых, фотошопом сжимать картинки порой не удобно и не всегда быстро.

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

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

Хорошее сжатие фотографий

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

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

Особенности сервиса TinyPNG

Итак, прежде чем начать работать с данным сервисом, давайте рассмотрим его преимущества.

Чем он так хорош?

Как происходит сжатие изображение в сервисе TinyPNG

Сервис работает с png, webp и jpeg форматом. Само сжатие происходит путем изменения количества бит. То есть идет преобразование 24 битного изображения в 8 битное (уменьшается количество цветов). Вследствие этого существенно изменяется и сам размер файла. Сжать можно более 70% размера файла. Также для оптимизации можно сразу загружать до 20 изображений в один заход и размером не выше 5 Mb.

Плагин для интеграции TinyPNG в Photoshop

С помощью плагина TinyPNG Photoshop можно интегрировать в программу Photoshop. Однако за его плагин нужно заплатить.

Как создать интеграцию сайта с сервисом TinyPNG

Можно интегрировать сервис к любому сайту. Когда будете загружать изображения на сайт, то они автоматически будут сжиматься. И к тому же нет ограничений в размере загружаемого файла. Однако бесплатно можно конвертировать не более 500 изображений в месяц. Если больше, то нужно уже платить.

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

Изменение качества изображения почти не видимы для нас. Однако это не для всех фотографий.

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

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

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

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

А если сайт на какую-то обучающую тематику, то там вообще, практически одни обучающие скриншоты.

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

Работа с сервисом TinyPNG

Итак, давайте все же, начнем работать с этим сервисом. Заходим на tinypng.com, и оказываемся на главной странице данного сервиса.

Там видим загрузчик для наших файлов.

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

Загрузчик файлов TinyPNG

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

Потоковая загрузка фалов на сервис TinyPNG

После этого чуть ниже появится таблица выполнения процесса. Там все наглядно видно.

Левее отображаются названия файлов. Далее идет первоначальный размер —> статус процесса (если finished, то нормально) —> размер после сжатия —> кнопка загрузки (download) —> процент сжатия.

Как видите, все просто. Вам теперь только остается обратно скачать эти файлы. Вот и вся работа!

Процесс сжатия изображений png формата

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

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

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

Интеграция TinyPNG с Photoshop

Установив плагин TinyPNG Photoshop, вы прямо в программе можете сжимать и сохранять изображения.

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

Также не будет ограничений на загрузку файлов.

Так обычно не более 20 фоток можно загружать, а с плагином без разницы. Хоть сотню за раз можно взять.

Итак, давайте перейдем на страницу плагина. В верхнем меню сайта щелкаем на «Photoshop».

Интеграция сервиса TinyPNG с программой Photoshop

Далее просматриваем информацию о плагине. Как я уже говорил ранее, получить все на халяву у нас не получиться. Придется заплатить.

На данный момент плагин стоит 40 $ — 1 штука.

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

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

Пережить можно. А отдавать 40 $, так сказать за то, чтобы не делать лишние телодвижения для меня полный абсурд.

Также вам нужно знать, что плагин не будет работать с фотошопом ниже версии CS5. То есть на данный момент он работает с версией CS5, CS6 и CC.

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

Скажу, что оплата идет только с кредитной карточки (рисунок ниже). Пока других способов у них нету.

Также будьте внимательны, что не все версии ОС поддерживаются. Например, для Windows подойдет только версия не ниже семерки.

Купить плагин TinyPNG Photoshop

Итак, после того, как вы приобрели данный плагин, вам его нужно установить в программу Photoshop. Я не буду тут расписывать подробную инструкцию по установке плагина в графический редактор.

На самом сервисе есть подробное описание установки (1) для разных операционных систем. Так что почитайте там.

Инструкция по установке плагина TinyPNG Photoshop

Интеграция с сайтом

Ну и последняя интересная возможность — это интеграция сервиса TinyPNG с вашим сайтом.

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

Таким образом, вам даже не нужно заходить на сам сервис.

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

Давайте в самом верхнем меню сайта перейдем во вкладку «Developer API».

Developer API для разработчиков

Там идет краткое описание. Ниже вам предлагают получить API ключ.

В специальной форме вам нужно ввести свой email и имя. После этого нажать «Get your API key».

Получить API ключ на сервисе TinyPNG

Далее на почту придет письмо со ссылкой на ключ. Перейдя по ссылке, вы на специальной странице можете скачать ключ. Также рядом будет выводиться лимит по сжатию.

Теперь после этого вам с помощью своего ключа и специального кода нужно создать запрос для интеграции с сервисом.

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

А кому захочется, то можете почитать инструкцию на самом сервисе. Там все расписано в примерах.

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

Бесплатный тариф

До 500 изображений в месяц. Это более чем предостаточно.

Также обратите внимание, что нам предлагают неограниченный размер файлов и всего за 0 $ (хорошо, что бесплатно!).

Малый тариф

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

Преобразование до 3 500 фотографий в месяц. Размер не ограничен, но уже за 15 $ в месяц.

Большой тариф

Сжатие до 50 000 картинок. Не знаю, кому такое может понадобиться.

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

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

А автоматическое сжатие такого количества изображений, будет весьма кстати. Размер, конечно же, без ограничений. А вот цена — 100 $ в месяц.

Интеграция TinyPNG с WordPress

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

Для вас есть специальные плагины, которые с легкостью помогут вам решить подобную задачу.

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

Вот какие плагины имеются в наличии:

Compress PNG for WP

Он прекрасно интегрируется в медиа галерею WordPress. Там вы можете оптимизировать все свои старые изображения в PNG формате. Также плагин может автоматом сжимать новые изображения при их загрузке на сайт.

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

Дублей никаких не будет.

Когда установите плагин, вам нужно перейти в «Настройки» —> «Медиафайлы». В самом низу вы увидите настройки этого плагина:

  • Your Tiny PNG Key — сюда вам нужно ввести свой API ключ. Без него плагин не будет работать.
  • Automatically shrink files on upload? — автоматическое сжатие загружаемых фотографий. Галочка должна стоять.
  • Which file sizes do you want to shrink? — если у вас используются дубли изображений (например, миниатюрки), то их тоже можно сжимать. Просто отмечаем галочки в нужных пунктах. Если дубли не используются, то все поля оставляем пустыми.
Настройки плагина Compress PNG for WP

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

Однако, что делать со старыми изображениями?

Для этого заходим в «Медиафайлы» —> «Библиотека». С правой стороны у вас появится новая колонка «Compress PNG for WP». В ней отображается статус фотографий.

Если картинка будет не PNG формата, то будет надпись «Not a png file, Tiny PNG cannot compress».

Здесь ничего не поделаешь. Ну а так, чтобы оптимизировать нужное изображение, нажимаем «Compress now».

Интеграция плагина Compress PNG for WP в галерею

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

Сжатие изображений в галереи WordPress

Также чтобы по отдельности не оптимизировать каждую фотку, можно просто отметить нужные и в списке действий выбрать «Bulk Compress PNG».

Далее нажимаем «Применить». После этого сожмутся те фотографии, которые вы выбрали.

Bulk Compress PNG for WordPress

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

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

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

WP TinyPNG

Такой же плагин, как и Compress PNG for WP, но с дополнительной возможностью сохранить исходное изображение.

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

Иногда это очень полезно делать!

Итак, после активации, переходим в «Настройки» —> «Медиафайлы». Там в самом низу вы найдете настройки:

  • TinyPNG API Key — вводим сюда свой API ключ. Там ниже есть ссылка на запрос получения ключа.
  • Keep original File — сохранять ли исходный файл с оригинальным размером. Рекомендую не включать эту опцию, дабы не плодить лишние дубли изображений и не забивать этим мусором свой сервер.
  • Compress children (thumbnails) — сжатие дублированных изображений. Если они у вас используются, то отмечаем данный пункт.
  • Enable debug processing — включение процесса отладки. Если при установке у вас возникли некоторые проблемы с этим плагином, то можете отметить этот пункт. Так плагин может выявить причины различных ошибок.
Плагин WP TinyPNG 

Теперь сохраняем все изменения.

Скажу, что этот плагин, как и предыдущий интегрируется в медиа галерею WordPress.

Когда вы зайдете в библиотеку медиа файлов, то вам тоже будет доступен новый столбик только уже с названием «PNG Compression».

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

Чтобы такое реализовать, плагин создает дополнительную вкладку. Заходим в «Медиафайлы» —> «PNG Compression». Там как мы видим, плагин сам формирует удобную для нас библиотеку.

Вверху мы видим главные кнопки:

  • Select All — отметить все изображения;
  • Select None — убрать выделение;
  • Select Compressed — выбрать сжатые картинки;
  • Select Uncompressed — выбрать несжатые фотографии.
Библиотека плагина WP TinyPNG

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

В общем, зашли вы в эту библиотеку.

Дальше вы просто одним щелчком выбираете все несжатые фотографии и нажимаете на кнопку «Compress Images».

Дальше плагин начнет сжимать фотографии и после этого покажет вам итог работы.

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

Что еще здесь можно сделать?

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

После спускаетесь ниже, ставите галочку для повторного сжатия (4) и нажимаете на кнопку «Compress Images».

Плагин WP TinyPNG для сжатия изображений

Также заметьте, если вы в опциях плагина поставили галочку на Keep original File (сохранять оригинальное изображение), то с помощью кнопки «Revert to Backup» вы можете восстановить оригинал.

Это своего рода бэкап фотографий.

TinyPNG for WordPress

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

Также он позволяет загружать только до 5 изображений одновременно. Сам плагин все оптимизированные изображения хранит в отдельной папке «TinyPNG».

Это не совсем удобно.

Итак, после активации в административной панели сайта вам будет доступно меню «TinyPNG» с красивой иконкой в виде мордочки панды.

Нажимаем на нее.

В поле Your Email ID (2) вводим свой email. Далее чуть ниже в поле Your API Key (3) вставляем свой API ключ и нажимаем «Submit». После этого можно уже загружать картинки.

Плагин TinyPNG for WordPress

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

Согласитесь, не очень-то и удобно.

Вот такие вот плагины, которые можно использовать для интеграции сервиса TinyPNG с сайтом на CMS WordPress.

В принципе неплохо!

Даже можно сжать старые фотографии. Так очень удобно. Не нужно по десять раз загружать фотографии.

Достаточно просто в медиа галереи выбрать нужные картинки и их оптимизировать. Может даже кому-то понадобиться сжимать изображения налету.

Но лично я так не делаю, так как сжимаю изображения в самом сервисе. Привык я к нему!

Заключение

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

Скажу, что этот сервис сжимает фотографии получше, чем программа Adobe Photoshop. То есть качество выходной картинки существенно отличается.

В фотошопе она будет немножко хуже. Поэтому, примите к сведению этот момент.

Лично я использую этот сервис, но без всяких плагинов. Для моих нужд этого вполне достаточно! А для ваших?

Добавить в закладки

Увлекаюсь созданием и продвижением сайтов в интернете. Интересует SEO оптимизация и контент-маркетинг. Немного занимаюсь SMM и Email рассылкой. Также люблю читать интересные материалы по веб-аналитике и заработку в интернете.

Сервис TinyPNG - Отзывы

  1. Галина

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

    Да еще и плагины для WordPress имеются. Обязательно нужно интегрировать WordPress с TinyPNG.

    Ответить
  2. Азик

    Да да, интересный сервис!)
    Но я как-то не задумываюсь о картинках, ищу в поисковиках и вставляю на блог!))
    Даже не делаю их уникальными!!))

    Ответить
    1. Сергей Азаров автор

      И что, даже не сжимаешь? Ну, это ты зря. :-( Во-первых, с такими картинками у тебя страница будет весить больше, что плохо отразится на скорости загрузки. Во-вторых, ты не экономишь место на хостинге. Поэтому я тебе рекомендую не махать рукой на оптимизацию изображений для блога. Это тоже один из важных моментов в блоггинге и создании сайтов.

      Ответить
  3. Надежда Хачатурова

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

    Пользуюсь tiny бесплатно. В лимит укладываюсь, еще и остается. Будет время, вернусь, с Вашего позволения, изучу весь функционал.

    Ответить
    1. Сергей Азаров автор

      Надежда, если у вас есть старые неоптимизированные изображения в png формате, то можно воспользоваться плагином. Он вам все эти фотографии сожмет, и не придется их удалять. Потом при желании от плагина можно избавиться.

      Ответить
  4. Ирина Лирнецкая

    Сергей, статья у Вас получилась, прям как у меня — длинная и ценная :-) . Очень много полезной информации, впрочем, как всегда.

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

    А сжимать мне очень нужно — у меня тема очень тяжелая+ я вставляю много картинок в посты+иногда и видео. Информация мне нужна позарез, буду изучать. Спасибо.

    Ответить
  5. Олия

    Я сжимаю изображения в фотошопе. Мне очень удобно, быстро. Сохраняя для Web, выставляю нужный размер, сжимаю, сохранить как…пишу название) Всё.
    Спасибо за полезную информацию.

    Ответить
Adblock
detector