Оптимизация изображений для сайта

Оптимизация изображений для сайта

От автора: мы все время пытаемся повысить скорость загрузки сайта: используем ленивую загрузку изображений, минификацию с конкатенацией, создаем спрайты, экспериментируем с кэшированием. Делаем все, что только можно себе представить. Среди доступных на сегодня способов повышения производительности самый лучший способ – это оптимизации изображений для сайта. Среди техник оптимизации изображений есть.

Выбор оптимального формата изображения

Использование лучшего алгоритма по сжатию

Оптимизация изображений под устройства

Работа с изображениями с масштабируемого и быстрого источника

Масштабирование изображений под нужный размер

Идея за оптимизацией изображений стоит простая, но вот реализация не всегда так проста: все методы, как правило, требуют независимых подходов, что усложняет автоматизацию процесса. С сервисом 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. Сначала я бы установил их модель и передал в него изображения:

// 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 с оптимизированным изображением под новый размер:

<img src='http://res.cloudinary.com/david-wash-blog/image/upload/c_fill,h_200,w_200/logo.png' height='200' width='200'/>

Так как мой блог работает на 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. Примеры:

<!-- Use HTML to put image into account -->
<img src="//res.cloudinary.com/demo/image/fetch/https://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/http://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 плагин и стратегия использования адаптивных изображений, зачастую в системах сеток:

<img data-src="//res.cloudinary.com/david-walsh-blog/image/upload/w_auto/logo.jpg" class="cld-responsive">
// Using the jQuery plugin: http://cloudinary.com/documentation/jquery_integration#getting_started_guide
$.cloudinary.responsive(); // That's it!

Изменяя URL, можно настроить размеры изображений под себя:

Мне нравится, что изменять формат и размер изображений можно с помощью простого редактирования URL – это существенно облегчает прототипирование и позволяет поэкспериментировать с изображениями.

Адаптивные изображения с помощью <picture>

Если вы хотите отображать медиа файлы через тег для различных медиа запросов, то в Cloudinary есть отличная структура для этого:

<picture>

  <!-- широкоформатное кадрирование -->
  <source 
    media="(min-width: 600px)"
    srcset="http://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_600/on_the_phone.jpg 600w,
            http://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="http://res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_400/on_the_phone.jpg 400w,
            http://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>

Формат изображений и манипуляции

Сервис позволяет конвертировать изображения в другие форматы:

// Конвертирование в 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, width: 80 }
});

Автоматическое преобразование формата

В Cloudinary реализован функционал автоматического преобразования формата – данная функция изменяет формат изображения на тот, который лучше всего будет работать в браузере клиента. В Chrome’е можно использовать формат WebP, в пользователям IE доступен формат JPEG-XR:

<!-- "f_auto" triggers automatic formatting -->
<img src="//res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg">

Преобразования в форматы WebP и JPEG-XR должны дать нешуточный прирост скорости загрузки страниц! Рекомендую попробовать!

Настройка видео

Также можно настраивать показ видео, от простого изменения размера и до добавления водяных знаков и текста:

<!-- Sized video -->

"http://res.cloudinary.com/demo/video/upload/w_200,h_200,c_fill,g_north/dog.mp4"

<!-- Video with overlay and brightness customizations -->
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 совершенно бесплатна, хотя бы попробуйте – также вы найдете массу хорошо прописанной документации и примеров проектов!

Автор: David Walsh

Источник: https://davidwalsh.name/

Редакция: Команда webformyself.

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Юрий

    Интересная статья, а с какими форматами работает Cloudinary, на скриншотах я видел только jpg и mp4?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree