Быстродействие фронтенда: оптимизация изображений

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

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

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

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

Уменьшайте слишком большие изображения

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

Используйте спрайты

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

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

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

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

  • Compass  - крутой фреймворк, которой использует SASS.
  • SpritePad  - online инструмент для компоновки спрайтов.
  • SpriteCow  - еще один online инструмент для составления спрайтов.
  • Glue  - консольное приложение для генерации спрайтов.

Изображения с прогрессивной загрузкой

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

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

Не вдаваясь в технические подробности скажу, что метод прогрессивной загрузки можно применить к JPG и PNG изображениям (хотя у PNG этот метод называется немного иначе, но суть та же). Для этого достаточно сохранить ваши JPG в режиме Progressive, а PNG в режиме Interlaced. Если не знаете как, то Photoshop прекрасно справляется с этой работой. Попробуйте, и вы несомненно почувствуете разницу.

Выводы

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