Как оптимизировать изображения с помощью Image Stack
В тексте рассмотрим, как работает Image Stack, какие задачи решает и почему его стоит использовать.
Для чего нужна оптимизация изображений
Оптимизация изображений играет ключевую роль в производительности веб-сайтов. Чем больше файлы, тем медленнее загружается страница, а пользователям становится неудобно с ней взаимодействовать. Как итог, у сайтов падают охваты и снижаются позиции в поисковых системах.
Чтобы ускорить загрузку страниц и уменьшить объем передаваемых данных, существует 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.
Пользователь может самостоятельно задавать параметры обрезки для каждого изображения. Например, на сервере-источнике хранится картинка 500×500 пикселей. С помощью опции Обрезка он может изменить размер на 200х200 и выровнять по центру.
При доставке через CDN картинка автоматически уменьшается — остается только фрагмент 200х200 в центре. На источнике по-прежнему будет храниться изображение 500х500, но пользователь получит его уменьшенный вариант — 200х200.
Снижает качество изображения
Пользователь может уменьшить качество изображений, чтобы существенно сократить их размер. В Image Stack разрешение измеряется процентами — от 1% до 100%. Чем ниже значения, тем хуже качество картинки. Как и в предыдущем методе, вы самостоятельно определяете, какие параметры нужно задать.
К примеру, у вас есть сайт со стоковыми фотографиями. В нем пользователь может скачивать бесплатно только десять изображений в высоком качестве. Чтобы это настроить, вам нужно поставить лимит, по достижению которого фото будут скачиваться в сжатом виде.
Как подключить Image Stack
- В панели управления перейдите в раздел CDN → CDN-ресурсы.
- Откройте страницу CDN-ресурса → вкладка Настройки.
- Рекомендуем включить шилдинг источника, чтобы предотвратить перегрузки и атаки на сервер. Этот шаг опциональный, его можно пропустить.
Когда вы включите Image Stack, кеш CDN-ресурса автоматически очистится. Все запросы начнут попадать на источник, что может увеличить время загрузки вашего сайта.
- Отметьте чекбокс Image Stack.
- Чтобы сжимать изображения, выберите качество — 95%, 80% или 65%, либо выберите Свое значение и введите его.
- Чтобы не менять качество изображений формата .png, включите сжатие без потерь для .png.
- Чтобы конвертировать формат изображения, включите сжатие .avif или .webp.
- Нажмите Сохранить.
- Дополнительные настройки можно сделать через URL-параметры на сайте. Подробнее — в документации.
Заключение
Внедрение Image Stack — это важный шаг к созданию быстрых, эффективных и современных веб-ресурсов.
Image Stack помогает улучшить производительность веб-сайтов и приложений. Благодаря автоматическому сжатию, конвертации, обрезке и изменению размера изображений пользователи получают более быстрый доступ к контенту, а владельцы сайтов — улучшенные показатели по SEO и снижение нагрузки на сервер.
