Тонкости оптимизации изображений в CDN

Сервис автоматической обработки изображений необходим для того чтобы:

• Изменять размеры изображений
• Оптимизировать формат изображений
• Обрезать изображения
• Сжимать изображения без потери качества
• и делать многое другое.

Подключение сервиса обработки изображений

Если вы еще не являетесь нашим клиентом CDN, вы можете оставить заявку на подключение CDN, указав ваши email, сайт, CMS (если применимо). В комментарии заявки укажите, что хотели бы подключить также оптимизацию изображений.

Вы получите письмо с доступом в личный кабинет cdnnow! и служебным адресом CDN для вашего проекта вида userXXXXX.clients-cdnnow.ru или userXXXXX.nowcdn.co, где userXXXXX — ваш уникальный параметр.

Если вы уже подключили ваш сайт к нашей сети CDN, чтобы активировать услугу оптимизации изображений, перейдите в личный кабинет cdnnow!, откройте ваш проект с типом «Раздача файлов с вашего сервера» или «Раздача файлов с сервера cdnnow!».

• В настройках проекта перейдите на вкладку «Ускорение».
• Активируйте переключатель «Включить оптимизацию изображений».
• Выберите ширину и высоту изображений. Можно указать «любая» или задать постоянные величины в пикселях через запятую.
• Укажите, какие расширения файлов из предложенного списка обрабатывать (jpg, jpeg, gif, png, ico). Мы не рекомендуем указывать ico, если иконки на сайте содержат прозрачность.
• Сохраните изменения без публикации. После того, как вы закончите менять все настройки, опубликуйте проект.

Как пользоваться сервисом?

Сервис автоматически выбирает лучший формат изображений в зависимости от заголовков, которые ему передаёт браузер пользователя.

При этом, название файлов и их расширения в коде сайта не меняются.

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

• user21345, служебное имя проекта в cdnnow! (подставьте ваш номер)
• /src/files/cat.jpg, путь до исходного изображения

Оригинальное изображение в формате jpg занимает 213252 байта. Если ваш браузер поддерживает webp, а практически все современные браузеры поддерживают этот формат, то размер изображения будет оптимизирован до 85258 байт.

Мы сжали файл в 2,5 раза (то есть на 60%)!

Оригинальное изображение без сжатия
jpg, 213 252 байта

Сжатое изображение
jpg с типом webp (в http-заголовке), 85 258 байт

Сжатие изображений (по габаритам)

Для оптимизации скорости загрузки файлов применяется метод изменения размеров изображений в зависимости от устройства пользователя.

Сжатие по ширине

Для того, чтобы сжать изображение по ширине, достаточно передать параметр width=xxx в аргументах запроса. Если требуемая ширина присутствует в списке ширин, сервис вернёт сжатое по ширине изображение. Если нет, вы получите сообщение об ошибке.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• width=480, требуемая ширина

Сжатое по ширине изображение
width=480

Сжатие по высоте

Для того чтобы сжать изображение по высоте, достаточно передать параметр height=xxx в аргументах запроса. Если требуемая высота присутствует в списке высот, сервис вернёт сжатое по высоте изображение.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• height=150, требуемая высота

Сжатое по высоте изображение
height=150

Пропорциональность сжатия картинок

По умолчанию изображения сжимаются пропорционально.

Для того чтобы сжать изображение не пропорционально, достаточно передать параметр rs=fill в аргументах запроса и задать ширину и высоту.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• rs=fill, включить не пропорциональное сжатие
• width=290, требуемая ширина
• height=100, требуемая высота

Сжатое изображение
rs=fill&width=290&height=100

Гравитация

Если исходное изображение трансформируется не пропорционально, можно указать угол в который «притянет» новое изображение.

Для того чтобы «притянуть» изображение, достаточно передать параметр g=type:x_offset:y_offset в аргументах запроса.

Где type:

• no, притянуть к верхнему краю
• so, притянуть к нижнему краю
• ea, притянуть к правому краю
• we, притянуть к левому краю
• noea, притянуть к правому верхнему краю
• nowe, притянуть к левому верхнему краю
• soea, притянуть в нижнему правому краю
• sowe, притянуть к нижнему левому краю
• ce, притянуть к центру

x_offset и y_offset смещения относительно края изображения.

Параметры x_offset и y_offset могут принимать только положительные значения.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• rs=fill, включить не пропорциональное сжатие
• width=480, требуемая ширина
• height=200, требуемая высота
• g=no, притянуть к верхнему краю

Сжатое изображение
rs=fill&width=480&height=200&g=no

Сжатое изображение
rs=fill&width=480&height=200&g=so

Сжатое изображение
rs=fill&width=290&height=300&g=ea

Сжатое изображение
rs=fill&width=290&height=300&g=we

Рамка

Вокруг обработанного изображения можно задать рамку.

Обратите внимание, что размер рамки добавляется к размеру обработанного изображения и рамка станет его частью, в отличие от стилевого оформления с помощью CSS.

Для формирования рамки вокруг обработанного изображения, достаточно передать параметр pd=size

Для того, чтобы задать цвет рамки передайте параметр bg=RRGGBB, где RRGGBB цвет в формате hex (без прозрачности).

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• width=480, требуемая ширина
• pd=10, требуемый размер рамки в пикселях со всех сторон
• bg=999999, требуемый цвет рамки

Сжатое изображение
width=480&pd=10&bg=999999
Размер изображения: 500 пикселей (480 + 10 + 10)

Для того чтобы задать разный размер рамки сверху/снизу и слева/справа необходимо передать параметр pd=10:20

• 10, размер рамки сверху/снизу
• 20, размер рамки слева/справа

Сжатое изображение
width=480&pd=10:20&bg=AA0000

Для того чтобы задать разный размер рамки сверху, справа, снизу и слева необходимо передать параметр pd=10:20:30:40

• 10, размер рамки сверху/снизу
• 20, размер рамки слева/справа
• 30, размер рамки снизу
• 40, размер рамки слева

Сжатое изображение
width=480&pd=10:20:30:40&bg=15b2a0

Резкость

Изображение можно сделать резче.
Для того чтобы сделать изображение резче достаточно передать параметр sh=number.
Number может изменяться от 1 до 100.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• width=480, требуемая ширина
• pd=10, требуемый размер рамки в пикселях со всех сторон
• bg=999999, требуемый цвет рамки
• sh=2, резкость

Сжатое изображение
width=480&pd=10&bg=999999&sh=2

Размытие

Изображение можно размыть.
Для того чтобы размыть изображение достаточно передать параметр bl=number.
Number может изменяться от 1 до 100.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• width=480, требуемая ширина
• pd=10, требуемый размер рамки в пикселях со всех сторон
• bg=999999, требуемый цвет рамки
• bl=3, размытость

Сжатое изображение
width=480&pd=10&bg=999999&bl=3