ÐÑд авÑоÑа: ми веÑÑ ÑÐ°Ñ Ð½Ð°Ð¼Ð°Ð³Ð°ÑмоÑÑ Ð¿ÑдвиÑиÑи ÑвидкÑÑÑÑ Ð·Ð°Ð²Ð°Ð½ÑÐ°Ð¶ÐµÐ½Ð½Ñ ÑайÑÑ: викоÑиÑÑовÑÑмо лÑÐ½Ð¸Ð²Ñ Ð·Ð°Ð²Ð°Ð½ÑÐ°Ð¶ÐµÐ½Ð½Ñ Ð·Ð¾Ð±ÑаженÑ, миниÑикаÑÐ¸Ñ Ð· конкаÑенаÑией, ÑÑвоÑÑÑмо ÑпÑайÑ, екÑпеÑименÑÑÑмо з кеÑÑваннÑм. Робимо вÑе, Ñо ÑÑлÑки можна ÑÐ¾Ð±Ñ ÑÑвиÑи. СеÑед доÑÑÑÐ¿Ð½Ð¸Ñ Ð½Ð° ÑÑÐ¾Ð³Ð¾Ð´Ð½Ñ ÑпоÑобÑв пÑдвиÑÐµÐ½Ð½Ñ Ð¿ÑодÑкÑивноÑÑÑ Ð½Ð°Ð¹ÐºÑаÑий ÑпоÑÑб â Ñе опÑимÑзаÑÑÑ Ð·Ð¾Ð±ÑÐ°Ð¶ÐµÐ½Ñ Ð´Ð»Ñ ÑайÑÑ. СеÑед ÑÐµÑ Ð½Ñк опÑимÑзаÑÑÑ Ð·Ð¾Ð±ÑÐ°Ð¶ÐµÐ½Ñ Ñ.
ÐибÑÑ Ð¾Ð¿ÑималÑного ÑоÑмаÑÑ Ð·Ð¾Ð±ÑаженнÑ
ÐикоÑиÑÑÐ°Ð½Ð½Ñ Ð½Ð°Ð¹ÐºÑаÑого алгоÑиÑÐ¼Ñ ÑÑиÑкÑ
ÐпÑимÑзаÑÑÑ Ð·Ð¾Ð±ÑÐ°Ð¶ÐµÐ½Ñ Ð¿Ñд пÑиÑÑÑоÑ
РобоÑа Ñз зобÑаженнÑми з маÑÑÑабÑÑÑÑÑÑ Ñ Ñвидкого джеÑела
ÐаÑÑÑабÑÐ²Ð°Ð½Ð½Ñ Ð·Ð¾Ð±ÑÐ°Ð¶ÐµÐ½Ñ Ð¿Ñд поÑÑÑбний ÑозмÑÑ
ÐÐ´ÐµÑ Ð·Ð° опÑимÑзаÑÑÑÑ Ð·Ð¾Ð±ÑÐ°Ð¶ÐµÐ½Ñ ÑÑоÑÑÑ Ð¿ÑоÑÑа, але оÑÑ ÑеалÑзаÑÑÑ Ð½Ðµ завжди Ñак пÑоÑÑа: ÑÑÑ Ð¼ÐµÑоди, Ñк пÑавило, вимагаÑÑÑ Ð½ÐµÐ·Ð°Ð»ÐµÐ¶Ð½Ð¸Ñ Ð¿ÑÐ´Ñ Ð¾Ð´Ñв, Ñо ÑÑкладнÑÑ Ð°Ð²ÑомаÑизаÑÑÑ Ð¿ÑоÑеÑÑ. Ð ÑеÑвÑÑом 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 абÑолÑÑно безкоÑÑовна, Ñ Ð¾Ñа б ÑпÑобÑйÑе â Ñакож ви знайдеÑе маÑÑ Ð´Ð¾Ð±Ñе пÑопиÑÐ°Ð½Ð¾Ñ Ð´Ð¾ÐºÑменÑаÑÑÑ Ñ Ð¿ÑикладÑв пÑоекÑÑв!