20 лет профессионально
разрабатываем сайты в РФ
разрабатываем сайты в РФ
По мере увеличения количества изображений и видеороликов, сайт начинает все медленнее загружаться, что приводит к ухудшению опыта взаимодействия. Согласно данным компании HTTP Archive, размер среднего сайта теперь составляет 2,1 Мб, по сравнению с 1,5 Мб пару лет назад. Одной из главных причин подобного роста является добавление такого контента, как видео и изображения.
Последствия добавления большого количества такого рода контента на сайт могут быть весьма драматичными, так как он пожирает дорогостоящую пропускную способность и продлевает время, которое посетители сайта тратят на ожидание загрузки страниц. Если учесть, что каждая лишняя секунда снижает общий показатель конверсии вашего сайта и, в конечном итоге, доходы, желание оптимизировать изображения для их загрузки в максимально короткое время является вполне понятным. В этой статье мы рассмотрим, как оптимизировать ваши изображения, чтобы улучшить опыт взаимодействия и минимизировать затраты, а также снизить нагрузку на сервер. Вот несколько наиболее распространенных ошибок, которые вы можете допустить в управлении изображениями, и как их избежать.
Несмотря на то, что Google добавил поддержку своего формата изображений WebP в браузер Chrome, а Microsoft сделал то же самое для формата JPEG-XR в своих браузерах Internet Explorer и Edge, веб-разработчики до сих пор редко используют их. Возможно, вы не знакомы с этими форматами или, может быть, считаете слишком сложной доставку изображений в различных форматах для разных браузеров и устройств.
В результате, вы придерживаетесь старых добрых JPEG и PNG и не пользуетесь преимуществами современных форматов.
Как это исправить?
Конвертируйте изображения в форматы WebP и JPEG-XR, не забывая предварительно настроить качество сжатия. Кроме того, используя обнаружение браузера, который получает доступ к каждому конкретному изображению, и предоставляя соответствующую версию изображения, вы можете гарантировать пользователям наилучшее качество и время загрузки картинки.
Вы можете полагаться на формат GIF для отображения коротких видеоклипов на новостных сайтах и в социальных сетях. Хотя формат GIF прост в использовании для встраивания видео клипов с помощью простого HTML-тега «img», он не является эффективным для захваченного видео, потому что файлы огромны и медленно загружаются, особенно на мобильных устройствах, что приводит к повышению расходов на увеличение пропускной способности и высокой загрузке процессора.
Как это исправить?
Есть несколько способов доставки и встраивания видеоклипов и анимации с использованием современных форматов, таких как Animated WebP для пользователей браузера Chrome. Другой подход заключается в применении сжатия с потерями файла GIF, что приводит к небольшому снижению качества изображения, но значительно уменьшает размер файла. GIF-файлы также могут быть преобразованы в MP4 или WebM видеоформаты, далее клипы встраиваются посредством HTML5.
В большинстве современных браузеров, это работает плавно и сайт выглядит точно так же, но загружается намного быстрее. Используя один из этих способов, вы сможете значительно уменьшить размер файлов, сократить время загрузки страницы, улучшить опыт взаимодействия и снизить затраты на пропускную способность.
Современные мобильные устройства и ноутбуки имеют высокие показатели пиксельного соотношения дисплея. Так как вы хотите, чтобы ваш сайт выглядел великолепно на этих устройствах, вы можете встраивать изображения с удвоенным разрешением. Несмотря на то, что это хорошая практика, многие разработчики, как правило, предлагают изображения одного и того же размера всем пользователям.
В результате, пользователям с обычными дисплеями (а не с Retina дисплеями) приходится ждать загрузки изображения с высоким разрешением, тогда как им вполне достаточно изображения с разрешением в 2 раза меньше. Это приводит к потерям времени на ожидание загрузки страниц и увеличивает затраты на пропускную способность.
Как это исправить?
Загружайте на сайт 2 варианта изображений (обычное и в высоком разрешении) и используйте автоматическое определение пиксельного соотношения страницы в браузере текущего пользователя.
Это позволит вам демонстрировать стандартные изображения для пользователей с обычными дисплеями и картинки с удвоенным разрешением для пользователей устройств с Retina дисплеем.
Разработчики часто используют изменение размера изображений на стороне браузера, а не сервера. В современных браузерах, конечный результат выглядит точно так же, но в плане пропускной способности история совершенно другая. Посетители сайта тратят драгоценное время на загрузку излишне большого изображение, а вы тратите пропускную способность для доставки его к ним.
Для более старых браузеров, эта проблема еще более выражена, так как их алгоритмы изменения размера изображения далеки от идеала.
Как это исправить?
Даже если одно и то же изображение должно быть представлено в виде различных по размеру миниатюр, чтобы соответствовать различным страницам, стоит создать несколько эскизов, а не доставлять большое изображение, полагаясь на браузер для изменения его размера.
Формат JPEG произвел настоящую революцию в Интернете. В течение многих лет этот формат сжатия позволял веб-разработчикам предоставлять изображения с высоким разрешением и детализацией, используя лишь часть пропускной способности, необходимой любому другому конкурентному формату изображений.
Однако многие разработчики и дизайнеры не экспериментируют со сжатием JPEG, несмотря на то, что это может помочь существенно сократить размер файла без заметной потери качества. Хотя наиболее распространенным является 85%-е качество JPEG, есть множество сайтов с изображениями 95%-го качества. Конечным результатом является повышенная нагрузка на пропускную способность и ухудшение опыта взаимодействия.
Как это исправить?
Не бойтесь экспериментировать с более низким уровнем качества JPEG. Для некоторых сайтов, использование 50%-го качества JPEG дало весьма неплохой результат. Хотя файлы JPEG более высокого качества всегда будут выглядеть лучше, это не всегда будет стоить дополнительной нагрузки на nпропускную способность и увеличенного времени ожидания.
JPEG, PNG и GIF являются наиболее распространенными форматами файлов, используемыми сегодня, но каждый из них имеет свое назначение. Используя какой-либо формат не по назначению, вы только напрасно тратите время своих посетителей. Частой ошибкой является использование формата PNG для фотографий. Существует распространенное заблуждение, что PNG, как формат без потерь, обеспечивает максимально возможное качество фотографий.
Несмотря на то, что это действительно так, это совсем ненужная оптимизация. JPEG с относительно высоким качеством дает фото сопоставимого качества и размером гораздо меньше, чем файл в формате PNG.
Как это исправить?
PNG должен использоваться для сгенерированных компьютером изображений (диаграммы, логотипы и т.д.) или когда вам нужна прозрачность изображения (накладываемые слои). JPEG следует использовать для фотографий. GIF должен использоваться для анимации.
Несмотря на то, что PNG представляет собой формат без потерь качества, такой файл может быть сжат с помощью свободно доступных инструментов, которые сокращают его размер на 50% и существенно не влияют на качество. К сожалению, многие разработчики и веб-дизайнеры пропускают этот шаг и используют неоптимизированные изображения.
Как это исправить?
PNGCrush и OptiPNG — это две библиотеки оптимизации изображений с открытым исходным кодом и если вы их еще не используете, то должны обязательно дать им шанс.
Многие современные сайты позволяют пользователям загружать свои фотографии. Неважно что это за фото, изначально они были сняты с помощью современной фотокамеры, которая, скорее всего, сохраняет много метаданных для каждого файла. В большинстве случаев, было бы отличной идеей удалять этот метаданные, но разработчики редко тратят на это время. В результате, загрузка изображений требует большей пропускной способности и ухудшает опыт взаимодействия.
Как это исправить?
Убедитесь, что лишние метаданные из файлов ваших изображений и загруженных фотографий пользователей удалены. Если эта информация необходима, вы можете сохранить доступ к ней где-то, просто она не должны быть частью ваших изображений. Единственными метаданными, необходимыми вам, является оригинальная ориентация кадра. Это нужно для правильного отображения фото на сайте. При редактировании информации Exif, убедитесь, что вы повернули изображение в соответствии с его правильной ориентацией, прежде чем стирать какие-либо данные.
