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

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

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

Содержание статьи:

• Подключение сервиса
• Примеры использования
• Как пользоваться сервисом?
• Сжатие по ширине
• Сжатие по высоте
• Пропорциональность
• Гравитация
• Рамка
• Резкость
• Размытие
• Стоимость услуги

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

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

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

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

При возникновении сложностей, напишите нам письмо с указанием вашего номера проекта.

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

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

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

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

https://user21345.nowcdn.co/src/files/cat.jpg

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

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

Сжатие изображений

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

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

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

https://user21345.nowcdn.co/src/files/cat.jpg?width=480

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

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

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

https://user21345.nowcdn.co/src/files/cat.jpg?height=150

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

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

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

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

https://user21345.nowcdn.co/src/files/cat.jpg?rs=fill&width=290&height=100

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• 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 могут принимать только положительные значения.

https://user21345.nowcdn.co/src/files/cat.jpg?rs=fill&width=480&height=200&g=no

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

Рамка

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

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

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

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

https://user21345.nowcdn.co/src/files/cat.jpg?width=480&pd=10&bg=999999

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

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

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

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

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

Резкость

Изображение можно сделать резче.

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

Number может изменяться от 1 до 100.

https://user21345.nowcdn.co/src/files/cat.jpg?width=480&pd=10&bg=999999&sh=2

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

Размытие

Изображение можно размыть.

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

Number может изменяться от 1 до 100.

https://user21345.nowcdn.co/src/files/cat.jpg?width=480&pd=10&bg=999999&bl=2

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

Стоимость услуги

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

1000 запросов изображений = 15 рублей

Стастистику по запросам можно наблюдать в личном кабинете cdnnow!, раздел Статистика / Оптимизация изображений. Эта статистика появляется после активации услуги.

Каждому клиенту предоставляется возможность бесплатно протестировать данную услугу в течение 7 дней, для этого нужно написать в поддержку.

Или если вы еще не являетесь нашим клиентом, можете оставить заявку для подключения сайта к CDN с оптимизацией изображений.