Image stack. Изменить размер изображений

Последние изменения: 08.11.2023

Об операции
Использовать
Проверить работу операции

Об операции Изменение размера

Что это. Изменение размера — операция Image stack, которая изменяет высоту и ширину исходного изображения при его доставке через CDN. Высоту, ширину и метод уменьшения вы или ваши пользователи задаёте сами для каждого изображения.

Пример. На сервере-источнике хранится картинка размером 1000x600 пикселей, но вы с помощью Изменения размера задали параметры height=500, width=300. В кеше CDN картинка автоматически уменьшилась. В результате на источнике по-прежнему хранится изображение 1000x600, но пользователи получают его уменьшенный вариант — 500х300.

Как работает. Чтобы задать новую высоту и ширину изображения, нужно добавить соответствующие параметры запросов в URL картинок. Эти параметры описаны в разделе Использовать Изменение размера. Если вы установили эти параметры на источнике, CDN отдаст пользователям изменённую копию картинки. Если на источнике таких параметров нет, пользователи смогут задать их самостоятельно с помощью параметров запроса.

Особенности. Изменение размера входит в платную опцию Image stack. Эта опция помогает оптимизировать изображения: конвертировать в формат WebP и AVIF, обрезать, изменять качество и размеры. Чтобы использовать Изменение размера, нужно подключить Image stack.

Использовать Изменение размера

Подключите опцию Image stack к CDN-ресурсу согласно инструкции «Как подключить опцию».

После включения опции пользователи смогут изменять размер картинок самостоятельно. Если вы хотите задать их размеры на источнике, следуйте инструкции ниже:

1. Откройте код сайта-источника.

2. Найдите строки с URL изображений, размеры которых хотите уменьшить с помощью операции.

3. Добавьте параметры запроса в URL изображений.

Один параметр задаётся в формате:

image.jpg?параметр=значение

Два и более параметров задаются в формате:

image.jpg?параметр1=значение&параметр2=значение&…

где image.jpg — URL вашего изображения на сайте.

Параметр и как он работает

Пример

Width

Параметр width сжимает картинку с сохранением
пропорций исходной картинки.

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

Пример: на сервере-источнике картинка
размером 900 (ширина) × 600 (высота).
Вы указываете новое значение ширины width=300.
Ширина должна уменьшиться в три раза.
Вместе с ней в три раза уменьшится и высота,
и вы получите изображение размером 300х200.

До: image.jpg

500×333

После: image.jpg?width=300

300×200

Height

Параметр height сжимает картинку с сохранением
пропорций исходной картинки.

Через параметр height вы указываете
высоту новой картинки в пикселях.
Ширина будет рассчитана автоматически так,
чтобы сохранить пропорции исходной картинки.

Пример: на сервере-источнике картинка
размером 900 (ширина) × 600 (высота).
Вы указываете новое значение высоты height=300.
Высота должна уменьшиться в два раза.
Вместе с ней в два раза уменьшится и ширина,
и вы получите изображение размером 450х300.

До: image.jpg

500×333

После: image.jpg?height=300

450×300

Fit

Параметр fit настраивает,

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

Чтобы использовать fit, нужно указать
в параметрах и ширину, и высоту
будущего изображения, а уже после
добавить параметр fit. Вот так:
image.jpg?width=300&height=100&fit=…

Если вы укажете только высоту и ширину
и не укажете параметр fit, сработает значение
по умолчанию — fit=fit.

Fit может принимать четыре значения:

1. fit=fit

Картинка будет иметь ширину и высоту,
которые вы указали в width и height.
Лишние пиксели будут равномерно
обрезаны по краям.

Пример: размеры исходной картинки 1000×500,
а вы указали новую ширину 800, высоту 100 и fit=fit.
Чтобы размер итоговой картинки был 800×100,
сверху и снизу будет отрезано по 100 пикселей,
а слева и справа — по 200.

2. fit=bounds

Картинка будет уменьшена пропорционально.
Во время уменьшения из значений
width и height Изменение размера

выберет большее и будет
ориентироваться на него, а второе проигнорирует.

Так, размер большей стороны

будет таким, как вы указали.
А размер меньшей — изменится,
чтобы сохранить соотношение сторон
оригинальной картинки.

Пример: на сервере-источнике картинка
со сторонами 1000×500 пикселей.
Вы указали итоговую ширину 500,
высоту 300 и fit=bounds.

Как будет действовать операция:
1) Сравнит значения ширины и высоты
и выберет наибольшее.
В данном случае наибольшее — ширина (500).
Значение высоты операция проигнорирует.

2) Рассчитает пропорции исходного изображения.
В данном случае это 1000х500,
то есть высота в два раза меньше ширины.

3) Уменьшит картинку, взяв за основу данные:
ширина 500, высота должна быть
в два раза меньше ширины.
Значит, высота должна быть 250.
Операция уменьшит картинку до размера 500х250.

3. fit=cover

Картинка будет уменьшена пропорционально.
Во время уменьшения из значений
width и height Изменение размера
выберет меньшее и будет ориентироваться на него,
а второе проигнорирует.

Так, размер меньшей стороны
будет таким, как вы указали.
А размер большей — изменится,
чтобы сохранить соотношение сторон
оригинальной картинки.

Пример: на сервере-источнике картинка
со сторонами 1000×500 пикселей.
Вы указали итоговую ширину 500, высоту 300
и fit=bounds.

Как будет действовать Изменение размера:

1) Сравнит значения ширины и высоты
и выберет наименьшее.
В данном случае наименьшее — высота (300).
Значение ширины операция проигнорирует.

2) Рассчитает пропорции исходного изображения.
В данном случае это 1000х500,
то есть ширина в два раза больше высоты.

3) Уменьшит картинку, взяв за основу данные:
высота 300, ширина должна быть
в два раза больше высоты.
Значит, ширина должна быть 600.
Операция уменьшит картинку до размера 600х300.

4. fit=force

У итоговой картинки будут те ширина и высота,
которые вы укажете в параметрах.
Картинка сожмётся по ширине и высоте,
даже если это нарушает
пропорции исходного изображения.

До: image.jpg

500×333

После: image.jpg?width=200&height=100&fit=fit или

image.jpg?width=200&height=100

200×100

После: image.jpg?width=200&height=100&fit=bounds

200×133

После: image.jpg?width=200&height=100&fit=cover

150×100

После: image.jpg?width=200&height=50&fit=force

200х50

4. Сохраните изменения в коде сайта-источника.

Теперь изображения на сайте будут отображаться с теми размерами, которые вы задали.

Проверить работу операции

Проверить, применились ли изменения, можно по значению HTTP-заголовка изображения. В заголовке X-Img-Operations отображаются все выполненные преобразования. Если видите в строке значение resize — размер изображения изменился.

Если значения resize в заголовке нет, и из кеша CDN отдаётся изображение исходного размера, проверьте HTTP-заголовок Img-skip-reason. Там указывается причина, по которой операция не смогла быть выполнена.

Помогла ли вам статья?