Сжатие картинок для web — обзор инструментов

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

сжатия картинок сайта

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

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

GIF, JPEG или PNG?

Каждое изображение представляет собой файл, закодированный в соответствующем графическом формате. В сети Интернет популярны GIF, JPEG и PNG. Каждый из них имеет плюсы и минусы.

  • Формат GIF использует индексированную палитру до 256-цветов. Применяйте его для небольших картинок (иконок). Особенность GIF – поддержка анимации, но размер конечного файла ограничивает сферу её применения.
  • Используйте формат JPEG для хранения фотографий и картин с плавными переходами яркости и цвета. В остальных случаях велика вероятность, получить искажение и потерю качества изображения.
  • PNG сделан специально для Интернета. Особенность PNG – поддержка полупрозрачности и сжатие картинок без потери качества, что отражается на размере файла изображения.
Совете: выбирая тот или иного формат, смотрите на конечное качество и размер файла конкретной картинки.

Сжатие картинок онлайн

Онлайн сервисы сжатия картинок TinyJPG и TinyPNG созданы нидерландской студией Voormedia. Их простой и понятный интерфейс на английском языке не вызывает трудностей даже у начинающих пользователей.

Предлагаемый онлайн сервисами API позволяет сжимать картинки буквально «налету». Сжатие до 500 картинок в месяц – бесплатно. Для блогов на движке WordPress есть и готовый плагин.

Если же вам нужен Photoshop плагин, доступный для Mac и Windows, придётся раскошелиться. Цена вопроса – $50.

TinyJPG

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

TinyJPG
Сжатия JPEG картинок онлайн в TinyJPG

За раз добавляется до 20 картинок, но размером не более 5 Мб каждая. Сервис автоматически анализирует и выбирает оптимальный вариант сжатия, а результат скачивается или сохраняется на Dropbox.

Для проверки сервиса взята фотография, сохранённая в Photoshop в формате JPEG с Hight качеством (60%) и установленной галочкой «Optimized». Исходный размер файла составил 121 Кб. После обработки картинки в TinyJPG получен файл на 6% меньше оригинала. Его размер составил 113 Кб.

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

TinyPNG

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

TinyPNG
Сжатия PNG картинок онлайн в TinyPNG

За раз добавляется до 20 картинок, но размером не более 5 Мб каждая. Сервис автоматически анализирует и выбирает оптимальный вариант сжатия, а результат скачивается или сохраняется на Dropbox.

Для проверки сервиса взята фотография, сохранённая в Photoshop в формате PNG-24 с отключенной прозрачностью. Исходный размер файла составил 727 Кб. После обработки картинки в TinyJPG получен файл на 75% меньше оригинала. Его размер составил 179 Кб.

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

Программа FileOptimizer для сжатия картинок

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

Примечание: FileOptimizer сжимает файлы без потери качества разных форматов: 3GP, .APNG, .BMP, .CHM, .CSS, .DOC, .EPUB, .FB2, .GIF, .HTML, .ICO, .JAR, .JPEG, .JPG, .JS, .MP3, .MP4, .PDF, .PNG, .PSD, .SVG, .SWF, .TIF, .TIFF, .ZIP и т.д.

Бесплатно скачать последнюю версию FileOptimizer вы можете из репозитария на SourceForge, проследовав по этой ссылке. Там есть все её версии, но нас интересует ссылка на инсталлятор последней версии.

Программа FileOptimizer для сжатия картинок
Программа FileOptimizer для сжатия картинок

Сжатие изображений в программе FileOptimizer

Пользоваться программой одно удовольствие. Вам не нужно настраивать FileOptimizer. Всё уже настроено оптимальным образом. Поэтому осталось выполнить следующие простейшие действия:

Сжатие изображений в программе FileOptimizer
Сжатие изображений в программе FileOptimizer

  1. Кликните пункт «Add files…» и (в отрывшемся окне) выберите файлы для сжатия.
  2. Кликните пункт «Optimize all files» и дождитесь, когда статус в столбце «Status» добавленных в список файлов изменится на «Done» (с англ. сделано).

Примечание: оригинальные файлы перезаписываются сжатыми файлами. Сжатие JPEG файлов происходит быстро, а вот PNG – требует времени. Результат не столь впечатляет, как в случае с онлайн сервисами, но здесь стоит помнить о качестве.

Для проверки программы взята фотография, сохранённая в Photoshop в формате JPEG с Hight качеством (60%) и установленной галочкой «Optimized». Исходный размер файла составил 121 Кб. После обработки картинки в FileOptimizer получен файл на 4% меньше оригинала. Его размер составил 116 Кб.

Для проверки программы взята фотография, сохранённая в Photoshop в формате PNG-24 с отключенной прозрачностью. Исходный размер файла составил 727 Кб. После обработки картинки в FileOptimizer получен файл на 5% меньше оригинала. Его размер составил 696 Кб.

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

Примечание: Google онлайн сервис анализа сайтов PageSpeed Insights считает картинки сжатые в FileOptimizer приемлемыми. Да и качественные картинки должны ранжироваться в поисковиках лучше.

Короткая ссылка: http://goo.gl/M6SDVe

Сергей Назаров
Сергей Назаров комментирует...

TinyJPG и TinyPNG фактически один и тот же сервис, но доступный по разным доменам. Т.е. можно и туда, и туда, заливать PNG И JPEG файлы скопом. Хорошие сжималки, но было бы удобней софт. Плагин же для Photoshop за $50 это ппц.

Блокнот вебмастера
Блокнот вебмастера комментирует...

По умолчанию PNG в несколько раз больше JPG. Если картинка нужна хорошего качества в JPG, то нужно загружать оригинальный размер на сайт, а в статью класть миниатюру.

Это намного проще и лучше, чем сжимать PNG и как написано в статье - это не дает сильной экономии:

Исходный размер файла составил 727 Кб. После обработки картинки в FileOptimizer получен файл на 5% меньше оригинала. Его размер составил 696 Кб.

Константин Кирилюк
Константин Кирилюк комментирует...

2Блокнот вебмастера Сжатие PNG дало уменьшение файла больше чем у JPEG. PNG очень хорошо сжимается! Но для фото, действительно, лучше JPEG. А вот со скриншотами я бы выбрал PNG, там JPEG проигрывает. Т.е. в каждом случае надо смотреть отдельно. Миниатюра же, согласен, оптимальна для всех форматов.

Сама Доброта
Сама Доброта комментирует...

А какой смысл сжимать всего на 5%? Я, может, чего-то не понимаю. Я сжимаю до размера не больше 100 Кб, вручную, иногда пользуюсь детским онлайн-сервисом fanstudio.ru, но там нужно ещё поработать над качеством. Там есть функция автоматического размера для размещения в интернет, можно задать свои параметры. Факт в том, что качество теряется. Но сервис удобный. Попробовала использовать TinyJPG - качество тоже не хило снизилось. Если сжимаю просто вручную в Paint, то качество особо не страдает. А какой оптимальный размер картинки должен быть вообще?

Константин Кирилюк
Константин Кирилюк комментирует...

2Сама Доброта В плане сжатия картинок нужно найти оптимальный вариант. Пользователям, а значит и поисковикам, важно как размер, так и качество картинки. Вы правильно отметили - сжимая в TinyPNG или TinyJPG, картинка теряет качество; умеренно, но теряется. FileOptimizer сжимает картинки без потери качества. 5% это не мало! В примере это составило 31 Кб. HTML-код страницы данной статьи весит 57 Кб.

Василий
Василий комментирует...

Для сжатия я использую такой метод. Сначала оптимизирую картинки (у меня скриншоты) в Фотошопе в обоих расширениях, а затем на сервисе TinyJPG (сейчас это одно и тоже) оптимизирую картинки второй раз. Потом выбираю для сайта то расширение файла, в котором размер изображения будет меньше.Изначально скриншоты сохраняются в JPG, а вот в итоге, чаще меньшими бывают картинки сохраненные в PNG.

Константин Кирилюк
Константин Кирилюк комментирует...

2Василий да, часто для скриншотов хорош PNG, а для фоток JPEG.

Константин Кирилюк
Константин Кирилюк комментирует...

Хорошее дополнение к статье от Сергея Поповича в стиле lifehack. Оказывается в PageSpeed Insight есть возможность не только проанализировать веб-страницу, но и скачать оптимизированный её вариант:

[img]https://lh6.googleusercontent.com/-9jqGR-uYrks/VadSfDZn3EI/AAAAAAAAFcg/EthwPXkAQBs/w620-h324-no/16-07-2015%2B10-35-47.png[/img]

1. Заходим на https://developers.google.com/speed/pagespeed/insights/
2. вводим #url и кликаем кнопку «Анализировать».
3. В конце страницы результата анализа, кликаем ссылку в строке «Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы».

Руслан Ахтамьянов
Руслан Ахтамьянов комментирует...

Я жму в основном в программе для скриншотов FSCapture, стараюсь делать не больше 30 Кб (не помню уже почему именно эта цифра). Реже пользуюсь онлайн сервисами. Константин, кстати, хотел спросить - Вы не пользовались плагином для WordPress - Seo by Squirrly. Было бы интересно узнать Ваше мнение о нем, а также узнать не нагружает ли плагин загрузку и не конфликтует ли с All In One Seo Pack?

Константин Кирилюк
Константин Кирилюк комментирует...

2Руслан Ахтамьянов Проблема сервисов и программ сжатия именно в том, что они сжимают с потерей качества. Для пользователей, а значит и поисковиков, важен не только размер, но и качество. Поэтому лично я использую и рекомендую FileOptimizer. Скриншоты и видео делаю в SnagIt, но он платный и дорогой.

Что до Seo by Squirrly – впервые слышу. Я давно уже перешёл на Blogger и тем самым решил проблему с нагрузкой. Конечно, блог-платформа это всегда ограничения, да и от других проблем он не застрахован, но тем не менее. Меня откровенно задолбали все эти лимиты. В остальном же, любой плагин это зачастую дополнительные запросы к БД, причём в безмерном количестве. Даже All In One Seo Pack работает далеко не оптимально и я, было дело, его как-то оптимизировал, что значительно снизило число запросов.

Пєсков Ігор
Пєсков Ігор комментирует...

https://compressor.io/ - сжатые изображения подходят Гуглу

Константин Кирилюк
Константин Кирилюк комментирует...

2Пєсков Ігор нет, ты мне отчёт предоставь — насколько он сжимает, как с качеством картинок и т. д., а таких сервисов я тебе могу перечислить очень много… на некоторые из них даже дал свои комментарии, если коротко — отстой. Здесь всё просто — рекомендуешь, значит несёшь ответственность.