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

14

Від автора: ми весь час намагаємося підвищити швидкість завантаження сайту: використовуємо ліниву завантаження зображень, минификацию з конкатенацией, створюємо спрайт, експериментуємо з кешуванням. Робимо все, що тільки можна собі уявити. Серед доступних на сьогодні способів підвищення продуктивності найкращий спосіб – це оптимізації зображень для сайту. Серед технік оптимізації зображень є.

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

Використання найкращого алгоритму стиску

Оптимізація зображень під пристрою

Робота із зображеннями з масштабується і швидкого джерела

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

Ідея за оптимізацією зображень стоїть проста, але ось реалізація не завжди так проста: усі методи, як правило, вимагають незалежних підходів, що ускладнює автоматизацію процесу. З сервісом 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 абсолютно безкоштовна, хоча б спробуйте – також ви знайдете масу добре прописаної документації і прикладів проектів!