Эффективность услуг, таких как Cloudinary, Imgix

Я хочу создать сайт с большим количеством изображений и, следовательно, имитировать изображения, такие как amazon, ebay, flipkart и т.д. Мне было предложено использовать такие сервисы, как Cloudinary, Imgix и т.д., Чтобы изменить размер моих изображений, так как было бы лучше хранить одну версию каждого изображения, хотя мне понадобилось бы несколько версий разных размеров. Я хотел бы знать, насколько эффективны эти услуги. Есть ли проблемы? Я хочу, чтобы мой сайт был очень быстрым и отзывчивым. Я слышал такие проблемы, как "Учтите, что вы, по крайней мере, удваиваете задержку передачи, которая часто доминирует над временем, необходимым для завершения операции с изображениями.

Обычный: end_user- > your_user- > end_user

Через эти службы: end_user- > your_user- > you- > your_user- > end_user "

Ответ 1

(Отказ от ответственности: я обрабатываю отношения разработчика в imgix и буду отвечать на этот пост, как это применимо к нашему стеку)

Вы абсолютно правы, что для совершенно нераскрытого изображения для работы с изображением используется более "хмель". Для первого пользователя для просмотра изображения это может привести к слегка увеличенной задержке. Однако после этого изображение кэшируется как нашим кластером рендеринга, так и глобальным CDN, что делает последующие запросы на любое изображение, основанное на оригинале, намного быстрее. В любом случае, байт-сбережения от обслуживания изображений с правильным размером в браузере почти всегда перевешивает любую дополнительную задержку от первоначальных запросов на изображение.

Здесь простая диаграмма, показывающая поток, когда изображение еще не кэшировано:

                      ┌─────────────────┐  4. Origin responds
                      │   Your Origin   │  with full-size
                      │ (S3/web folder) │  `dogs.png` image.
                      └─────────────────┘
                        ▲             │
                        │             │
                        │             │
                        │             ▼
      3. Image is not ┌─────────────────┐  5. imgix caches the
cached at imgix, send │      imgix      │  full-size image, then
request to origin for │                 │  resizes it to 300px
           `dogs.png` └─────────────────┘  wide and caches that
                        ▲             │    derivative.
                        │             │
                        │             ▼
      2. Image is not ┌─────────────────┐  6. The imgix CDN
       cached at CDN, │ imgix CDN (edge │  caches the 300px wide
     forward to imgix │nodes worldwide) │  variant and serves it
   rendering cluster. └─────────────────┘  to the browser.
                        ▲             │
                        │             │
                        │             │
                        │             ▼
  1. Browser requests ┌─────────────────┐  7. The browser
     `dogs.png?w=300` │ User Browser  │  receives and renders
                      │                 │  300px wide `dogs.png`.
                      └─────────────────┘

После того, как изображение было кэшировано (после того, как один пользователь запросит его), цикл становится намного более плотным:

 2. The imgix CDN has ┌─────────────────┐
 this variant cached, │ imgix CDN (edge │
 and serves it to the │nodes worldwide) │
             browser. └─────────────────┘
                        ▲             │
                        │             │
                        │             │
                        │             ▼
  1. Browser requests ┌─────────────────┐  3. The browser
     `dogs.png?w=300` │ User Browser  │  receives and renders
                      │                 │  300px wide `dogs.png`.
                      └─────────────────┘

После того, как исходный образ кэшируется в нашем рендеринг-кластере, генерация производных также намного быстрее (в данном случае версия шириной 600 пикселей), поскольку они не требуют дополнительной поездки на ваш исходный сервер:

3. Full-size image is ┌─────────────────┐  4. imgix resizes the
    already cached at │      imgix      │  cached full-size image
     imgix, no origin │                 │  to 600px wide and
      request needed. └─────────────────┘  caches that
                        ▲             │    derivative.
                        │             │
                        │             ▼
      2. Image is not ┌─────────────────┐  5. The imgix CDN
       cached at CDN, │ imgix CDN (edge │  caches the 600px wide
     forward to imgix │nodes worldwide) │  variant and serves it
   rendering cluster. └─────────────────┘  to the browser.
                        ▲             │
                        │             │
                        │             │
                        │             ▼
  1. Browser requests ┌─────────────────┐  6. The browser
     `dogs.png?w=600` │ User Browser  │  receives and renders
                      │                 │  600px wide `dogs.png`.
                      └─────────────────┘

Ответ 2

Я использую imgix более 1 года. Я думаю, что хостинг изображений на профессиональном графическом сервере намного лучше, чем размещение его на серверах.

Высокая производительность

1- Как сказал Пол Строу: Imgix имеет правильную стратегию кэширования. Он не добавляет латентность для загрузки изображения. Он даже вычитает задержку, так как не выбирает главное изображение каждый раз, когда загружается страница. Он извлекает изображение из кеша.

2- Оба Cloudinary и imgix используют широкий и быстрый CDN. Поэтому пользователь, которому нужно загрузить изображение, может получить файл с края CDN, который ближе к его местоположению. Поэтому задержка будет отброшена и будет загружаться быстрее.

3. Обслуживание правильных размеров изображения для данного устройства (или как можно ближе) - лучший способ убедиться, что изображения не влияют на время загрузки страницы. Даже небольшие различия между фактическими и желаемыми размерами изображения могут значительно увеличить размер файла. Самая основная особенность служб хостинга изображений - возможность изменять размер изображений "на лету", чтобы соответствовать любому устройству по мере необходимости.

Помимо высокой производительности этих сервисов, я также видел некоторые другие преимущества, о которых я упоминаю здесь:

Отзывчивые изображения

В настоящее время многие владельцы веб-сайтов, менеджеры по продажам и маркетингу и... заботятся о многих аспектах маркетинга. Они тщательно выбирают фотографии, чтобы преобразовать пользователя в покупателя или достичь определенной цели на своем веб-сайте. Изменение размера изображения для другого экрана, возможно, достаточно для гибкого дизайна, но его недостаточно для увеличения коэффициента конверсии вашего веб-сайта. Иногда вам нужно обрезать изображение, чтобы изменить его размер. С помощью услуг хостинга изображений вы можете выбрать, где именно кадрировать, какая часть изображения имеет важное значение для целей маркетинга и которая может быть обрезана. вы можете использовать все эти элементы управления на лету с этими сервисами без использования Photoshop и подготовить несколько снимков в автономном режиме.

Поддержка сетчатки

Большинство изображений можно увидеть хорошо на обычных экранах, но когда вы видите их на экранах с высокой плотностью, таких как Apple Retina или некоторые устройства Android, это не очень хорошо. Соотношение пикселей устройства используется для легкого преобразования между независимыми от устройства пикселями и пикселями устройства. Это позволяет отображать изображения с правильной плотностью пикселей на различных устройствах, таких как дисплеи Apple Retina и устройства Android. В imgix вы можете загружать изображения с более высоким DPR, если экран может поддерживать изображения с высокой плотностью изображения. вы можете сделать это с помощью тэгов srcset. Подробнее здесь

Управление изображениями на лету

Все, что вы хотите сделать на картинке, можно сделать "на лету". Вам не нужно использовать Photoshop для небольших манипуляций с изображениями. Это значительно сокращает скорость проектирования.

Лучший рейтинг SEO

Размер изображения является большим вкладом в скорость загрузки страницы, что, в свою очередь, является ключевым показателем для определения ранжирования результатов поиска для ваших страниц. Уменьшение размера изображения может значительно повлиять на улучшение вашего рейтинга, особенно если вы можете получить полную загрузку страницы ниже порога, когда многие пользователи начинают отказываться от нетерпения.

Ответ 3

при работе мы используем комбинацию

общая оптимизация изображения трубопровода, например, плагины grunt
привлечение клиентов к разработке приложений для оптимизации изображений
мы также используем Cloudinary на многих наших сайтах.

Решение обычно варьируется в зависимости от затрат и бюджетов клиентов, но мы обнаруживаем, что Cloudinary фактически работает дешевле, особенно для клиентов, которые не хотят, чтобы мы или их внутренние команды тратили время на оптимизацию изображения и просто хотели сосредоточиться на функциях,

Разгружая изображения и видео в облачные - это позволяет нам просто сосредоточиться на улучшении сайта, тестировании AB и других приносящих доход мероприятиях. Задержка передачи, которая, как представляется, не является большой проблемой из-за кэширования, и CDNs будет небольшой ценой для оплаты буквально часов/дней времени, освобожденных, чтобы сосредоточиться на создании продуктов и развитии бизнеса.
Вы должны понять, что ваше время стоит, и сколько еще денег вы можете сделать, если вы освободите его, чтобы делать другие вещи. Что еще вы попробуете?

Ответ 4

[Раскрытие информации, я являюсь техническим директором компании, предлагающей ImageEngine]

Упоминание нашего ImageEngine здесь. ImageEngine находится в том же пространстве, что и другие решения, упомянутые OP с несколькими дополнительными преимуществами: его CDN был построен с нуля с оптимизацией мобильных устройств. В дополнение к настольным браузерам, ImageEngine Edge Servers могут точно определять такие функции, как размер экрана, разрешение и поддерживаемые кодеки изображений, а также оптимизировать изображения соответственно. Это происходит благодаря WURFL, те же решение Device Detection, принятое Facebook и Google, и учитывает дополнительную оптимизацию (экономия до 80% полосы пропускания) и уменьшенные счета CDN. Мы называем это понятие "умные байты".

Еще одно большое отличие - простота интеграции. ImageEngine не требует, чтобы организации загружали изображения в любом месте. Это отлично подходит для компаний, у которых есть старые изображения. Хотя ImageEngine позволяет директивам (через параметры URL) указывать, как оптимизировать данный образ, он также поддерживает "автоматический режим", т.е. ImageEngine будет извлекать изображения с исходного сайта (нет необходимости размещать изображения на чужом сервере) и автоматически оптимизировать изображение в лучшем формате, как определено компонентом обнаружения устройства и подсказками клиента. Например, устройства и браузеры, поддерживающие .webp, получат .webp. Клиенты просто активируют ImageEngine перед своим существующим сайтом, и волшебство происходит без необходимости дополнительной настройки. Нынешние клиенты (особенно электронная коммерция) любят эту функцию.

Ответ 5

Чтобы ваши изображения загружались быстро, вы хотите, чтобы их размер был как можно меньше, и вы хотите хорошую архитектуру кэширования и доставки

Когда вы используете услугу для доставки ваших изображений, они обслуживаются с использованием CDN, поэтому часть кэширования и доставки решается.

Существует несколько мощных CDN-сервисов, таких как Cloudinary или Imagix. Каждая услуга имеет свои преимущества и недостатки, поднимая несколько вопросов:

Какая служба CDN лучше всего подходит для ваших целевых географических регионов?
Существуют ли конкретные функции CDN, которые нужны вашему сайту или приложению, но не адресованы всеми службами?
Что происходит, когда используемая служба CDN отключает или замедляет работу?
Сканирование трафика влияет на все CDN одинаково?
Возможно ли, что вы сможете оптимизировать доставку, используя различные службы CDN для разных географических областей, времени суток или других переменных производительности?

Ответы на эти вопросы сложны и постоянно меняются. В попытке оптимизировать доставку в разное время и в разных регионах CloudMan предлагает несколько CDN.

После завершения первоначального процесса установки клиенты Cloudinary могут воспользоваться одним из двух решений для оптимизации нескольких CDN:

Динамическое переключение с несколькими CDN: использует данные в реальном времени для автоматического выбора наиболее эффективных или наиболее подходящих поддерживаемых CDN-сервисов для каждого пользовательского запроса и каждого местоположения.
Выбор Smart CDN: Специалисты службы поддержки помогут вам определить, какая из поддерживаемых служб CDN лучше всего подходит для ваших требуемых функций и целевой аудитории.

Что касается проблемы оптимизации изображения, CloudMan поддерживает масштабирование изображений для отображения размера, настройки качества изображения, автоматического выбора формата файла на основе обнаружения клиента, преобразования формата изображения и т.д.

Отказ от ответственности: я работаю инженером-программистом в Cloudinary.

Ответ 6

Определенно преимущество состоит только в том, чтобы загружать изображения, которые вам нужны. Самый большой бонус - это время загрузки. Мы все знаем, что пользователям не нравится ждать загрузки страниц. Поэтому, если у вас есть несколько копий или сжатие всех ваших изображений на основе размера экрана, вы предложите лучший пользовательский интерфейс. Google также отображает поиск по времени загрузки, в который входит размер изображения. Я также предлагаю использовать сервис, который предлагает CDN для изображений, чтобы вы могли использовать кеширование.