![](https://habrastorage.org/getpro/habr/upload_files/d8f/b9c/6c2/d8fb9c6c237fa8ebf3535327d5922c17.png)
Оптимизация изображений играет ключевую роль в производительности веб-сайтов. Чем больше файлы, тем медленнее загружается страница, а пользователям становится неудобно с ней взаимодействовать. Как итог, у сайтов падают охваты и снижаются позиции в поисковых системах.
Чтобы ускорить загрузку страниц и уменьшить объем передаваемых данных, существует Image Stack — инструмент CDN. Он позволяет автоматически оптимизировать изображения, улучшать SEO-результаты и повышать уровень конверсии за счет лучшего пользовательского опыта.
![Image Stack — это функция CDN, ее можно использовать прямо в панели управления. Image Stack — это функция CDN, ее можно использовать прямо в панели управления.](https://habrastorage.org/getpro/habr/upload_files/ab9/602/935/ab96029355e43c340fc41af7f22bb68b.png)
Кому подойдет 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
В панели управления перейдите в раздел CDN → CDN-ресурсы.
Откройте страницу CDN-ресурса → вкладка Настройки.
Рекомендуем включить шилдинг источника, чтобы предотвратить перегрузки и атаки на сервер. Этот шаг опциональный, его можно пропустить.
Когда вы включите Image Stack, кеш CDN-ресурса автоматически очистится. Все запросы начнут попадать на источник, что может увеличить время загрузки вашего сайта.
Отметьте чекбокс Image Stack.
Чтобы сжимать изображения, выберите качество — 95%, 80% или 65%, либо выберите Свое значение и введите его.
Чтобы не менять качество изображений формата .png, включите сжатие без потерь для .png.
Чтобы конвертировать формат изображения, включите сжатие .avif или .webp.
Нажмите Сохранить.
Дополнительные настройки можно сделать через URL-параметры на сайте. Подробнее — в документации.
Заключение
Внедрение Image Stack — это важный шаг к созданию быстрых, эффективных и современных веб-ресурсов.
Image Stack помогает улучшить производительность веб-сайтов и приложений. Благодаря автоматическому сжатию, конвертации, обрезке и изменению размера изображений пользователи получают более быстрый доступ к контенту, а владельцы сайтов — улучшенные показатели по SEO и снижение нагрузки на сервер.
Комментарии (11)
zoto_ff
15.08.2024 14:42+1кто это апает? бесполезная статья, полностью состоящая из рекламы банального сервиса
Sazonov
Мне вот интересно, откуда появился этот миф, что пользователи покидают сайт без покупки, если там долго грузится высокодеталезированное изображение товара?
Если я зашел и захотел что-то купить, то я подожду лишних пару секунд, вместо того чтобы включать истеричку при малейших лагах и закрывать страницу.
ganzmavag
Это не миф, тот же Гугл публиковал статистику отказов в зависимости от времени ожидания загрузки страницы. Чем больше время ожидания, тем больше людей не доходит до цели. Пары секунд уже достаточно для мысли "кажется сайт не работает, открою конкурента на соседней вкладке". Это не говорит о том, что так все поступят. Но есть зависимость, подтверждённая статистикой.
Sazonov
Ну не знаю, я думаю не доходили те кто просто тыкал. Поставьте себя на место покупателя - как часто у вас было такое, что вы хотите что-то купить (а через интернет это скорее всего будет не покупка шоколадки), вы прошли все шаги, к примеру, для покупки телефона, и что, вы откажетесь от покупки из-за того что картинка загрузилась не за 1 а за 4 секунды?
Уточню - я не говорю о ситуациях когда сайт глючит, криво сделан или не работает - в таких случаях да, конверсия будет падать. Но явно не из-за того, на что вы делаете акцент. Неработающие и кривые магазы встречаются очень часто. И это явно более серьёзная проблема чем минимальное различие в скорости загрузки.
Idakopas
Вы уже знаете, что конкретно нужно. А я часто лениво гуляю по маркетплейсу — рассматриваю что-то интересное из рекомендаций, и зависание подгрузки меня раздражает — лучше закрою страницу, чем ждать, пока загрузится что-то, не самое нужное мне в данный момент. Но товар мог бы получить покупателя.
И так на каждой странице каждого сайта.
Побуду кэпом: на маркетплейсах ассортимент шире, чем в локальном супермаркете, и цена за коробку шоколадок может быть выгоднее, чем брать поштучно. (Правда, есть одна проблема....воруют из коробок)
ganzmavag
Конверсия в оплату тоже падает, то есть именно часть покупателей отваливается.
Почему уже прошёл и почему именно телефона? А если я ищу что-то недорогое и открыл параллельно несколько вкладок из выдачи? А если это вообще не физический предмет, а покупка какого-то сервиса?
Вы сами спросили про миф, а теперь пытаетесь опровергнуть статистику личным опытом.
Sazonov
Ладно, видимо я слишком старомоден и консервативен и решил что это ненормально, когда человек сёрфит по магазинам.
Можете привести конкретные примеры своих таких рандомных покупок? (Когда брали на маркетплейсах что-то что изначально даже не планировали, но за счёт быстрой загрузки и/или реклама решили взять)
ganzmavag
При чём здесь вообще я? Какой смысл брать частные примеры?
Sazonov
Вы написали про то что я пытаюсь опровергнуть статистику личным опытом, поэтому я спросил про ваш опыт для расширения личного.
opusmode
Да, именно так. Вы забываете некоторые вещи - не все сидят с ноутбука и оптики с гигабитом. Многие работают чере зтелефон, с так себе интернетом. И теперь представьте, что в вашем пути, внезапно, любая фигня занимает больше времени. Это просто парализует работу.
Так что нет, это не миф. Вы как раз пересказываетечастный случай и делаете вид, что разница реально в пару секунд, а не в корявой работе постоянно просто из-за плохой подгрузки. По факту пользоваться таким становится трудно и скорее даже неприятно. И абсолютно понятно, что пользователи, внезапно, начинают недоходить до конца. А продажи маркетплейсов, это не один ваш телефон раз в несколько лет, а большой объём мелочёвки, часто спонтанной. И часто это шмотки. Особенно женские.
Sazonov
Ну да, мне сложновато представить «работу»: хождение по онлайн магазинам с нестабильным интернетом в 2024 году. Специалист на такой «работе» однозначно должен потребовать нормальный интернет для выполнения трудовых обязанностей. (Какое отношение покупки в интернете имею к работе - я, увы, не понял. Как и то, какой должен быть packet loss чтобы картинки массово не грузились)
Но я всё равно считаю что дело в 9/10 случаев в фиговом бэкэнде, а не в способе/формате отдачи картинок. Если бэк педалит, то как ни оптимизируй cdn - веб приложение будет неюзабельным.