Правильная оптимизация изображения имеет решающее значение для быстрой загрузки веб-сайта . Всякий раз, когда вы проверяете свой сайт с помощью инструмента, например с PageSpeed ​​Insights,  вы всегда найдете полезные подсказки для улучшения ваших изображений.  Зачастую все советы связаны сжатием картинок, но вы можете потерять качество, в данном уроке мы хотим рассказать вам, как правильно использовать изображения у себя на сайте, при этом не потеряв в производительности своего сайта, а также сохранить качество изображений.

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

Экспорт правильных форматов

Независимо от того, умеете ли вы работать в Sketch, Photoshop или Illustrator, вы всегда можете экспортировать изображения в различных форматах.

Анимированные GIF-файлы обычно и должны оставаться в виде GIF-файлов. Но есть еще три типа файлов, которые вы должны учитывать и знать, как использовать:

  • PNG — отлично подходит для прозрачности и иллюстраций;
  • JPEG — лучшее для сложных фотографий и больших изображений;
  • SVG — сжатая векторная графика для масштабируемости;

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

Например, в Photoshop я обычно экспортирую файлы JPEG по плотности пикселей 65-70 , а затем запускаю их через инструмент сжатия изображений, чтобы еще больше уменьшить размер файла.

Запуск изображений через CDN

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

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

Маленькие сайты с ограниченным бюджетом должны приглянуться такие сервера как BunnyCDN или BelugaCDN, оба отличные варианты.

Уменьшение размеров изображений

Качество изображения влияет на размер файла. Но вы также можете изменить общий размер изображения для повышения производительности. Это особенно применимо для сайтов, которые поддерживают изображения @ 2x для оптимизации. Я рекомендую загружать изображение @ 1x, когда первая страница загружается, а затем — ленивая загрузка в альтернативе @ 2x.

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

Лучшие инструменты оптимизации изображений

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

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

Я впервые наткнулся на  Compressor.io  пару лет назад, и это был мой основной продукт для сжатия изображений. Этот бесплатный инструмент, созданный  Stephane Lyver,  позволяет загружать изображения со своего компьютера и автоматически сжимать их через интернет. Все службы запускаются на удаленных серверах, поэтому вы не используете вычислительную мощность вашего компьютера для обработки сжатия изображения.

Лучше всего он поддерживает все четыре файла JPG / PNG / GIF / SVG, чтобы вы могли оптимизировать практически все изображения.

Tiny PNG

Сайт  TinyPNG  позволяет загружать файлы PNG или JPEG непосредственно с вашего компьютера и сохранять полученные сжатые изображения. Он закрывается всего 20 картинами сразу, поэтому, если вы пытаетесь оптимизировать сотни фотографий, это может занять некоторое время. Вот почему команда выпустила  плагин TinyPNG Photoshop за 50 долларов США.

Плагин работает как для Mac, так и для Windows, поэтому это хороший выбор, если вы предпочитаете сжимать свои фото в Photoshop. Хотя вы не можете победить такой ценник, тогда сайт TinyPNG, лучшее решение. Если вы используете WordPress, вы также можете попробовать бесплатный  плагин TinyPNG для WordPress.

Optimizilla

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

EZGIF

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

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

WP SmushIt

Ранее я упомянул плагин TinyPNG WordPress, но он бледнеет по сравнению с  WP SmushIt. Этот бесплатный плагин работает для сжатия всех файлов изображений, загруженных в WordPress, и он покажет вам, сколько места вы сохраняете с помощью плагина.

Он автоматически удалит громоздкие метаданные и очистит изображения на внешних серверах, чтобы ваш сайт быстро загружался или даже быстрее обычного! WP SmushIt работает отлично с десятками плагинов изображений WordPress, таких как галереи и портфолио. Вам будет трудно найти другой плагин, подобный этому, предлагая аналогичные функции и преимущества при сжатии изображений.

Выводы

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