Как оптимизировать изображения? TinyPng – бесплатно и просто. Эффект отличный.

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

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

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

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

Почему возникает вопрос об оптимизации изображений? Что с ними не так и как оптимизировать эти самые изображения с наилучшим эффектом?

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

Оптимизация – уменьшение «веса» без потери качества.

Случалось ли вам пересылать, например, по электронной почте, большой пакет фотографий? Скорее всего, вы столкнулись с трудностью при этом. Ведь многие почтовые сервисы имеют ограничения на максимальный объем прикрепляемых файлов. Современные гаджеты делают фотографии в большом разрешении, следовательно, достаточно большого «веса». Вот и получается, что требуются уже специальные способы пересылки с использованием облачных хранилищ. А если вы захотите из этих изображений сделать цифровой альбом, книгу или слайд-шоу? Здесь уж никак не обойтись без их сжатия.

Смотрите, я просто гуляла и фотографировала осенние пейзажи вокруг себя, а затем сбросила фотографии на свой ПК. На скриншоте видно, что изображения получились по 2 – 4 МБ. Если, например, использовать их на сайте в качестве иллюстраций, то это приведет к очень серьезному торможению скорости загрузки страниц сайта.

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

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

Действительно, трудно представить, что размытое и нечеткое изображение тизера «зацепит» чей-то взгляд и заставит прочитать статью на блоге, даже если она загрузилась мгновенно. А если это интернет-магазин? Может ли привлечь потенциального покупателя нечеткая картинка с изображением товара? Все мы отлично знаем, что только яркая, качественная картинка останавливает наш взгляд при беглом просмотре ленты ВК или Инстаграм.

Именно задача сохранения баланса между уменьшением «веса» и сохранением приемлемого уровня качества встает при выборе способа оптимизации любого изображения для его размещения на интернет – ресурсе.

Оптимизация в фотошоп

Оптимизация изображения может быть сделана в программе фотошоп при экспорте его в формат .jpg или .png. Пункты меню Файл – Экспортировать – Сохранить для Web открывают возможность сохранить изображение в формате .png или.jpg, задав при этом уровень качества. Для использования на сайте или в соцсетях вполне приемлемым может оказаться «Высокое качество» с уровнем сжатия 60%.

Провела эксперимент с фотографией, сделанной обычным смартфоном. Оригинал «весит» 2,04 МБ. После сохранения в фотошоп с качеством «Наилучшее» и степенью сжатия 100 «вес» изображения стал 2,4 МБ! Стоило уменьшить качество до «Высокое качество» с уровнем сжатия 60%, как «вес» стал 0,524 МБ. При этом видимой потери качества, практически, не произошло.

TinyPng. Оптимизируем дальше.

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

Несколько добрых слов о сервисе. Он точно этого заслуживает.

Сервис бесплатный, ну или почти бесплатный. Если вам не нужно обрабатывать одновременно больше 20 изображений размером свыше 5 МБ каждый, то вы можете не думать о платном PRO-интерфейсе, позволяющем делать продвинутые вещи типа интеграции сервиса в фотошоп или на свой сайт. Бесплатностей вам вполне хватит для удобной, быстрой и качественной обработки любых изображений в форматах .png и .jpg

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

Вы можете просто перетащить нужные файлы из своей папки на ПК в поле загрузки файлов TinyPng или нажать стрелку в поле загрузки. Вам откроется возможность выбрать нужные файлы на своем ПК. Выберите нужные файлы изображений для оптимизации и нажмите кнопку «Открыть». Все выбранное будет загружено в сервис TinyPng. Тут же начинается сжатие. Процесс очень быстрый. И вот уже изображения, загруженные вами, сжаты, практически, без потери качества, о чем вам радостно сообщает симпатяга-панда.

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

Если вы хотите сохранить изображение в облачном хранилище и, например, переслать ссылку на него своему другу или партнеру, используйте кнопку «Сохранить в Dropbox». Такое TinyPng тоже умеет.

Итак, удивляемся результату: исходный файл – 2,08 МБ, оптимизированный – 0,202 МБ. Сжатие - 90 %

Очень советую вам пользоваться. Если что-то непонятно рассказала – обращайтесь в комментариях. Возможно, пользуетесь другими средствами и сервисами. Делитесь. Коллективный опыт нам с вами ведь только во благо!

Спасибо, что читаете и до новых встреч на страницах моего дневника.

Сделай репост – выиграй ноутбук!

Каждого 1 и 15 числа iBook.pro разыгрывает подарки.

  • Нажми на одну из кнопок соц. сетей
  • Получи персональный купон
  • Выиграй ноутбук LENOVO IdeaPad

Подробно: ibook.pro/konkurs

LENOVO IdeaPad Intel Core i5, 8ГБ DDR4, SSD, Windows 10

Нет комментариев

Добавить комментарий

Отправить комментарий Отменить

Сообщение