- tocdepth
2
Обрезка области изображения
Обрезка — платная опция для обрезки исходного изображение перед доставкой через CDN.
Параметры обрезки изображения вы указываете самостоятельно для каждого изображения.
Обрезка помогает оптимизировать изображение: конвертировать в формат .webp
или .avif
, обрезать, изменять качество и размер изображения.
Обрезка изображения на источнике
Для обрезки области изображения после настройки Image stack задайте формат на сайте-источнике:
Откройте код сайта-источника и найдите строки с URL нужных изображений.
Добавьте в URL изображений параметр запроса с нужными значениями в формате:
image.jpg?параметр=значения
.На месте
image.jpg
используйте URL вашего изображения на сайте.Сохраните изменения в коде сайта-источника.
Изображения отображаются на сайте в указанном размере.
Обрезка изображения с изменением пропорций
С помощью обрезки можно вырезать фрагмент из исходного изображения и отправлять пользователям вырезанный фрагмент.
Размер фрагмента указывается в параметре запроса, например image.jpg?crop=16:9
.
На месте 16:9
укажите отношение ширины вырезаемого фрагмента к его высоте.
Обрезка по центру исходного изображения
При обрезке по центру остается только фрагмент изображения в центре.
Размер фрагмента указывается в параметре запроса, например image.jpg?crop=300,200
.
На месте 300
укажите ширину вырезаемого фрагмента, на месте 200
— высоту вырезаемого фрагмента.
Обрезка конкретного фрагмента
Чтобы вырезать фрагмент из конкретной части исходного изображения, в параметре запроса нужно указать ширину, высоту фрагмента и место нужного фрагмента.
Место и размер фрагмента указывается в параметре запроса, например image.jpg?сrop=300,200,x100,y50
.
На месте:
300
укажите ширину вырезаемого фрагмента;200
укажите высоту вырезаемого фрагмента;100
укажите, сколько пикселей отступить от левого края исходного изображения;50
укажите, сколько пикселей отступить от верхнего края исходного изображения.
Чтобы вместо пикселей указать процент отступа, добавьте к третьей и четвертой переменным p
: image.jpg?сrop=300,200,x25p,y10p
.
Была ли статья полезной?
для Dev & Test