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

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

Для кого подходит Image Stack?

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

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

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

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

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

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

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

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

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

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

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

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

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

Обрезает изображение

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

Пользователь может установить параметры обрезки для каждого изображения независимо. Например, исходный сервер хранит изображение размером 500 x 500 пикселей. Использование опции Подрезать Его размер можно изменить до 200×200 и отцентрировать.

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

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

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

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

Как подключить стек изображений

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

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

3. Мы рекомендуем включить защиту источника, чтобы предотвратить перегрузки и атаки на сервер. Этот шаг не является обязательным и его можно пропустить.

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

4. Установите флажок Стек изображений.

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

6. Чтобы избежать ухудшения качества изображений PNG, включите сжатие без потерь для PNG.

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

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

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

Диплом

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

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