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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

В результате нам возвращается HTML тег img с оптимизированным изображением под новый размер:

Так как мой блог работает на WordPress, я бы с легкостью мог воспользоваться PHP API:

Чтобы уменьшить количество обращений к Cloudinary, я могу хранить URL secure_url и использовать его только, когда мне нужно построить страницу со списком постов! После загрузки изображений на сервер с ними можно работать, их можно вытягивать и модифицировать!

Как получить изображения

Одним из основных преимуществ Cloudinary является его удобность. С его помощью можно с легкостью генерировать и вытягивать различные изображения по их URL. Примеры:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Изменяя URL изображения, вы можете использовать все возможные методы модификации, но я специально в отдельных случаях буду использовать Node.js API, чтобы показать вам всю прелесть работы Cloudinary с различными API.

Адаптивные изображения

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

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

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

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

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

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

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

Можно поиграться с фильтрами и другими модификациями:

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

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

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

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

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

Размещая свои видео на 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree