Quick Review: оптимизация изображений WordPress в реальном времени

Знаете ли вы, что в среднем изображения составляют около половины размера файла средней веб-страницы?

Это означает, что если вы используете неоптимизированные изображения, эти изображения могут иметь огромное негативное влияние на время загрузки вашего сайта.

Quicq — это сервис от Afosto, который позволяет вам полностью оптимизировать изображения вашего сайта в режиме реального времени и обслуживать их из сети доставки контента (CDN) на основе Google Cloud. Помимо производительности, вы также можете использовать его для простого управления изображениями, например, для их обрезки, добавления водяных знаков и многого другого.

Он работает с WordPress через специальный плагин для интеграции, а также с другими платформами, такими как Magento и PrestaShop.

В нашем практическом обзоре Quicq мы покажем вам, как работает Quicq и как вы можете использовать его для оптимизации изображений вашего сайта WordPress.

Давайте копать…

Краткий обзор: что делает плагин

На высоком уровне Quicq предлагает комплексное решение для оптимизации изображений WordPress. По сути, это инструмент plug-and-play, который позволяет вам воспользоваться всеми важными тактиками оптимизации изображений — подробнее о них ниже.

Есть две «основные» тактики, о которых думает большинство людей, когда дело доходит до оптимизации изображений:

• Изменение размера — изменение размера изображения в соответствии с тем, как вы собираетесь использовать его на своем сайте. Меньшие размеры означают меньше данных, что означает меньший размер изображения.
• Сжатие — использование алгоритма сжатия для уменьшения размера файла изображения без изменения его размеров либо с помощью алгоритма без потерь ( без изменения качества ), либо с помощью алгоритма с потерями ( возможно, небольшое снижение качества ).

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

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

Как только вы активируете Quicq на своем сайте, он автоматически оптимизирует все ваши изображения со следующими оптимизациями:

1. Обслуживайте их через CDN Quicq, который работает на Google Cloud. Это позволяет посетителям загружать ваши изображения из ближайшей к ним сети CDN.
2. Измените их размер до оптимального размера в зависимости от устройства каждого посетителя.
3. Сжимайте их, чтобы уменьшить размер файла.
4. Преобразуйте их в оптимизированный формат изображения, который предлагает меньшие размеры, чем JPEG и PNG. Quicq поддерживает как WebP, так и AVIF, новый формат изображений, который может предлагать файлы даже меньшего размера, чем WebP. Поддержка AVIF примечательна тем, что еще не все сервисы поддерживают этот новый формат изображения.

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

Зачем использовать динамическую оптимизацию изображения в реальном времени?

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

То есть вместо того, чтобы оптимизировать исходную версию изображения на сервере вашего сайта WordPress, как традиционный плагин оптимизации, Quicq не затрагивает исходное изображение, а вместо этого выполняет свои операции в «облаке».

Этот подход динамической оптимизации имеет несколько преимуществ.

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

Например, если посетитель просматривает страницу на экране смартфона с низким разрешением, вы можете показать изображение небольшого размера, не влияя на его впечатление.

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

Поскольку Quicq использует динамический подход к оптимизации «на лету», он может предоставлять изображения оптимального размера и формата для каждого отдельного пользователя.

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

Например, просто манипулируя URL-адресом изображения, вы можете выполнять следующие манипуляции:

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

С Quickq все, что вам нужно сделать, это загрузить исходное изображение один раз. Затем вы можете выполнить все эти манипуляции, добавив некоторые дополнительные параметры запроса к URL-адресу.

Например, вот ссылка на исходное изображение:

https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg

А вот ссылка, которая обрезает изображение до квадрата 1000×1000:

https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg?w=1000&h=1000&c=1

В следующем разделе я покажу вам несколько реальных примеров.

Практическое занятие с Quicq: как оптимизировать изображения WordPress

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

Опять же, он не ограничивается WordPress, но предлагает специальный плагин WordPress, который упрощает его использование с вашим сайтом WordPress.

1. Зарегистрируйте бесплатную учетную запись Quickq

Для начала вам необходимо зарегистрировать бесплатную учетную запись Quicq/Afosto. Далее я расскажу о ценах, но есть щедрый навсегда бесплатный план, и вы также получаете 14-дневную неограниченную бесплатную пробную версию (без необходимости кредитной карты).

Зарегистрировав свою учетную запись, нажмите кнопку « Начать бесплатную пробную версию » рядом с Quickicq на панели инструментов Afosto:

2. Создайте CDN Quickq

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

После запуска пробной версии Quicq задача для этого должна автоматически появиться в списке задач на главной панели управления Afosto. Если вы его не видите, вы также можете получить доступ к этому интерфейсу, щелкнув значок шестеренки рядом с Quickicq:

Во-первых, вам нужно будет ввести URL-адрес, который вы хотите использовать для своего CDN Quicq. Ваши изображения будут загружаться с этого URL-адреса, поэтому вам нужно связать их с вашим веб-сайтом.

Например, если бы я создавал его для WP Mayor, я бы сделал URL-адрес wpmayor .

Затем введите прямой URL-адрес существующего изображения на вашем сайте и нажмите Проверить веб-сайт:

Затем Quicq должен автоматически определить, что вы используете WordPress, и сгенерировать путь к вашим изображениям, который должен быть папкой загрузки внутри папки wp-content .

У вас также есть возможность расширить дополнительные настройки , которые позволяют вам контролировать поведение кэша для ваших изображений. По умолчанию 365 дней, что должно быть хорошо. Но вы можете изменить это при желании.

Чтобы закончить, нажмите кнопку « Добавить »:

3. Установите плагин Quicq и добавьте URL-ключ.

После того, как вы создали свою учетную запись и настроили CDN, вы можете установить на свой сайт бесплатный плагин Quicq с WordPress.org. Это позволит вам интегрировать ваш сайт WordPress с CDN изображений, который вы только что создали.

После того, как вы активировали плагин, перейдите в новую область Quicq на панели инструментов WordPress и добавьте ключ URL, который вы ввели в процессе установки. То есть часть URL-адреса CDN, которую вы смогли настроить.

В моем примере это wpmayor .

Затем выберите переключатель Active Quicq , а затем Сохранить изменения , чтобы активировать его:

И это все! Теперь ваш сайт WordPress должен начать загружать свои изображения через CDN Quicq, который включает оптимизацию изображений в реальном времени.

Одна небольшая вещь, которую я хотел бы отметить здесь, это то, что я не думаю, что область плагина Quicq должна быть областью меню верхнего уровня в панели управления WordPress. Поскольку это всего лишь одноразовый процесс настройки, я думаю, было бы лучше переместить его в подменю, такое как «Настройки» → «Quicq» , чтобы помочь пользователям иметь более чистую административную область.

4. Манипулируйте изображениями с параметрами URL (при необходимости)

Для большинства сайтов WordPress вам не нужно ничего делать, чтобы оптимизировать изображения. На данный момент Quicq уже автоматически выполняет следующие оптимизации:

• Сжатие/изменение размера изображений оптимальным образом в зависимости от устройства каждого пользователя.
• Преобразование изображений в формат WebP или AVIF в зависимости от того, что лучше работает.
• Обслуживание изображений через Google Cloud CDN компании Quicq.

Однако, как я упоминал ранее, одна из замечательных особенностей подхода Quicq к работе в реальном времени заключается в том, что вы также можете манипулировать своими изображениями, просто добавляя некоторые параметры запроса к URL-адресу.

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

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

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

Благодаря обработке изображений в реальном времени в Quicq вы можете выполнить обрезку, просто добавив параметр URL ( и не затрагивая исходное изображение ).

Вот исходное изображение и URL:

А вот как выглядит изображение, обрезанное до квадрата 1000×1000 пикселей с помощью этого параметра URL — ?w=1000&h=1000&c=1 :

Вот еще пример…

Допустим, вы хотите сделать еще один шаг и размыть изображение в дополнение к его обрезке в квадрат.

Все, что вам нужно сделать, это добавить параметр размытия и установить степень размытия, которую вы хотите использовать (от 0 до 3), и ваше изображение будет размыто:

Быстрое ценообразование

У Quicq есть довольно щедрый навсегда бесплатный план, а затем платные планы для пользователей, которым нужно больше функций.

Бесплатный тарифный план позволяет оптимизировать до 100 000 изображений в месяц* и навсегда обслуживать пропускную способность CDN в размере 25 ГБ в месяц , что должно быть более чем достаточно для небольшого сайта. Например, если у вас есть базовый сайт с брошюрами/портфолио или небольшой блог, я не думаю, что вы когда-нибудь превзойдете его.

*Помните, оптимизация изображения происходит динамически, а не один раз, как в традиционном плагине, поэтому изображение считается одной оптимизацией при каждой загрузке.

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

• Оптимизации — количество оптимизаций изображения в месяц.
• Передача данных — пропускная способность, которую потребляют ваши изображения при обслуживании через CDN.

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

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

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

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

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

Если вам нужны премиальные планы, вы можете получить скидку 20% на первые два месяца на все пакеты с нашим эксклюзивным кодом купона:

СКИДКА В 20

Быстрый

Получите скидку 20% на первые два месяца на все пакеты QuicqShow More

Получите скидку 20% на первые два месяца на все пакеты Quicq Show Less

WPMAYOR20

Получить эту сделку

Заключительные мысли о Quick

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

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

Quicq — не первый плагин, который привнес это в WordPress, но у него есть несколько особенностей:

1. У него очень щедрый бесплатный уровень. У него самый высокий бесплатный уровень, который я видел.
2. Мне нравится его модель ценообразования для премиальных опций, потому что вы платите только за фактическое использование. Хотя это немного усложняет ценообразование, я думаю, что это более «справедливый» способ выставления счетов. Кроме того, вы всегда можете использовать 14-дневную неограниченную пробную версию, чтобы выяснить фактическое использование вашего сайта, если вы не уверены, сколько будете платить.
3. Он по-прежнему позволяет выполнять другие манипуляции с изображениями, такие как обрезка, размытие и т. д. Большинство других плагинов WordPress, о которых я знаю, ориентированы только на производительность или дают вам доступ только к водяным знакам, так что здорово, что Quicq идет дальше этого. Большинство случайных пользователей, вероятно, не будут их использовать, но это хорошо для опытных пользователей и разработчиков.

Если вы хотите попробовать, у Quicq есть щедрый навсегда бесплатный план, а также 14-дневная неограниченная бесплатная пробная версия, чтобы помочь вам понять, как вы используете. Вы можете нажать на кнопки ниже, чтобы начать: