От автора: интернет стал одной из самых важных и широко используемых коммуникационных платформ в современном мире. Но одним из недостатков этой невероятной технологии является то, что мы, разработчики, не имеем никакого контроля над аппаратными характеристиками устройств, с которых наши пользователи будут заходить на веб-сайт. Конечный пользователь может получить доступ к вашему веб-сайту на устройстве высокого или низкого уровня с хорошим или плохим подключением к Интернету. Это означает, что вы должны убедиться, что ваш сайт максимально оптимизирован, чтобы вы могли удовлетворить потребности любого пользователя.
В данной статье основное внимание будет уделено веб-оптимизации мультимедийного контента, такого как изображения и видео.
Совет: используйте Bit (Github) для совместного использования, документирования и управления повторно используемыми компонентами из разных проектов. Это отличный способ улучшить повторное использование кода, ускорить разработку и создавать масштабируемые приложения.
Медиа, как известно, увеличивает взаимодействие пользователей с вашим контентом. Но это также позволяет оптимизировать ваш сайт с помощью внутреннего SEO. По словам Кимбе Макмастера, у вас в 53 раза больше шансов оказаться на первой странице результатов Google, если вы используете на своем веб-сайте видео.
Что не так с текущими реализациями
В наши дни изображения и видео великолепны. Они имеют высокое качество и очень хорошо доставляются. Но одна из основных проблем текущего медиа-контента — это размер. Согласно Джечелину, в среднем веб-страница потребляет 5 МБ данных только для изображений. Это может стать тяжелым бременем для пользователей, поскольку в некоторых странах это может быть очень дорогостоящим, особенно в отношении мобильных данных. У пользователей также будут проблемы со временем загрузки сайта, особенно с более низкой скоростью соединения. Это может негативно повлиять на ваш сайт.
Традиционно использовались такие форматы изображений, как JPEG, PNG и GIF. А для видео использовались такие форматы, как MP4, AVI и WMV. Но этих форматов недостаточно. Требовалось что-то лучшее, что-то с меньшей полезной нагрузкой, но без ущерба для качества контента.
Впервые я узнал о WebP, когда посетил Angular Conference 2019, проходившую в Коломбо, Шри-Ланка. Шри-Ланка — потрясающая страна, которую стоит посетить хотя бы раз в жизни. Невероятную сессию провела Джеселин Йен.
WebP — изображения
WebP — это современный формат изображений, который обеспечивает сжатие как с потерями, так и без потерь при меньшем размере полезной нагрузки. Этот формат изображений в настоящее время разрабатывает технический гигант — Google. В последнее время WebP набирает обороты, особенно со стороны крупных технологических компаний, в основном из-за его производительности и поддержки со стороны Google. WebP напрямую конкурирует с форматами изображений с потерями, такими как JPG, и форматами без потерь, такими как PNG.
Преимущества
Изображения без потерь WebP на 26% меньше по размеру по сравнению с PNG.
Изображения WebP с потерями на 25–34% меньше сопоставимых изображений JPEG при эквивалентном индексе качества SSIM.
WebP с потерями также поддерживает прозрачность изображений.
Сравнение Джереми Вагнера WebP с потерями и JPG — Источник: InsaleLab
Сравнение Джереми Вагнера WebP без потерь с PNG — Источник: InsaleLab
Недостатки
Единственная причина, по которой Интернет не был обновлен полностью WebP — это совместимость.
Браузеры Safari на данный момент еще не поддерживают его. Но появились новости о том, что в ближайшем будущем в Safari появится поддержка WebP.
Системы управления контентом (CMS) в настоящее время не поддерживают WebP по умолчанию. Но вы можете установить плагин или расширение.
Совместимость с браузерами
Совместимость WebP с браузерами — Источник: CanIUse
Обратная совместимость
Обеспечить обратную совместимость для изображений WebP просто, для этого потребуется всего 5 строк.
<picture> <source type="image/webp" srcset="img/awesomeImage.webp"> <source type="image/jpeg" srcset="img/awesomeImage.jpg"> <img src="img/awesomeImage.jpg"> </picture>
Приведенный выше фрагмент кода гарантирует, что даже самые старые браузеры смогут отображать изображение, которое они поддерживают.
WebM — видео
WebM — это бесплатный формат видеофайлов для использования в теге HTML5 video, поддерживаемый Google. Впервые объявленный на конференции Google I / O 2010, WebM планировался как альтернатива существующему формату MP4 с его кодеком H.264.
Согласно Google, «WebM определяет структуру файлового контейнера, видео- и аудиоформаты, а файлы состоят из видеопотоков, сжатых с помощью видеокодеков VP8 или VP9, и аудиопотоков, сжатых с помощью аудиокодеков Vorbis или Opus».
Известно, что WebM обеспечивает отличное качество видеофайлов с меньшим размером полезной нагрузки. Это делает его идеальным для потокового видео. Фактически, видео Youtube обслуживаются в основных браузерах в WebM.
Преимущества
Лицензирование — одно из главных преимуществ этого видеоформата в том, что он бесплатный. Существовали различные проблемы с лицензированием таких форматов, как MP4 (H.264), но WebM упростил задачу с помощью своей лицензии с открытым исходным кодом.
Качество — есть несколько мнений относительно качества VP8, VP9 и H.264, H.265. Но большинство согласны с тем, что качества в чем-то равны.
Размер — поскольку технология работает путем сжатия файлов, что делает общий размер WebM намного меньше по сравнению с MP4, видео WebM намного более доступны, и файлы можно быстро загружать из Интернета.
Недостатки
Как и для его собрата, основным недостатком WebM является совместимость с браузерами. Safari и IE на данный момент еще не полностью поддерживают WebM.
Меньшее количество медиаплееров поддерживает видео WebM или требуют установки компонентов или плагинов.
Видео WebM нельзя воспроизводить на большинстве портативных устройств. Но это со временем меняется.
Совместимость с браузерами
Совместимость WebM с браузерами — Источник: CanIUse
Обратная совместимость
Как и у его собрата, обратная совместимость может быть обеспечена в браузерах, не поддерживающих WebM, ее можно реализовать с помощью приведенного ниже фрагмента кода.
<video width="640" height="480" controls> <source src="movie.webm" type="video/webm"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Ваш браузер выберет первый поддерживаемый им источник.
Дальнейшие улучшения
На данный момент мы знаем о преимуществах использования таких мультимедийных форматов, как WebP и WebM. Но когда вы начинаете их реализовывать, поддерживать несколько копий одного и того же файла в разных форматах может стать настоящей головной болью.
Например, если вы загружаете PNG или JPG и хотите использовать WebP в поддерживаемых браузерах, вам придется сохранить копию того же файла на своем сервере. Это может быть проблемой, так как требуется дополнительный шаг для преобразования файла при загрузке и место в хранилище, так как вы сохраняете повторяющиеся файлы.
Вы можете решить эту проблему, используя мощь приложений SaaS, таких как Cloudinary и Gumlet. Эти сервисы предоставляют возможность динамически конвертировать файлы на лету. Все, что вам нужно сделать, это загрузить изображение / видео в исходном формате, а при запросе изображения / видео добавить свойство к URL-адресу файла, чтобы получать оптимизированную версию на лету. Кроме того, эти сервисы автоматически кэшируют файлы, а это означает, что после доступа из определенного региона, если кто-либо еще захочет получить доступ к тому же файлу в том же формате, будет доставлен файл из кеша. Это делает работу еще быстрее.
В основном это возможно благодаря встроенным сетям CDN, которые гарантируют, что ваш контент будет доставлен как можно быстрее в нескольких регионах.
Если вы не хотите тратить несколько долларов на эти услуги, вы можете создать собственную версию этого приложения с помощью Firebase. Хотя это не было бы полностью бесплатным, для небольшого веб-сайта вы можете использовать бесплатную квоту.
Заключение
Благодаря огромному количеству талантливых разработчиков веб-сайты стали намного более привлекательными, а дизайн потрясающим. Но чтобы закончить это правильно, необходимы правильные стратегии оптимизации. Это важно для успеха веб-сайта.
У вас может быть самый красивый веб-сайт, но если пользователь не будет удовлетворен — это обернется неудачей. Людям очень трудно угодить!! Вот демонстрационное приложение, которое я создал. Вы можете просмотреть исходный код здесь.
Автор: Mahdhi Rezvi
Источник: https://blog.bitsrc.io
Редакция: Команда webformyself.