Від автора: ми весь час намагаємося підвищити швидкість завантаження сайту: використовуємо ліниву завантаження зображень, минификацию з конкатенацией, створюємо спрайт, експериментуємо з кешуванням. Робимо все, що тільки можна собі уявити. Серед доступних на сьогодні способів підвищення продуктивності найкращий спосіб – це оптимізації зображень для сайту. Серед технік оптимізації зображень є.
Вибір оптимального формату зображення
Використання найкращого алгоритму стиску
Оптимізація зображень під пристрою
Робота із зображеннями з масштабується і швидкого джерела
Масштабування зображень під потрібний розмір
Ідея за оптимізацією зображень стоїть проста, але ось реалізація не завжди так проста: усі методи, як правило, вимагають незалежних підходів, що ускладнює автоматизацію процесу. З сервісом Cloudinary ви зможете завантажувати, зберігати, маніпулювати і надавати доступ до зображень і відео в мережі.
Побіжний огляд
Кілька важливих моментів з Cloudinary:
У Cloudinary є API для Node.js, Rails, django, PHP, jQuery, Angular, .NET, Java, iOS, Android. Сервіс надає просту командний рядок і вставляти URL структури через src HTML
Cloudinary дозволяє маніпулювати зображеннями на льоту, зокрема можна кадрувати зображення, присутній метод трансформацій на основі виявлення осіб і т. д.
Cloudinary автоматично створює адаптивні зображення
У Cloudinary є інтерфейс адміністратора з повідомленнями
У сервісі маса плагінів для ще більшої оптимізації зображень і їх поширення
У Cloudinary користувачі можуть вручну трансформувати зображення через інтерфейс адміністратора
Просунута функція кадрування і позиціонування, функція виявлення осіб, а також додавання аватарки з соціальних мереж
У Cloudinary абсолютно безкоштовно пропонуються всі необхідні для роботи функції
Як працювати з Cloudinary
Сервіс Cloudinary можна використовувати в різних напрямках. Дивлячись на свій сайт, я думаю тільки про змінених і оптимізованих зображеннях на сторінках зі списком посад. Google PageSpeed постійно вказує мені на розмір зображень на моєму сайті, і з ними не можна не погодитися: Для вставки зображення на пости я використовую шаблонне regex вираз, який шукає в статті перше зображення і робить його заголовним. Однак цей шаблонний метод не оптимізує зображення. Якщо зображення занадто велике, я просто зменшую його з допомогою атрибутів у HTML, що не робить сам розмір завантажуваного файлу менше.
Cloudinary легко впорався б з моєю проблемою аж цілими кількома способами, але, на мій погляд, найкращим варіантом буде Node.js. Спочатку я б встановив їх модель і передав в нього зображення:
// npm установка cloudinary
var cloudinary = require(‘cloudinary’);
// Налаштування
cloudinary.config({
cloud_name: ‘david-wash-blog’,
api_key: ‘###############’,
api_secret: ‘###############’
});
// Отримуємо змінені зображення
cloudinary.image(‘logo.png’, { width: 200, висота: 200, crop: ‘city’ });
В результаті нам повертається HTML тег img з оптимізованим під зображенням новий розмір:
Так як мій блог працює на WordPress, я б з легкістю міг скористатися PHP API:
\Cloudinary\Uploader::upload(“/home/logo.png”);
/*
Array
(
[public_id] => c87hg9xfxrd4itiim3t0
[version] => 1371995958
[signature] => f8645b000be7d717599affc89a068157e4748276
[width] => 864
[height] => 576
[format] => jpg
[resource_type] => image
[created_at] => 2013-06-23T13:59:18Z
[bytes] => 120253
[type] => upload
=> http://res.cloudinary.com/demo/image/upload/v1371995958/logo.png
[secure_url] => https://res.cloudinary.com/demo/image/upload/v1371995958/logo.png
)
*/
Щоб зменшити кількість звернень до Cloudinary, я можу зберігати URL secure_url і використовувати його тільки, коли мені потрібно побудувати сторінку зі списком посад! Після завантаження зображень на сервер з ними можна працювати, їх можна витягати і модифікувати!
Як отримати зображення
Одним з основних переваг Cloudinary є його зручність. З його допомогою можна з легкістю створювати і витягувати різні зображення за їх URL. Приклади:
Змінюючи URL зображення, ви можете використовувати всі можливі методи модифікації, але я спеціально в окремих випадках буду використовувати Node.js API, щоб показати вам всю красу роботи Cloudinary з різними API.
Адаптивні зображення
У Cloudinary є JQuery плагін та стратегія використання адаптивних зображень, часто в системах сіток:
// Using the jQuery plugin: http://cloudinary.com/documentation/jquery_integration#getting_started_guide
$.cloudinary.responsive(); // that’s it!
Змінюючи URL, можна налаштувати розміри зображень під себе:
Мені подобається, що змінювати формат і розмір зображень можна з допомогою простого редагування URL – це істотно полегшує прототипування і дозволяє поекспериментувати з зображеннями.
Адаптивні зображення за допомогою
Якщо ви хочете відображати медіа файли через тег для різних медіа запитів, то в Cloudinary є відмінна структура для цього:
Формат зображень і маніпуляції
Сервіс дозволяє конвертувати зображення в інші формати:
// Конвертування в PNG
cloudinary.image(“logo”, { format: ‘png’ });
// Стиснення якості на 50%
cloudinary.image(“logo.jpg”, { quality: 50 });
// Отримуємо превью зображення з другої сторінки PDF
cloudinary.image(“multi_page_pdf.jpg”, { width: 100, height: 140, crop: ‘fill’, page: 2 });
Можна погратися з фільтрами та іншими модифікаціями:
cloudinary.image(“smartphone.png”, {
underlay: “site_bg.jpg”,
width: 80, height: 80, effect: “brightness:100”,
transformation: {crop: ‘fill’, height: 80, ширина: 80 }
});
Автоматичне перетворення формату
У Cloudinary реалізований функціонал автоматичного перетворення формату – дана функція змінює формат зображення на той, який краще всього буде працювати в браузері клієнта. У chrome для е можна використовувати формат WebP, користувачам IE доступний формат JPEG-XR:
Перетворення у формати WebP і JPEG-XR повинні дати неабиякий приріст швидкості завантаження сторінок! Рекомендую спробувати!
Налаштування відео
Також можна налаштувати показ відео, від простої зміни розміру і до додавання водяних знаків і тексту:
“http://res.cloudinary.com/demo/video/upload/w_200,h_200,c_fill,g_north/dog.mp4
http://res.cloudinary.com/demo/video/upload/ac_none,w_500/l_cloudinary_icon,g_north_east,e_brightness:200,o_40,x_5,y_5,w_120/l_text:Roboto_34px_bold:Cute Dog,co_white,g_west,x_10,so_3/dog.mp4
Розміщуючи свої відео на Cloudinary, ви отримуєте ті ж переваги в маніпуляції і хмарному зберіганні, що і для зображень!
Спробуйте Cloudinary!
Cloudinary – універсальний спосіб завантаження, зберігання, маніпуляції і розповсюдження зображень і відео. API завжди інтуїтивно зрозумілі, ефективні і прості. В комплекті також йдуть вкрай корисні плагіни по оптимізації, серед яких є функція виявлення осіб, сепія/чорно-біле зображення, а також створення зображень соціальних мереж. Реєстрація на Cloudinary абсолютно безкоштовна, хоча б спробуйте – також ви знайдете масу добре прописаної документації і прикладів проектів!
