Хранилище фото Cloudinary: хранение, сжатие, конвертация, редактор изображений WordPress сайта 

Содержание

Вступление

Изображения на сайтах, в процентах, занимают максимальный объем дискового пространства. Совет оптимизаторов по ускорению сайтов, использовать 1-2 фото на статью, для большинства сайтов не работает, а для фото-сайтов и информационных сайтов большим количеством screenshot не подходит вовсе.

Вывести фото из каталога сайта

В борьбе за скорость сайта, мне всегда нравилась идея вывести изображения из каталога сайта WordPress и использовать для их вставки в посты через поле для стороннего источника «вставить с сайта». Останавливало нестабильность сторонних хранилищ, а также явная их ненадежность. Последнее останавливает и сейчас. Ведь не хочется в один прекрасный момент потерять все фото сайта, оголив текстовой контент, из-за проблем на серверах хранилища.

Сервис Cloudinary

И всё-таки, есть сервис Cloudinary, который заслуживает внимание и доверие. Я встретил его год назад. Он не только может стать облачным хранилищем ваших изображений и видео, но на лету, может сжимать, конвертировать, редактировать ваши фото, даже добавлять к ним водяные знаки и эффекты. На лету, означает, что редактирование происходит мгновенно, в вашем личном кабинете без перезагрузки страницы (подробности ниже).

Я совершенно не агитирую бросать использование «медиабиблиотеки» WordPress и «бежать» на сервис Cloudinary. Достаточно, подробнее с ним познакомиться и сделать первый шаг в освоении.

Сервис Cloudinary знакомство

Разумно, начать знакомство с ценами сервиса. На сегодня, ценовая политика сервиса позволяет в бесплатном режиме, для одного аккаунта:

  • Использовать 2 Гб хранилища;
  • Взять 5 Гб на трафик просмотров;
  • И обрабатывать 75000 фото.

Это в 4 раза больше, чем было еще 6 месяцев назад.

Много это или мало? Сайт, который вы читаете, существует 5 лет, объем папки uploads с фото составляет 211 Мб, так что 2 Гб хватит на 5 таких сайтов. А если не хватит, есть платные тарифы, например, за 44$ получаете 15 Гб хранилища и 50Гб трафика.

Что может Сервис Cloudinary, кроме хранения

Чтобы использовать фото из хранилища, сервис каждому измененному фото создает свой уникальный url, https, коды для Ruby, PHP, JS, jQuery, Node.js, .Net, Java, Angular, Pethon.

То есть, есть фото оригинал, он в хранилище. Используя онлайн редактор вы редактирует фото, и каждый раз, система отдает вам нужный url, https и т.д. вашего фото. Все редакции фото, также запоминаются.

Было бы скучно и не интересно, если бы Cloudinary был простым хранилищем. Всё гораздо веселее. Загружая фото на сервер, вы получаете и можете сделать следующее:

  • Сервис сразу сжимает фото без смены вашего формата и очищает мета данные;
  • Задать свои мета данные фото;
  • Убирать фон изображения;
  • Менять формат изображения (12 вариантов конвертации) с установкой % качества;
  • Изменять размеры фото с масштабированием;
  • Закруглять края;
  • Делать фото круглым или эллипсом;
  • Поворачивать картинку;
  • Добавлять 15+ эффектов;
  • Накладывать водяной знак;
  • При этом для каждого варианта фото, сервис будет мгновенно генерировать url, https, коды для Ruby, PHP, JS, jQuery, Node.js, .Net, Java, Angular, Pethon.

Именно этот url или https вам нужно вставлять в посты и виджеты WordPress. Для простого сайта используете url. Для сайтов SSL, чтобы избежать конфликта смешанного контента (Mixet Content), используется https.

Как работать с сервисом

Регистрация с подтверждением

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

Примечательно. Если вы забыли подтвердить регистрацию, система вас не удалит, а сохранит на неопределенное время. Я подтверждал регистрацию через полгода.

Личный кабинет

Вся работа на сервере происходит из личного кабинета. Не буду гидом, здесь всё понятно.

личный кабинет облачного хранилища фото

Здесь вы видите, как будут формироваться URL и HTTPS ваших фото.

  • res.cloudinary.com/dxgoqgofu, где набор букв это Cloudinary cloud name.

Так будет выглядеть URL фото (мой пример):

  • http(s)://res.cloudinary.com/dxgoqgofu/image/upload/sample(имя_файла).jpg

Замечу, что в настройках аккаунта (Setting) вы можете добавить ссылку на свой сайт.

Настройки

Для работы на сервере лучше пройти общие настройки. Вкладка основного меню: Setting

  • Account: укажите страну, укажите свой сайт.
  • Upload: настройки резервного копирования. Настроек много, оставляю по умолчанию. Замечу, что включение резервного копирования увеличивает использование хранилища.
  • Security: здесь можно запретить обработку отдельных типов изображений.
  • Users: здесь меняет свои данные в том числе, пароль.

Редактор

Редактор здесь, несмотря на скромный вид, очень мощный. Всё редактирование происходит мгновенно. Управление в редакторе ползунками. Результаты редактора справа:

  • Для фото после обновления превью фото (refresh Preview)
  • URL внизу превью.
страница редактора
полная страница редактора

редактор хранилища редактор хранилища далее

управление фото

Как забрать фото

  • Если нужно использовать фото из хранилища: Внизу превью видим и берем url, https или код;
  • Если нужен только редактор: Обновляете превью (refresh Preview), открываете фото в новой вкладке и скачиваете его на комп.

как забрать фото

Автоматическая конвертация форматов

Есть такое понятие кроссбраузерная поддержка форматов изображений.  Если вам нужно, чтобы браузер сам выбирал удобный формат для отображения фото, в редакторе Cloudinary на вкладке «Format & shape» поставьте формат Auto. В Url фото добавиться параметр [f_auto] и браузеры сами выберут удобный формат.

  • Chrome выберет формат WebP,
  • Edge – JPEG XR.
  • Firefox – JPEG.

Загрузка изображений

Посмотрим как загружать изображения в хранилище.

загрузка фото

  • Загрузите любые типы изображений: JPG, PNG, GIF, анимированные GIF, BMP, ICO, TIFF, PSD, WebP и даже PDF-файлы.
  • Загружайте со своего рабочего компьютера.
  • Можно загрузить одно или несколько изображений.
  • Можно загрузить фото из общедоступных хранилищ по URL.

Хранение изображений

  • Все ваши изображения хранятся в постоянном облачном хранилище.
  • Все фотографии автоматически резервируются, включая отслеживание версий. Обратите внимание, все ваши промежуточные редакции фото сохраняются автоматически. Их можно посмотреть на кнопке «View derived images»
  • Есть бесплатный, три платных и специальные тарифы.

тарифы Cloudinary

Оптимизация и кэширование изображений

  • Все загруженные изображения автоматически оптимизируются. Размер файла уменьшается, и они доставляются быстрее вашим читателям.
  • Метаданные изображений удаляются. Если нужно можно добавить свои метаданные.
  • Изменяя формат изображения, вы априори снижаете их объем.
  • Изображения хранятся в облаке и там кэшируются. Это также ускоряет их отдачу.

Сервис Cloudinary и WordPress

Вся идея использования Cloudinary на сайте WordPress это хранения фото и их оптимизация. В хранении особых плюсов нет.

Напомню, что на WordPress есть отличный инструмент «Медиабиблиотека», позволяющий хранить и быстро вставлять изображения, а также видео и документы, в посты сайта. Хранятся все изображения в папке [wp-content/uploads] корневого каталога и сортируются по годам и месяцам, если в настройках медиабиблиотеки отмечен соответствующий чекбокс.

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

Облегчить работу с сервисом поможет плагин «Cloudinary – Image management and manipulation in the cloud + CDN» (страница плагина)

После установки плагина, всё, что можно делать с фото на сервере (читать выше), можно делать из панели сайта.

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

Как видите, всё направлено на выполнение одной цели, ускорить сайт.

Статьи по теме:

Недостатки

Есть подводный камень. Когда вы перенесете все фото на облачный сервер, у них сменится URL. Трафик от фото, если он был, пропадет.

Как работать с плагином «Cloudinary – Image…»

Установите плагин стандартным способом;

Активируйте плагин. Он заставит вас пройти авторизацию в личном кабинете Cloudinary или зарегистрироваться. Лучше регистрацию сделать заранее.

В настройках плагина вы можете:

  • Просканировать все имеющиеся фото и отправить их на сервер;
  • Менять фото в статьях не сразу, а постепенно;
  • При проблемах возвращать фото, в статьи используя хранилище сайта;
  • Редактировать фото на сайте из личного кабинета хранилища.

На сладкое

Если посмотрите на правую часть личного кабинета в хранилище, увидите такую картинку (это перевод):

дополнительные хранилища

Поделитесь с друзьями и получите 500Мб дополнительного места в хранилище.

Вывод

Облачное хранилище фото Cloudinary отличный пример использования облачных технологий для ускорения сайта. Также хороший пример использования на WordPress самых различных инструментов облегчающих работу в создании и администрировании сайта.

©www.wordpress-abc.ru

Еще статьи

Любишь готовить? Получай за это деньги

Любишь готовить Получай за это деньги (1)

1. Вознаграждение за рецепты на сайте
fotorecept.com

1.1. Авторы получают вознаграждение за каждый просмотр своего кулинарного рецепта при условии:

Рецепт содержит 500 символов минимум (учитываются только русские и латинские буквы и цифры).
Рецепт был описан на основе личного опыта приготовления, а точные фразы и изображения из рецепта не были опубликованы где-либо ранее.
Рецепт просматривался не менее 15 секунд.
Читатель попал на рецепт по общедоступной ссылке при поиске информации по способу приготовления данного блюда/напитка (но если он просмотрел сегодня 20 рецептов, то его следующие просмотры в текущие сутки перестают учитываться).
Рецепт не является банальным блюдом или напитком, состоящим из 2-3 ингредиентов (на усмотрение Администрации).

Стоимость просмотра составляет от 0 до 500 руб. за 1000 просмотров и может изменяться в зависимости от раздела кулинарного рецепта, объема текста и фото/видео- материалов в рецепте и личного коэффициента автора. Деньги начисляются автору на баланс после 00:05 за прошедшие сутки. Повторные просмотры рецепта одним читателем не учитываются.

Если автор не писал рецепты более 30 дней, то денежные средства временно перестают начисляться до тех пор, пока автор не напишет новый рецепт.

1.2. Авторы получают дополнительный денежный бонус за добавление нового рецепта при условии:

Рецепт добавлен не ранее 28.06.2013 (дата внесения данных изменений в правила).
Просмотры рецепта оплачиваются согласно пункту 1.1.
В данной теме было опубликовано менее 30 вариантов рецептов на момент модерации.

Стоимость денежного бонуса зависит от категории рецепта, объема текста и фото в рецепте. При этом, в расчете денежного бонуса учитываются только первые 5000 символов и первые 7 фото в рецепте, а остальной текст и фото на размер бонуса никак не влияют.

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

2. Запрещается

2.1. Публикация на других сайтах материалов, размещенных на FotoRecept.com, без разрешения Администрации сайта.
2.2. Плагиат, использование фото, видео или текстовых материалов, нарушающих авторское право.
2.3. Множество орфографических и пунктуационных ошибок русского языка.
2.4. Малоинтересные рецепты, либо без пошаговых фото процесса приготовления блюда/напитка.
2.5. Рецепты без точного названия блюда/напитка, либо о нескольких блюдах/напитках сразу.
2.6. Брань и оскорбления.
2.7. Фото недостаточного качества (включая перевернутые и с лишними надписями), либо менее трех пошаговых фото в одном рецепте.
2.8. Оффтоп, дублирование, реклама, а также неактуальная или вводящая в заблуждение информация.
2.9. Мусорные и бесполезные комментарии («+1», «Спасибо за рецепт», «обязательно попробую» и т.п.), либо с множеством ошибок, либо реклама.

3. Реферальная программа

3.1. Денежное вознаграждение по реферальной системе составляет 10% от заработка каждого автора, приглашенного по Вашей реферальной ссылке.
3.2. Запрещается распространение реферальных ссылок с помощью СПАМ, САР, систем обмена трафиком и сайтах, где это не одобряется аудиторией.

4. Администрация сайта оставляет за собой право:

4.1. Заблокировать аккаунт за СПАМ, некорректное поведение, накрутку просмотров/рейтингов/репутации любыми способами (в том числе за провокации на взаимное плюсование рецептов) или за грубые нарушения других пунктов правил.

4.2. Заблокировать за регистрацию дополнительных аккаунтов у одного и того же автора.

4.3. Повышать личный коэффициент авторам за интересные кулинарные рецепты. А также понижать репутацию и личный коэффициент авторам за малограмотные и малоинтересные рецепты с некачественными фото или нарушения.

4.4. Отказать в размещении, изменении и удалении любых материалов на свое усмотрение.

4.5. Не удалять аккаунты и рецепты по запросу авторов. Если Вы согласитесь с правилами и зарегистрируетесь, а в будущем решите покинуть проект, то все Ваши публикации будут оставаться частью проекта.

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