От автора: мы все время пытаемся повысить скорость загрузки сайта: используем ленивую загрузку изображений, минификацию с конкатенацией, создаем спрайты, экспериментируем с кэшированием. Делаем все, что только можно себе представить. Среди доступных на сегодня способов повышения производительности самый лучший способ – это оптимизации изображений для сайта. Среди техник оптимизации изображений есть.
Выбор оптимального формата изображения
Использование лучшего алгоритма по сжатию
Оптимизация изображений под устройства
Работа с изображениями с масштабируемого и быстрого источника
Масштабирование изображений под нужный размер
Идея за оптимизацией изображений стоит простая, но вот реализация не всегда так проста: все методы, как правило, требуют независимых подходов, что усложняет автоматизацию процесса. С сервисом Cloudinary вы сможете загружать, хранить, манипулировать и предоставлять доступ к изображениям и видео в сети.
Беглый обзор
Несколько важных моментов с Cloudinary:
В Cloudinary есть API для Node.js, Rails, django, PHP, jQuery, Angular, .NET, Java, iOS, Android. Сервис предоставляет простую командную строку и вставку URL структуры через HTML src
Cloudinary позволяет манипулировать изображениями на лету, в частности можно кадрировать изображения, присутствует метод трансформаций на основе обнаружения лиц и т.д.
Cloudinary автоматически создает адаптивные изображения
В Cloudinary есть интерфейс администратора с уведомлениями
В сервисе масса плагинов для еще большей оптимизации изображений и их распространения
В Cloudinary пользователи могут вручную трансформировать изображения через интерфейс администратора
Продвинутая функция кадрирования и позиционирования, функция обнаружения лиц, а также добавление аватарки из социальных сетей
В Cloudinary совершенно бесплатно предлагаются все необходимые для работы функции
Как работать с Cloudinary
Сервис Cloudinary можно использовать в разных направлениях. Глядя на свой сайт, я думаю только об измененных и оптимизированных изображениях на страницах со списком постов. Google PageSpeed постоянно указывает мне на размер изображений на моем сайте, и с ними нельзя не согласиться: Для вставки изображения в посты я использую шаблонное regex выражение, которое ищет в статье первое изображение и делает его заглавным. Однако этот шаблонный метод не оптимизирует изображения. Если изображение слишком большое, я просто уменьшаю его с помощью атрибутов в HTML, что не делает сам размер загружаемого файла меньше.
Cloudinary легко бы справился с моей проблемой аж целыми несколькими способами, но, на мой взгляд, лучшим вариантом будет Node.js. Сначала я бы установил их модель и передал в него изображения:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// npm установка cloudinary var cloudinary = require('cloudinary'); // Настройка cloudinary.config({ cloud_name: 'david-wash-blog', api_key: '###############', api_secret: '###############' }); // Получаем измененные изображения cloudinary.image('logo.png', { width: 200, height: 200, crop: 'fill' }); |
В результате нам возвращается HTML тег img с оптимизированным изображением под новый размер:
|
1 |
<img src='//res.cloudinary.com/david-wash-blog/image/upload/c_fill,h_200,w_200/logo.png' height='200' width='200'/> |
Так как мой блог работает на WordPress, я бы с легкостью мог воспользоваться PHP API:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
\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 [url] => //res.cloudinary.com/demo/image/upload/v1371995958/logo.png [secure_url] => //res.cloudinary.com/demo/image/upload/v1371995958/logo.png ) */ |
Чтобы уменьшить количество обращений к Cloudinary, я могу хранить URL secure_url и использовать его только, когда мне нужно построить страницу со списком постов! После загрузки изображений на сервер с ними можно работать, их можно вытягивать и модифицировать!
Как получить изображения
Одним из основных преимуществ Cloudinary является его удобность. С его помощью можно с легкостью генерировать и вытягивать различные изображения по их URL. Примеры:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- Use HTML to put image into account --> <img src="//res.cloudinary.com/demo/image/fetch///davidwalsh.name/demo/logo.png"> <!-- Create a Facebook* social image --> <img src="//res.cloudinary.com/demo/image/facebook/w_150,r_max/logo.png"> <!-- Create a Twitter, sepia social image --> <img src="//res.cloudinary.com/demo/image/twitter/w_150,e_sepia/logo.png"> <!-- Create a greyscale image --> <img src="//res.cloudinary.com/demo/image/upload/e_grayscale/sample.jpg"> <!-- Create a YouTube screen image --> <img src="//res.cloudinary.com/demo/image/youtube///www.youtube.com/watch?v=aNwnPElsJGE"> <!-- Create a round-cornered, sized animated GIF --> <img src="//res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,r_max/kitten_fighting.gif"> <!-- Create a sized image overlay --> <img src="//res.cloudinary.com/demo/image/upload/l_face_left/w_200,h_200,c_thumb,g_face,r_max/fl_layer_apply,g_north_east/flower.jpg"> <!-- Use conditional overlays --> <img src="//res.cloudinary.com/demo/image/upload/if_w_lt_600/l_text:Arial_20:Image shown in full scale,co_white,g_south_east/c_scale,e_blur:400,u_small_dinosaur,w_600/if_end/v1458729247/small_dinosaur.jpg"> |
Изменяя URL изображения, вы можете использовать все возможные методы модификации, но я специально в отдельных случаях буду использовать Node.js API, чтобы показать вам всю прелесть работы Cloudinary с различными API.
Адаптивные изображения
В Cloudinary есть JQuery плагин и стратегия использования адаптивных изображений, зачастую в системах сеток:
|
1 2 3 |
<img data-src="//res.cloudinary.com/david-walsh-blog/image/upload/w_auto/logo.jpg" class="cld-responsive"> // Using the jQuery plugin: //cloudinary.com/documentation/jquery_integration#getting_started_guide $.cloudinary.responsive(); // That's it! |
Изменяя URL, можно настроить размеры изображений под себя:
Мне нравится, что изменять формат и размер изображений можно с помощью простого редактирования URL – это существенно облегчает прототипирование и позволяет поэкспериментировать с изображениями.
Адаптивные изображения с помощью <picture>
Если вы хотите отображать медиа файлы через тег
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<picture> <!-- широкоформатное кадрирование --> <source media="(min-width: 600px)" srcset="//res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_600/on_the_phone.jpg 600w, //res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1200/on_the_phone.jpg 1200w" sizes="100vw" /> <!-- обычное кадрирование --> <img srcset="//res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_400/on_the_phone.jpg 400w, //res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_800/on_the_phone.jpg 800w" src="//res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_400/on_the_phone.jpg" alt="President Obama on the phone in the Oval Office" sizes="100vw" /> </picture> |
Формат изображений и манипуляции
Сервис позволяет конвертировать изображения в другие форматы:
|
1 2 3 4 5 6 7 8 |
// Конвертирование в 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 }); |
Можно поиграться с фильтрами и другими модификациями:
|
1 2 3 4 5 |
cloudinary.image("smartphone.png", { underlay: "site_bg.jpg", width: 80, height: 80, effect: "brightness:100", transformation: {crop: 'fill', height: 80, width: 80 } }); |
Автоматическое преобразование формата
В Cloudinary реализован функционал автоматического преобразования формата – данная функция изменяет формат изображения на тот, который лучше всего будет работать в браузере клиента. В Chrome’е можно использовать формат WebP, в пользователям IE доступен формат JPEG-XR:
|
1 2 |
<!-- "f_auto" triggers automatic formatting --> <img src="//res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg"> |
Преобразования в форматы WebP и JPEG-XR должны дать нешуточный прирост скорости загрузки страниц! Рекомендую попробовать!
Настройка видео
Также можно настраивать показ видео, от простого изменения размера и до добавления водяных знаков и текста:
|
1 2 3 4 5 |
<!-- Sized video --> //res.cloudinary.com/demo/video/upload/w_200,h_200,c_fill,g_north/dog.mp4 <!-- Video with overlay and brightness customizations --> //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 совершенно бесплатна, хотя бы попробуйте – также вы найдете массу хорошо прописанной документации и примеров проектов!
Автор: David Walsh
Источник: //davidwalsh.name/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
Комментарии (1)