Сделайте изображение вашего сайта идеальным с помощью images.tooling.report

Проверьте состояние инструментов изображения.

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

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

Почему это?

Изображения составляют огромную часть передаваемых сайтом байтов — и эти байты складываются! Фактически мы обнаружили, что неоптимизированные изображения составляют почти 75% общего размера страницы . За все эти потраченные впустую байты приходится платить. Вот почему в исследовании миллионов реальных пользовательских сессий на страницах, которые конвертировались, было на 38% меньше изображений, чем на страницах, которые не конвертировались. Так стоит ли вам просто удалить все свои изображения? Конечно, нет. Но вы должны убедиться, что отправляемые вами изображения оптимизированы для всех пользователей, независимо от того, какие устройства они используют.

Что это такое?

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

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

Скриншот целевой страницы images.tooling.report в темном режиме.

Конечно, каждый сайт — это снежинка: ни один инструмент или сервис не сделали абсолютно всего, что мы искали. Это ожидаемо! Поэтому мы разбили то, что тестировали, на разные категории. Мы рассматриваем сети доставки контента (CDN), самостоятельные проекты, плагины системы управления контентом (CMS) и конструкторы сайтов. Это довольно расплывчатые определения, которые на самом деле созданы для того, чтобы сделать сравнение различных вариантов более актуальным:

  • Плагины CMS — это пакеты, которые легко разрабатывать на таких платформах, как WordPress.
  • Разработчики сайтов сравнивают ряд различных сервисов, которые вы можете использовать для создания своего веб-сайта.
  • Самостоятельное размещение предназначено для разработчиков, которым удобно клонировать проект git или запускать собственный образ Docker в рабочей среде.
  • CDN немного сложнее. Некоторые из них представляют собой CDN в традиционном смысле этого слова, а другие — это сервисы, которые проксируют или размещают ваши изображения на периферии.

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

Что дальше?

Думаете, мы упустили какой-нибудь инструмент или услугу для работы с изображениями? Дайте нам знать! И инструменты, и сервисы, и сами тесты — это живая, обновляющаяся вещь. Всякий раз, когда вам нужно быстро проверить современное состояние доставки изображений, убедитесь, что ваша первая остановка — images.tooling.report .

Изображение героя Майкла Маасена на Unsplash.