Эффективность услуг, таких как 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, что значительно ускоряет последующие запросы любого изображения на основе оригинала. В любом случае, экономия байтов при передаче изображений правильного размера в браузер почти всегда перевешивает любую дополнительную задержку от первоначальных запросов на изображение.
Вот простая диаграмма, которая показывает поток, когда изображение еще не было кэшировано:
┌─────────────────┐ 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. Предоставление правильных размеров изображения для данного устройства (или как можно ближе) - лучший способ убедиться, что изображения не влияют на время загрузки страницы. Даже небольшие различия между фактическим и желаемым размером изображения могут значительно увеличить размер файла. Самая основная функция сервисов хостинга изображений - это возможность изменять размеры изображений на лету, чтобы соответствовать любому устройству по мере необходимости.
В дополнение к высокой производительности этих сервисов, я видел и другие преимущества, о которых я упомянул некоторые из них здесь:
Адаптивные изображения
В настоящее время многие владельцы сайтов, менеджеры по продажам и маркетингу и... заботятся о многих аспектах маркетинга. Они тщательно выбирают картинки, чтобы преобразовать пользователя в покупателя или достичь определенной цели на своем сайте. Изменение размера изображения для другого экрана может быть достаточно для адаптивного дизайна, но недостаточно для повышения конверсии вашего сайта. Иногда вам нужно обрезать изображение, чтобы изменить его размер. С помощью услуг хостинга изображений вы можете точно выбрать, где обрезать, какая часть изображения необходима для маркетинговых целей, а какая часть может быть обрезана. Вы можете использовать все эти элементы управления на лету с этими службами, не используя Photoshop, и подготовить несколько фотографий в автономном режиме.
Поддержка сетчатки
Большинство изображений могут быть хорошо видны на обычных экранах, но когда вы видите их на экранах высокой плотности, таких как Apple Retina или на некоторых устройствах Android, это не совсем хорошо. Соотношение пикселей устройства используется для простого преобразования между независимыми от устройства пикселями и пикселями устройства. Это позволяет отображать изображения с правильной плотностью пикселей на различных устройствах, таких как дисплеи Apple Retina и устройства Android. В imgix вы можете загружать изображения с более высоким DPR, если экран поддерживает изображения с высокой плотностью. Вы можете сделать это с помощью тегов srcset. Узнайте больше здесь
Управление изображениями на лету
Все, что вы хотите сделать на фотографии, может быть сделано на лету. Вам не нужно использовать Photoshop для работы с маленькими изображениями. Это значительно снижает скорость проектирования.
Лучший SEO рейтинг
Размер изображения вносит большой вклад в скорость загрузки страницы, что, в свою очередь, является ключевым показателем при определении рейтинга результатов поиска для ваших страниц. Уменьшение размера изображения может иметь большое значение для повышения вашего рейтинга, особенно если вы можете получить полную загрузку страницы ниже порога, когда многие пользователи начинают уходить из нетерпения.
[Раскрытие, я технический директор компании, которая предлагает ImageEngine]
Упоминание нашего собственного ImageEngine здесь в порядке. ImageEngine находится в том же пространстве, что и другие решения, упомянутые OP, с некоторыми дополнительными преимуществами: его CDN был создан с нуля с учетом оптимизации мобильных устройств. В дополнение к настольным браузерам пограничные серверы ImageEngine могут точно определять такие функции, как размер экрана, разрешение и поддерживаемые кодеки изображений, и соответственно оптимизировать изображения. Это происходит благодаря WURFL, такому же решению для обнаружения устройств, принятому в Facebook и Google, и обеспечивает дополнительную оптимизацию (до 80% экономии пропускной способности) и сокращение счетов CDN. Мы называем это понятие "Умные байты".
Еще одно большое отличие - это простота интеграции. ImageEngine не требует от организаций загрузки изображений в любом месте. Это отлично подходит для компаний с устаревшими изображениями. Хотя ImageEngine позволяет директивам (через параметры URL) указывать, как следует оптимизировать данное изображение, он также поддерживает "автоматический режим", т. Е. ImageEngine будет извлекать изображения с исходного сайта (нет необходимости размещать изображения на чужом сервере) и автоматически оптимизировать изображение до наилучшего формата, определенного компонентом "Обнаружение устройства" и клиентскими подсказками. Например, устройства и браузеры, которые поддерживают .webp получите .webp, Клиенты просто активируют ImageEngine перед своим существующим сайтом, и волшебство происходит без дополнительной настройки. Текущие клиенты (особенно электронная коммерция) любят эту функцию.
На работе мы используем комбинацию
- общая оптимизация изображения конвейера, например, плагин Grunt
- заставить дизайнерские команды клиентов использовать приложения для оптимизации изображений
- мы также используем Cloudinary на многих наших сайтах.
Решение обычно варьируется в зависимости от затрат и бюджета клиентов, но мы обнаруживаем, что Cloudinary на самом деле работает дешевле, особенно для клиентов, которые не хотят, чтобы мы или их внутренние команды тратили время на оптимизацию изображений и просто хотели сосредоточиться на функциях.
Разгружая изображения и видео в облачную среду, мы можем просто сосредоточиться на улучшении сайта, тестировании AB и других видах деятельности, приносящих доход. Задержка передачи, которая, по-видимому, не является большой проблемой из-за кеширования, а CDN - это небольшая цена, которую нужно платить буквально за часы / дни, выделенные для создания продуктов и развития бизнеса.
Вы должны понять, сколько стоит ваше время, и сколько денег вы можете заработать, если освободите его для других дел. Какие еще вещи вы бы попробовали?
Чтобы ваши изображения загружались быстро, вы хотите, чтобы их размер был как можно меньше, а также нужна хорошая архитектура кэширования и доставки.
Когда вы используете сервис для доставки ваших изображений, они обслуживаются с использованием CDN, поэтому часть процесса кэширования и доставки решена.
Есть несколько сильных сервисов CDN, таких как Cloudinary или Imagix. Каждый сервис имеет свои преимущества и недостатки, что ставит несколько вопросов:
- Какой сервис CDN лучше всего подходит для ваших целевых регионов?
- Существуют ли особые функции CDN, которые нужны вашему сайту или приложению, но не учитываются всеми службами?
- Что происходит, когда используемая вами служба CDN имеет сбои или замедления?
- Влияет ли пики трафика на все CDN одинаково?
- Возможно ли дальнейшую оптимизацию доставки с помощью разных служб CDN для разных географических областей, времени суток или других переменных производительности?
Ответы на эти вопросы являются сложными и постоянно меняющимися. В попытке оптимизировать доставку в разное время и в разных регионах Cloudinary включает несколько CDN.
После завершения процесса начальной настройки клиенты Cloudinary могут воспользоваться одним из двух решений для оптимизации нескольких CDN:
Динамическое переключение нескольких CDN: использует данные в реальном времени для автоматического выбора наиболее эффективной или наиболее подходящей из поддерживаемых услуг CDN для каждого запроса пользователя и каждого местоположения.
Интеллектуальный выбор CDN. Выделенные инженеры службы поддержки помогут вам определить, какая из поддерживаемых услуг CDN лучше всего подходит для ваших требуемых функций и целевой аудитории.
Что касается оптимизации изображения, Cloudinary поддерживает масштабирование изображений до размера дисплея, настройку качества изображения, автоматический выбор формата файла на основе обнаружения клиента, преобразование формата изображения и многое другое.
Отказ от ответственности: я работаю инженером-программистом в Cloudinary.
Чтобы ответить на ваш вопрос в качестве пользователя этих услуг и помнить о том, как вы задаете вопрос о любых проблемах с этими услугами, см. Следующие пункты.
- Эти сервисы оптимизированы с точки зрения кеширования изображений. Когда вы загружаете изображение, они одновременно создают разные размеры и трансформации. Некоторые из них могут одновременно кэшировать его на ближайшем сервере, чтобы вы могли быстро увидеть его в следующий раз, когда попросите об этом.
- Вы можете указать, какие размеры по умолчанию вы хотите кэшировать. Например, на свой сервер вы загрузите 3 версии изображения 200x200 для миниатюр для мобильных устройств, 300x300 для миниатюр для планшетов и 400x400 для настольных компьютеров. Вы сэкономите время, загрузив изображения на эти серверы, и они могут изменить размер на все три в течение миллисекунд и распределить их на несколько серверов кеширования.
- Проблемы, которые могут возникнуть, заключаются в том, что если вы часто меняете изображения, эти службы потребуют очистки кеша или изменения URL-адресов и т. Д., Чтобы получить последнюю версию. Вам придется подождать, пока истечет срок действия кеша и т. Д. Однако, согласно моему опыту, выгода, которую вы получаете от загрузки изображения за миллисекунды на различных устройствах, намного больше, чем попытка переборки кеша, и большинство этих служб предоставляют удобные методы для этого.
- Эти службы уменьшают пространство на вашем сервере, и большую часть времени стоимость размещения изображений с ними намного дешевле, чем хранение изображений вместе с обслуживаемым кодом. Если вы загружаете изображения с высоким разрешением или большим размером, разница значительна. Например, хранение 500 ГБ изображений на веб-хостинге или большом двоичном объекте хранилища с кэшированием в 4 раза дороже одной из этих услуг. Резервное копирование и контроль версий - еще одно преимущество этих служб.
- Если вы реализуете хорошую стратегию загрузки / просмотра / тегирования / удаления изображений, вы можете со временем сэкономить много времени и денег, используя любую из этих услуг. Я рекомендую поискать услугу, которая подходит для вашего случая. Например, вы можете также использовать кеш css/js, или вы можете использовать изображения для личного использования, или вы хотите загружать видео, или вы хотите распознавать объекты в своем проекте. Обширный выбор просто требует времени, чтобы изучить, что лучше.
Обеспокоенность, которую вы упомянули о двойной задержке, неверна, потому что они предполагают, что все вызовы попадут на ваш сервер. Эти сервисы изображений предоставляют вам URL-адрес, который может напрямую попасть на их сервер или, что еще лучше, версию изображения в локальном кеше. Они заботятся о многих вещах, о которых вы, возможно, еще не думали.
Есть определенное преимущество - загружать изображения только того размера, который вам нужен. Самый большой бонус будет время загрузки. Мы все знаем, что пользователи не любят ждать загрузки страниц. Поэтому, если у вас есть несколько копий или сжато все ваши изображения в зависимости от размера экрана, вы предложите лучший пользовательский опыт. Google также основывает отображение поиска на времени загрузки, в зависимости от размера изображения. Я также предлагаю использовать сервис, который предлагает CDN для изображений, чтобы вы могли воспользоваться кэшированием.