Эффективность таких сервисов, как Cloudinary, Imgix
Я хочу создать веб-сайт с большим количеством изображений и, следовательно, манипуляциями с изображениями,такими как amazon, ebay, flipkart и т. д. Мне было предложено использовать такие службы, как Cloudinary, Imgix и т. д. Для изменения размера моих изображений, поскольку было бы лучше хранить одну версию каждого изображения, хотя мне нужно несколько версий с разными размерами. Я хотел бы знать, насколько эффективны эти услуги. Есть какие-то проблемы? Я бы хотел, чтобы мой сайт был очень быстрым и отзывчивым. Я слышал такие проблемы, как " принять во внимание что вы по крайней мере удваиваете задержку передачи, которая часто будет доминировать над временем, необходимым для завершения операции с изображением.
нормальный: end_user->your_user->end_user
через эти сервисы: end_user - >your_user - >you - >your_user - >end_user"
6 ответов
(отказ от ответственности: я занимаюсь отношениями с разработчиками в imgix и буду отвечать на этот пост, поскольку он относится к нашему стеку)
- вы совершенно правы, что совершенно не кешированные изображения, есть еще "хмель" участвует в качестве изображения. Для первого пользователя для просмотра изображения это может привести к незначительному увеличению задержки. После этого, однако, изображение кэшируется как нашим кластером рендеринга, так и глобальным CDN, который делает последующие запросы для любого изображения на основе off оригинала гораздо быстрее. В любом случае, экономия байтов от обслуживания изображений правильного размера в браузере почти всегда перевешивает любую дополнительную задержку от начальных запросов к изображению.
вот простая диаграмма, которая показывает поток, когда изображение еще не было кэшировано:
┌─────────────────┐ 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's 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's Browser │ receives and renders
│ │ 300px wide `dogs.png`.
└─────────────────┘
после исходное изображение кэшируется в нашем кластере рендеринга, генерация производных также намного быстрее (в данном случае, широкая версия 600px), так как они не требуют дополнительной поездки на ваш исходный сервер:
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's Browser │ receives and renders
│ │ 600px wide `dogs.png`.
└─────────────────┘
Я использую imgix более 1 года. Я думаю, что хостинг изображений профессиональным сервером изображений намного лучше, чем хостинг на ваших серверах.
высокая производительность
1 - Как сказал Пол Стро: Imgix имеет правильную стратегию кэширования. Он не добавляет задержку для загрузки изображения. Он даже вычитает задержку, поскольку не извлекает главный образ каждый раз при загрузке страницы. Он извлекает изображение из кэша.
2 - и Cloudinary и imgix используют широко и быстрый CDN. Таким образом, пользователь, которому нужно загрузить изображение, может получить файл с края CDN, который ближе к его местоположению. Поэтому задержка будет удалена, и она загружается быстрее.
3 - обслуживание правильных размеров изображения для данного устройства (или как можно ближе) - лучший способ убедиться, что изображения не влияют на время загрузки страницы. Даже небольшие различия между фактическими и желаемыми размерами изображения могут значительно увеличить размер файла.Самый основной особенностью услуг хостинга изображений является возможность изменять размер изображений на лету, чтобы соответствовать любому устройству по мере необходимости.
в дополнение к высокой производительности этих услуг, я видел некоторые другие преимущества, которые я упоминаю некоторые из них здесь:
отзывчивые изображения
В настоящее время многие владельцы веб-сайтов, руководители продаж и маркетинга И... волнуют многие аспекты маркетинга. Они тщательно выбирают фотографии, чтобы преобразовать пользователя в покупателя или достичь определенной цели на своем сайте. Изменение размера изображения для другого экрана может быть достаточно для адаптивного дизайна, но его недостаточно для увеличения скорости преобразования вашего сайта. Иногда нужно обрезать изображение, чтобы изменить его размер. С помощью image hosting services вы можете выбрать, где именно обрезать, какая часть изображения необходима для маркетинговых целей и какая часть может быть обрезана. вы можете иметь все эти элементы управления на лету с этими услугами без использования Photoshop и подготовить несколько фотографий в автономном режиме.
Поддержка Retina
большинство изображений можно увидеть хорошо на обычных экранах, но когда вы видите их на экранах с высокой плотностью, таких как Apple Retina или некоторые Android-устройства, это совсем не хорошо. Коэффициент пиксела прибора использован легко для того чтобы преобразовать между пикселами прибора независимыми и пикселами прибора. Это позволяет отображать изображения с правильной плотностью пикселей на различных устройствах, таких как дисплеи Apple Retina и Android устройств. В imgix вы можете загружать изображения с более высоким DPR, если экран может поддерживать изображения высокой плотности. вы можете сделать это с помощью тегов srcset. подробнее здесь
обработка изображений на лету
все, что вы хотите сделать на картинке, можно сделать на лету. Вам не нужно использовать Photoshop для небольших манипуляций с изображением. Это значительно снижает скорость проектирования.
лучше SEO рейтинг
размер изображения является большой вклад в скорость загрузки страницы, что в свою очередь является ключевым показателем при определении рейтинга результатов поиска для ваших страниц. Уменьшение размера изображения может пройти долгий путь к улучшению вашего рейтинга, особенно если вы можете получить полную загрузку страницы ниже порога, где многие пользователи начинают выпадать из нетерпения.
на работе мы используем комбинацию
- общая оптимизация изображения конвейера, например, Плагины grunt
- получение проектных групп клиентов для использования приложений для оптимизации изображений
- мы также используем Cloudinary на многих наших сайтах.
решение обычно зависит от затрат и бюджетов клиентов, но мы обнаруживаем, что Cloudinary на самом деле работает дешевле, особенно для клиентов, которые не хотят, чтобы мы или их внутренние команды потратьте время на optmization изображения и как раз хотеть сфокусировать на характеристиках.
путем разгрузки изображений и видео в cloudinary - это освобождает время для нас, чтобы просто сосредоточиться на улучшении сайта, тестировании AB и другой приносящей доход деятельности. Задержка передачи, которая не кажется большой проблемой из-за кэширования и CDNs, была бы небольшой ценой, чтобы заплатить за буквально часы/ дни времени, освобожденные, чтобы сосредоточиться на создании продуктов и развитии бизнеса.
Ты должен работать. сколько стоит ваше время - и сколько денег вы можете заработать, если освободите его для других дел. Что еще ты можешь попробовать?
[раскрытие информации, я технический директор компании, которая предлагает ImageEngine]
упоминание о наших собственных ImageEngine здесь в порядке. ImageEngine находится в том же пространстве, что и другие решения, упомянутые OP, с несколькими дополнительными преимуществами: его CDN был построен с нуля с учетом мобильной оптимизации. Помимо настольных браузеров, пограничные серверы ImageEngine могут точно определять такие функции, как размер экрана, разрешение и поддерживаемое изображение кодеки, и оптимизировать изображения. Это происходит благодаря WURFL, то же самое Обнаружение Устройств решение, принятое Facebook и Google, и учитывает дополнительную оптимизацию (до 80% экономии полосы пропускания) и сокращение счетов CDN. Мы называем это понятие "умные байты".
еще одна большая разница-это простота интеграции. ImageEngine не требует от организаций загружать изображения в любом месте. Это отлично подходит для компаний с устаревшими изображениями для обработки. Пока ImageEngine позволяет директивам (через Параметры URL) указывать, как данное изображение должно быть оптимизировано,а также поддерживает "автоматический режим", т. е. ImageEngine будет извлекать изображения с веб-сайта origin (нет необходимости размещать изображения на чужом сервере) и автоматически оптимизировать изображение до лучшего формата, определенного компонентом обнаружения устройства и клиентскими подсказками. Например, устройства и браузеры, которые поддерживают .webp будет .webp. Клиенты просто активируют ImageEngine перед их существующими сайт и магия происходит без необходимости дополнительной настройки. Текущие клиенты (особенно электронная коммерция) любят эту функцию.
чтобы ваши изображения загружались быстро, вы хотите, чтобы их размер был как можно меньше, и вы хотите хорошую архитектуру кэширования и доставки
когда вы используете службу для доставки изображений, они подаются с помощью CDN, поэтому часть кэширования и доставки решена.
есть несколько сильных сервисов CDN, таких как Cloudinary или Imagix. Каждая услуга имеет свои преимущества и недостатки, поднимая несколько вопросов:
- какой сервис CDN имеет лучший доступ к вашей целевой географии?
- существуют ли конкретные функции CDN, которые нужны вашему сайту или приложению, но не рассматриваются всеми службами?
- что происходит, когда служба CDN, которую вы используете, имеет сбои или замедления?
- шипы трафика влияют на все CDNs одинаково?
- возможно ли, что вы можете дополнительно оптимизировать доставку, используя различные службы CDN для разных географических районов, времени суток или другой производительности переменные?
ответы на эти вопросы являются сложными и постоянно меняющимися. В попытке оптимизировать доставку в разное время и в разных регионах Cloudinary включает несколько CDNs.
после завершения начального процесса настройки клиенты Cloudinary могут воспользоваться одним из двух multi-CDN решения для оптимизации:
динамическое переключение мульти-КДН: использует данные в реальном времени автоматически для того чтобы выбрать наилучшая или наиболее подходящая из поддерживаемых служб CDN для каждого запроса пользователя и каждого местоположения.
Smart CDN selection: выделенные инженеры поддержки помогут вам определить, какие из поддерживаемых сервисов CDN лучше всего подходят для ваших необходимых функций и целевой аудитории
Что касается проблемы оптимизации изображений, Cloudinary поддерживает масштабирование изображений для отображения размера, настройки качества изображения, автоматического выбора формата файла на основе обнаружение клиента, преобразование формата изображения и многое другое.
отказ от ответственности: я работаю инженером-программистом в Cloudinary.
определенно преимущество к только нагружать изображения размер который вам нужно они. Самым большим бонусом будет время загрузки. Мы все знаем, что пользователи не любят ждать загрузки страниц. Поэтому, если у вас есть несколько копий или сжать все изображения на основе размера экрана, вы предложите лучший пользовательский опыт. Google также основывает поисковый дисплей на времени загрузки, в которое играет размер изображения. Я также предлагаю использовать сервис, который предлагает CDN для изображений, чтобы вы могли воспользоваться кэширование.