Название файла изображения, текст заголовка изображения, прописанные переменные alt и title являются признаками тематики и содержимого контента и сообщают поисковым системам, что именно изображено на рисунке.
Хотя значение этих данных очень незначительно, но необходимо прописывать хотя-бы правильные имена файлов и alt теги.Это поможет находить изображения через Google Image Searchи другие поисковики картинок и привлечет трафик на сайт.
Изображения –это именно те ресурсы, которые занимают много места на странице и весят больше всего. Благодаря их оптимизации мы можем значительно уменьшить количество скачиваемых данных и улучшить работу сайта.
Согласно HTTP-архиву, 60% данных представляют собой изображения, состоящие из JPEG, PNG и GIF. По состоянию на начало 2018 года, на изображения приходилось 1.7 Mb содержимого, загруженного на страницу сайта среднего размера в 3.0 Mb. Чем больше сжато изображение, тем меньше пропускной способности канала занимает скачивание и тем быстрее браузер сможет показать страницу пользователю.
Прежде всего,задайте себе вопрос: действительно ли это изображение необходимо? Хороший дизайн должен быть простым и не ухудшать производительность. С другой стороны, было проведено ряд исследований, которые показали, что увеличение количества изображений на странице может резко повысить число конверсий. Однако, всегда необходимо проверять, нельзя ли достигнуть желаемого результата более эффективным путем:
- Благодаря CSS-эффектам (градиентам, теням и т. д.) и CSS-анимации вы можете создать ресурсы, которые четко выглядят при любом разрешении и масштабе и весят гораздо меньше, чем изображения.
- Веб-шрифты позволяют использовать красивые надписи, сохраняя возможность выбирать и искать текст, а также менять его размер. Благодаря этому работа с вашим ресурсом станет ещё удобнее.
Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них некоторые браузеры поддерживают новые форматы WebP и JPEG XR, для которых доступно большее сжатие и дополнительные возможности.
Немного про JPEG. Так как это формат с потерей данных, то с увеличением уровня компрессии, качество и размер изображения будет снижаться. Когда вы выбираете, какую настройку качества выбрать, подумайте о том, для чего нужны эти изображения:
- Лучшее качество – когда качество намного важнее, чем скорость загрузки. Это может быть связано с тем, что изображение имеет большое значение в дизайне или должно отображаться с полным разрешением.
- Хорошее качество –наблюдается некоторая экономия пропускной способности, при этом качество изображений по прежнему приемлемо.
- Низкое качество –высокая скорость загрузки при низком качестве изображения. Эти изображения подходят для слабых сетей и непритязательных пользователей вашего сайта.
- Наименьшее качество – максимальная экономия полосы пропускания. Огромное число артефактов на изображении.
Формат изображения JPEG имеет несколько режимов сжатия. Три самых популярных режима – базовый (последовательный), прогрессивный (Progressive JPEG) и формат сжатия без потерь. Удаляйте ненужные метаданные. Многие растровые изображения содержат лишнюю информацию о ресурсе: геоданные, сведения о камере и т. д. Для их удаления используйте любой пакетный редактор, например XnView. Неплохая программа по оптимизации изображений доступна здесь: https://imageoptim.com/versions.html
Ранее я еще рекомендовал онлайн софт для пакетного сжатия изображений: https://kraken.io/web-interface
Как понять, нужно мне производить оптимизацию изображений или пусть все остается как есть? Да очень просто –запустите тест: https://www.webpagetest.org/
Посмотрите раздел «Сжатие изображений»в отчете.
Здесь будут отображаться изображения, которые могут быть сжаты более эффективно, и общая экономия на размере файла. Так, например, для мордочки drmax.su:
Найдено 21 изображение общим размером 5 Mb, которое можно ужать при определенных условиях до 631Kb –т.е. экономия составит около 87%. Ну и ниже будут приведены примеры обработки всех изображений
Таким образом, некоторая работа по оптимизации изображений нужна, несмотря на то, что все они были предварительно уже оптимизированы, сжаты и обрезаны до необходимых размеров.
Следующий путь оптимизации –использование отложенных изображений (ленивая загрузка, Lazy Loading).
Данная техника полезна для «некритических»изображений, как правило, расположенных ниже уровня сгиба. Отложенная загрузка может значительно ускорить работу длинных веб-страниц с большим количеством изображений. При этом загрузка происходит по мере необходимости или после загрузки и вывода на экран базового контента.