От автора: изменение размера изображений играет большую роль в оптимизации веб-ресурсов. За последние три года объем данных на средней мобильной веб-странице удвоился. Увеличивающиеся изображения доставляют неудобства пользователям, которые превышают свои ограничения на передачу данных, долго ожидают, пока загрузятся медленные веб-сайты, и даже уходят, если веб-сайт не загружается в течение разумного периода времени.
Проблема заключается в том, что многие из этих изображений настолько медленные, потому что их размеры больше, чем нужно, и эти данные передаются, абсолютно не оказывая (положительного) влияния на восприятие пользователя. Чтобы привести конкретный пример, давайте рассмотрим эту фотографию Lava Lamp Wall от Cloudflare:
Вверху вы видите фотографию, размер которой составляет 300 пикселей в ширину. Ниже вы видите то же изображение с оригинальным высоким разрешением, масштабированное в настольном веб-браузере. На экране с обычным DPI они оба выглядят одинаково, но изображение справа загружает в двадцать раз больше данных. Даже у лучших и самых добросовестных разработчиков, изменяющих размеры каждого изображения для обработки любой возможной геометрии устройства, это отнимает драгоценное время. Не говоря уже о том, что совершенно просто забыть сделать этот ресайзинг вообще.
Сегодня мы запускаем новый продукт — Ресайзинг изображений — чтобы раз и навсегда решить эту проблему.
Анонс ресайзинга изображений
С Ресайзингом изображений Cloudflare добавляет еще один важный продукт в свой набор доступных оптимизаций изображений. Этот продукт позволяет клиентам выполнять широкий спектр действий с изображениями.
Изменить размер — исходное изображение будет изменено до указанной высоты и ширины. Это действие позволяет создавать несколько вариантов разных размеров для каждого конкретного использования.
Кадрирование — исходное изображение будет изменено до нового размера, который не поддерживает исходное соотношение сторон, и часть изображения будет удалена. Это может быть особенно полезно для снимков лица и изображений продуктов, где необходимо достичь разных форматов, сохраняя только часть изображения.
Сжатие — размер исходного файла будет уменьшен за счет применения сжатия с потерями. Это следует использовать, когда незначительное снижение качества является приемлемым компромиссом для уменьшения размера файла.
Преобразование в WebP — если браузер пользователя поддерживает его, исходное изображение будет преобразовано в WebP. Для доставки изображения WebP используется современный, высоко оптимизированный формат изображения.
Используя комбинацию этих действий, клиенты сохраняют одно высококачественное изображение на своем сервере, а изменение размера изображения можно использовать для создания специализированных вариантов. Без каких-либо дополнительных усилий для каждого варианта также автоматически будет применено глобальное кэширование Cloudflare.
Примеры
Миниатюры для интернет-магазинов
Сайты электронной коммерции обычно хранят высококачественное изображение каждого продукта. Из этого изображения им нужно создавать разные варианты в зависимости от того, как будет отображаться этот продукт. Одним из примеров является создание миниатюр для представления каталога. Используя Ресайзинг изображений, если изображение высокого качества размещено здесь:
https://example.com/images/shoe123.jpg
вот как отобразить миниатюру 75×75 пикселей:
<img src="/cdn-cgi/image/width=75,height=75/images/shoe123.jpg">
Адаптивные изображения
При настройке сайта для работы с различными типами и размерами устройств важно всегда использовать изображения правильного размера. Это может быть сложно, когда изображения предназначены для заполнения определенного процента экрана. Чтобы решить эту проблему, можно использовать <img srcset sizes>.
Без ресайзинга изображений нам нужно было бы создавать и сохранять несколько версий одного и того же изображения. В этом примере хранится одна высококачественная копия hero.jpg, а для изменения размера каждого необходимого размера используется ресайзинг изображений.
<img width="100%" srcset=" /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, /cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w, /cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w, /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w, /cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w, " src="/cdn-cgi/image/width=960/assets/hero.jpg">
Предоставление максимального размера без изменения URL
Ресайзинг изображений также доступен в Cloudflare Worker. Workers позволяют писать код, который запускается ближе к вашим пользователям по всему миру. Например, вы можете добавить к изображениям изменение размера изображения, сохраняя те же URL-адреса . Ваши пользователи и клиенты смогут использовать те же URL-адреса изображений, что и всегда, но изображения будут изменены любым способом, который вам нужен.
Вы можете установить для Worker маршрут, который соответствует URL-адресам изображений, и изменить размеры любых изображений, превышающих ограничение:
addEventListener('fetch', event => { event.respondWith(handleRequest(event.request))
}) async function handleRequest(request) { return fetch(request, { cf: { image: { width: 800, height: 800, fit: 'scale-down' } });
}Поскольку Worker — это всего лишь код, его также легко запускать только по URL-адресам с расширениями изображений или даже только для изменения размера изображений, передаваемых мобильным клиентам.
Cloudflare и изображения
Cloudflare имеет богатую историю создания инструментов для ускорения изображений. Наше кэширование всегда помогало уменьшить задержку, храня копию изображений ближе к пользователю. Polish автоматизирует параметры сжатия изображений без потерь и с потерями, чтобы удалить ненужные байты. Mirage ускоряет доставку изображений в зависимости от типа устройства. Мы продолжаем вкладывать средства во все эти инструменты, поскольку все они играют огромную роль в улучшении работы с изображениями в Интернете.
Ресайзинг изображений отличается тем, что он является первым графическим продуктом в Cloudflare, который дает разработчикам полный контроль над тем, как будут обрабатываться их изображения. Стоит выбрать Ресайзинг изображений, если вам удобно определять размеры, по которым вы хотите, чтобы ваши изображения обслуживались заранее или в Cloudflare Worker.
Следующие шаги
Ресайзинг изображений доступен сегодня для бизнес и корпоративных клиентов. Чтобы включить его, войдите в панель управления Cloudflare и перейдите на вкладку «Скорость». Там вы найдете раздел для изменения размера изображения, который можете включить одним щелчком мыши.
Этот продукт включен в бизнес и корпоративные планы без каких-либо дополнительных платежей с большими лимитами использования. Бизнес-клиенты имеют ограничение в 100 тыс. запросов в месяц, и с них взимается плата в размере 10 долл. США за каждые дополнительные 100 тыс. запросов в месяц. Корпоративные клиенты имеют ограничение в 10 миллионов запросов в месяц со сниженными уровнями для более высокого использования. Запросы определяются как обращение к URI, содержащему Ресайзинг изображений, или вызов изменения размера изображения из Worker.
Теперь, когда вы включили Ресайзинг изображений, пришло время изменить размер вашего первого изображения.
Используя ваш существующий сайт, сохраните изображение здесь: https://yoursite.com/images/yourimage.jpg
Используйте этот URL для изменения размера этого изображения: https://yoursite.com/cdn-cgi/image/width=100,height=100,quality=75/images/yourimage.jpg
Поэкспериментируйте с изменением width=, height=и quality=.
Приведенные выше инструкции используют формат URL-адреса по умолчанию для изменения размера изображения. Подробнее о параметрах, вариантах использования и совместимости см. в нашей Документации для разработчиков.
Автор: Isaac Specter
Источник: https://blog.cloudflare.com
Редакция: Команда webformyself.