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

Чтобы ускорить загрузку страниц и уменьшить объем передаваемых данных, существует Image Stack — инструмент CDN. Он позволяет автоматически оптимизировать изображения, улучшать SEO-результаты и повышать уровень конверсии за счет лучшего пользовательского опыта. 

Кому подойдет Image Stack

Веб-сайтам с большим количеством изображений

Image Stack позволяет значительно сократить время загрузки страниц и улучшить пользовательский опыт для сайтов с большим количеством изображений — например, онлайн-магазинов, новостных порталов и блогов. 

Мобильным приложениям

Мобильные пользователи часто имеют нестабильное интернет-соединение. Оптимизация изображений помогает сократить потребление трафика и ускорить загрузку контента.

Социальным сетям

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

Как Image Stack оптимизирует изображения

Меняет размер

Image Stack применяет алгоритмы сжатия к JPG и PNG-изображениям, чтобы уменьшить их размер без заметной потери качества. Конечный файл занимает мало места на сервере, поэтому пользователи с мобильными устройствами или медленным соединением могут легко просматривать содержимое сайтов. Чем больше размер изображений, тем ощутимее будет разница в скорости загрузки.

Конвертирует в новые форматы

Представье, вы — владелец интернет-магазина. В нем у каждого продукта есть страница с JPG-изображениями в высоком качесте. Такой формат занимает много места, поэтому пользователям приходится ждать загрузки фотографии. Чтобы этого избежать, можно конвертировать изображения в формат WebP или AVIF —  они поддерживают высокое качество при меньшем размере файла. В результате пользователи реже покидают сайт, не дождавшись загрузки, а конверсия увеличивается. 

• WebP — формат, который основан на алгоритме сжатия неподвижных изображений (ключевых кадров) из видеокодека VP8. Использует контейнер RIFF. Если конвертировать картинку из PNG или JPG в WebP, ее вес уменьшится на 25–35%. 

• AVIF — формат, который сжимает изображения и при этом сохраняет его оригинальное качество без потерь. Обычно его используют для хранения изображений в формате контейнера HEIF.

Кадрирует изображение

Image Stack может обрезать изображения до нужных пропорций и менять их размер, чтобы они соответствовали требованиям веб-страницы или устройства. После — доставляет готовые файлы через CDN. 

Пользователь может самостоятельно задавать параметры обрезки для каждого изображения. Например, на сервере-источнике хранится картинка 500x500 пикселей. С помощью опции Обрезка он может изменить размер на 200х200 и выровнять по центру. 

При доставке через CDN картинка автоматически уменьшается — остается только фрагмент 200х200 в центре. На источнике по-прежнему будет храниться изображение 500х500, но пользователь получит его уменьшенный вариант — 200х200. 

Снижает качество изображения

Пользователь может уменьшить качество изображений, чтобы существенно сократить их размер. В Image Stack разрешение измеряется процентами — от 1% до 100%. Чем ниже значения, тем хуже качество картинки. Как и в предыдущем методе, вы самостоятельно определяете, какие параметры нужно задать.

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

Как подключить Image Stack

1. В панели управления перейдите в раздел CDN → CDN-ресурсы.

2. Откройте страницу CDN-ресурса → вкладка Настройки.

3. Рекомендуем включить шилдинг источника⁠​, чтобы предотвратить перегрузки и атаки на сервер. Этот шаг опциональный, его можно пропустить. 

Когда вы включите Image Stack, кеш CDN-ресурса автоматически очистится. Все запросы начнут попадать на источник, что может увеличить время загрузки вашего сайта.

4. Отметьте чекбокс Image Stack.

5. Чтобы сжимать изображения, выберите качество — 95%, 80% или 65%, либо выберите Свое значение и введите его.

6. Чтобы не менять качество изображений формата .png, включите сжатие без потерь для .png.

7. Чтобы конвертировать формат изображения, включите сжатие .avif или .webp.

8. Нажмите Сохранить.

9. Дополнительные настройки можно сделать через URL-параметры на сайте⁠​. Подробнее — в документации.⁠

Заключение

Внедрение Image Stack — это важный шаг к созданию быстрых, эффективных и современных веб-ресурсов.

Image Stack помогает улучшить производительность веб-сайтов и приложений. Благодаря автоматическому сжатию, конвертации, обрезке и изменению размера изображений пользователи получают более быстрый доступ к контенту, а владельцы сайтов — улучшенные показатели по SEO и снижение нагрузки на сервер.