Оптимизация изображений

19.11.2012

Оптимизация изображений

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

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

Анализ содержимого страницы

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

Думаю, я смог убедить вас в том, что оптимизация изображений — это важно.

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

Механизмы сжатия

Бывает два вида изображений — векторные и растровые. Векторные только-только начинают появляться на сайтах(я про SVG), поэтому про них мы поговорим в другой раз. А вот растровые — как раз наш случай…

Пример оптимизации изображения

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

Бывает сжатие двух видов:

  • Сжатие с потерями, когда выбрасывается информация из исходного файла. Подразумевается, что визуально изображения будут неотличимы. Этот подход очень зависит от восприятия. У меня есть клиент, который видит разницу между степенью сжатия JPG 90 и 85. Форматы — JPG, GIF
  • Сжатие без потерь. Принцип работы довольно сложный, но в двух словах выглядит так — находится некая последовательность в расположении данных и генерируется вторая последовательность, которая описывает первую, но имеет меньший размер. Статья на Википедии, кому интересно — тут. Форматы — PNG, PSD, TIFF(хотя PNG и TIFF тоже умеет сжиматься с потерями)

В общем случае, на 99% сайтов используется три формата изображений: JPG, GIF и PNG. От них и будем отталкиваться…

JPG

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

GIF

Разработан в 80-х годах прошлого века и уже безнадежно устарел, как по мне. Важная штука — он поддерживает несколько кадров в одном изображении. Насколько я знаю, пока общедоступной альтернативы этому нет, но работа ведется. Категорически не подходит для печати и передачи фотографической информации, из-за своей ограниченной палитры цветов. Поддерживает альфа-канал (прозрачность)

PNG

А вот этот формат — мой любимый Умеет хорошо сжиматься (в разумных пределах), визуально не портит изображение.  Гораздо лучше работает с альфа-каналом, в отличии от GIF.

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

Лично я использую только два формата — PNG и JPG. Рассмотрим пример моего блога, аналогию со своим проектом проведете самостоятельно.

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

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

Инструменты для оптимизации изображений

PunyPNG

PunyPNG

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

Smush it

SmushIT

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

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

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

Есть еще один небольшой лайфхак насчет оптимизации изображений. Сервис gtmetrix.com позволяет скачивать уже оптимизированные изображения, которые можно просто заменить через FTP.

gtmetrix

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

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

Удачного дня

follow us in feedly

Комментариев: 13

  1. Alldream

    Онлайн сервисы это замечательно правда только для одной, десяти, ну может при особом терпении 20 картинках, но что делать когда надо смолоть 50, 100, 200 картинок? Тут только локальный софт может прийти на помощь или ставить на блог плагины-оптимизаторы.

    Ответить
  2. алиса

    Попробовала 2 онлайновых сервиса, что Вы предлагали. К сожалению, оба не захотели грузить мои картинки — какие-то ошибки и баги. Нашла вот такой сайт http://jpeg-optimizer.com/ Очень удобный и сжимает неплохо, на мой взгляд. С ним у меня все получилось)

    Ответить
  3. алиса

    Отличная статья, я как раз искала информацию по сжатию фотографий, с одной стороны хочется сохранить всю красоту картинки, а с другой — сайт тоже не резиновый)) начинаются тормоза
    Спасибо!

    Ответить
  4. olga

    Подскажите как уменьшить загружаемый размер страницы?

    Ответить
    • GerinG

      Вообще, это очень обширная тема… Она достойна отдельной статьи. Но основные методы это:
      — сжатие картинок, наверное, самый основной способ уменьшения размера
      — сборка загружаемых картинок в спрайт
      — сжатие и оптимизация файлов стилей
      — сжатие скриптов, загрузка скриптов с CDN того же Гугла или Яндекса.

      Это все без удаления ненужного или неважного. С удалением — еще веселее получится

      Ответить
  5. SwaEgo

    Я вот вечно забываю заниматься оптимизацией, хотя на всех моих сайтах картинки занимают 90%, разве что в Фотошопе иногда сжимаю.
    Насчёт оффлайна, перепробовал много программ, на мой взгляд самая-самая RIOT (http://luci.criosweb.ro/riot/) , пакетную тоже поддерживает, делает быстро, качественно и бесплатно =)

    Ответить
    • GerinG

      Спасибо за рекомендацию, Толь… Пощупаем, покрутим. Я так понял что программа только для оптимизации, для просмотра ее юзать не сильно удобно, так?

      Ответить
  6. Aime

    Полезный сервис http://Unshit.com, отлично выявляет ошибки в оптимизации, которые влияют на скорость загрузки сайта. Забавно, что ошибки считаются, хм, фекалиями

    Ответить
    • GerinG

      Да, сервис хорош. Немаловажно — он на русском. Я постоянно им пользуюсь для решения вопросов с технической оптимизацией. С недавних пор даже клиентов пускаю туда, показать что не так с их сайтом. И фишка с фекалиями работает лучше, чем просто ошибка, доходит лучше )))

      Ответить
  7. web11

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

    Ответить