Можно ли сделать существующие изображения адаптивными без создания новых изображений? Можем ли мы загрузить одно высококачественное исходное изображение и забыть об изменении размера и оптимизации для всех устройств? А как насчет того, чтобы следовать последним передовым методам, например, показывать изображения с какой-то причудливой анимацией только при входе в область просмотра и по-прежнему использовать простой тег ‹img /› только с одним источником изображения? Цель данной статьи - ответить на эти вопросы.
Эта проблема
На изображения приходится большая часть времени загрузки страницы (44%). Большие неоптимизированные изображения значительно замедляют работу вашего сайта.
Следуя современным тенденциям, в идеале вы бы:
- Измените размер больших изображений до размера, необходимого для вашего дизайна, и сгенерируйте несколько изображений для разных размеров экрана устройства.
- Удалите все ненужные метаданные и оптимизируйте сжатие JPEG и PNG
- Эффективная отложенная загрузка изображений для ускорения начальной загрузки страницы и экономии трафика.
- Используйте технику «размытия» или «отслеживаемый заполнитель» SVG или изображение низкого качества, чтобы показать предварительный просмотр изображения во время загрузки
- Сохраняйте положение изображения, чтобы ваша страница не прыгала во время загрузки изображений.
Постоянное выполнение этого на сайте требует много скучных трудовых усилий. А чтобы изменить изображение, даже просто обрезать 50 пикселей сверху, вам нужно будет регенерировать и оптимизировать новые изображения.
Люди часто забывают, что время - деньги. Обычно люди делают что-то вручную, потому что это легко и почти не требует исследований. На целевой странице можно настроить 10 изображений. Но если вам нужно управлять 30 000 фото и видео с пяти разных платформ, вам понадобится хорошее программное обеспечение для управления цифровыми активами.
В 2019 году оптимизированные и адаптивные изображения должны быть простыми и стандартными.
Решение
Для упрощения мы разделим решение на две части: Front-end и Back-end.
Внутренняя часть
Оптимизация изображения должна быть автоматизирована. Большинство CDN и сторонних решений, таких как Cloudimage, предлагают комплексные автоматизированные решения для оптимизации изображений. Время, которое вы потратите на чтение сообщений в блогах, библиотеки и управление пограничным случаем (попробуйте изменить размер анимированных GIF-файлов или работать с альфа-каналом PNG), стоит больше, чем ежемесячная плата за услугу (Cloudimage имеет бесплатный план) .
Когда изображение впервые загружается на ваш веб-сайт или мобильное приложение, серверы изменения размера Cloudimage загрузят ваше исходное изображение с исходного сервера, изменят его размер и доставят к вашему пользователю через молниеносные сети доставки контента (CDN). После изменения размера изображения в выбранном вами формате Cloudimage отправит его в сеть доставки контента, которая, в свою очередь, быстро доставит его вашим посетителям, быстро реагируя на экран разных размеров.
Прочтите следующую статью, чтобы узнать больше о сервисе Cloudimage.
Фронтенд часть
Используя сервис Cloudimage, нам не нужно создавать новые изображения, так как мы генерируем несколько изображений для разных размеров экрана и плотности пикселей.
Например, если ваше исходное изображение доступно по адресу:
создание изображений нескольких размеров так же просто, как предварительное исправление URL-адреса исходного изображения с помощью:
Что нам сейчас нужно, так это выяснить, как мы можем доставить изображения оптимального размера. Во-первых, давайте посмотрим на типы адаптивных изображений:
- Изображения, которые растягиваются в окне браузера посетителя.
- Изображения, растянутые по контейнеру с жидкостью
- Изображения с фиксированной шириной и высотой
- Изображения с разными пропорциями в разных точках ширины экрана
Все существующие в Интернете решения основаны на ширине области просмотра браузера вашего посетителя. Но они не идеальны, так как требуют большого количества вычислений. Например, если мы хотим создать полностью адаптивное изображение, мы придумаем что-то вроде этого для адаптивного (с точками останова) и отзывчивого (гибкий дизайн) макетов:
Говоря абстрактно, у меня был вопрос: «Можем ли мы просто использовать тег ‹ img / › только с источником изображения и сделать наше изображение полностью адаптивным?» Ответ: ДА, с некоторой помощью JS.
Но как мы можем определить правильный размер для наших изображений? путем определения ширины контейнера изображения. Определение ширины контейнера не влияет на производительность по сравнению с загрузкой изображения неправильного размера. Кроме того, мы можем проверить плотность пикселей экрана.
Посмотрим на примере.
У нас есть исходное изображение | 5,8 мб
Давайте применим то, что мы узнали, и сначала определим ширину контейнера изображения и соотношение пикселей устройства.
- Ширина контейнера изображения составляет 450 пикселей (можно найти с помощью getBoundingClientRect).
- Соотношение пикселей устройства - 2 (можно найти с помощью devicePixelRatio).
Округлим ширину контейнера до следующего возможного значения, которое можно разделить на 100 без остатка = ›500 пикселей. Это сделано для кеширования, чтобы не все изображения кешировались размером 1 пиксель, а только 100 пикселей, 200 пикселей, 300 пикселей…
Полученная ссылка будет следующей | 119 кб
Https://demo.cloudimg.io/width/1000/q35.foil1/https://cloudimage.public.airstore.io/demo/alain.jpg
Остальная часть будет такой же, как и большинство решений для отложенной загрузки изображений.
В цифрах
У нас есть исходное изображение, сохраненное через CDN, с разрешением 6240 × 4160 пикселей и размером 8,7 МБ:
В таблице ниже мы можем увидеть, какой размер и разрешение будет загружен в зависимости от размера контейнера изображения.
Реализовать за секунды
Представьте, что у вас есть простая библиотека, которая поддерживает все эти функции и может быть реализована за считанные минуты? Вот что мы разработали и сделали с открытым исходным кодом на Github: JS, React и Angular. Плагины имеют несколько полезных настроек, которые позволяют изменять качество сжатия, отключать ленивую загрузку и скрывать анимацию при загрузке изображения. Кроме того, вы можете применять некоторые фильтры или преобразования, например обрезать изображения по-разному, в зависимости от ширины экрана.
Заключение
Поначалу адаптивные изображения могут показаться ошеломляющими, но с помощью Cloudimage и плагина адаптивного изображения вы можете автоматизировать почти все повторяющиеся задачи.
Я был бы очень признателен за любые отзывы, и если вам понравятся статьи и плагины, хлопают 👏 хотя бы 50 раз) Это будет мотивировать меня писать о новых крутых вещах.
