Від автора: ми веÑÑŒ Ñ‡Ð°Ñ Ð½Ð°Ð¼Ð°Ð³Ð°Ñ”Ð¼Ð¾ÑÑ Ð¿Ñ–Ð´Ð²Ð¸Ñ‰Ð¸Ñ‚Ð¸ швидкіÑÑ‚ÑŒ Ð·Ð°Ð²Ð°Ð½Ñ‚Ð°Ð¶ÐµÐ½Ð½Ñ Ñайту: викориÑтовуємо ліниву Ð·Ð°Ð²Ð°Ð½Ñ‚Ð°Ð¶ÐµÐ½Ð½Ñ Ð·Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½ÑŒ, минификацию з конкатенацией, Ñтворюємо Ñпрайт, екÑпериментуємо з кешуваннÑм. Робимо вÑе, що тільки можна Ñобі уÑвити. Серед доÑтупних на Ñьогодні ÑпоÑобів Ð¿Ñ–Ð´Ð²Ð¸Ñ‰ÐµÐ½Ð½Ñ Ð¿Ñ€Ð¾Ð´ÑƒÐºÑ‚Ð¸Ð²Ð½Ð¾ÑÑ‚Ñ– найкращий ÑпоÑіб – це оптимізації зображень Ð´Ð»Ñ Ñайту. Серед технік оптимізації зображень Ñ”.
Вибір оптимального формату зображеннÑ
ВикориÑÑ‚Ð°Ð½Ð½Ñ Ð½Ð°Ð¹ÐºÑ€Ð°Ñ‰Ð¾Ð³Ð¾ алгоритму ÑтиÑку
ÐžÐ¿Ñ‚Ð¸Ð¼Ñ–Ð·Ð°Ñ†Ñ–Ñ Ð·Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½ÑŒ під приÑтрою
Робота із зображеннÑми з маÑштабуєтьÑÑ Ñ– швидкого джерела
МаÑÑˆÑ‚Ð°Ð±ÑƒÐ²Ð°Ð½Ð½Ñ Ð·Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½ÑŒ під потрібний розмір
Ð†Ð´ÐµÑ Ð·Ð° оптимізацією зображень Ñтоїть проÑта, але оÑÑŒ Ñ€ÐµÐ°Ð»Ñ–Ð·Ð°Ñ†Ñ–Ñ Ð½Ðµ завжди так проÑта: уÑÑ– методи, Ñк правило, вимагають незалежних підходів, що уÑкладнює автоматизацію процеÑу. З ÑервіÑом 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 абÑолютно безкоштовна, хоча б Ñпробуйте – також ви знайдете маÑу добре пропиÑаної документації Ñ– прикладів проектів!
