Оптимизация изображений, по словам Lighthouse, является одной из наиболее распространенных проблем низкой скорости и производительности веб-сайта.

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

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

Что включает в себя оптимизация изображений?

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

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

Чтобы понять, почему мы считаем эту работу сложной, вот контрольный список из 20 пунктов того, что Cloudimage считает важным для правильной оптимизации изображения:

1. Включить доставку CDN
2. Оптимизировать TTFB
3. Используйте 360-градусный обзор продукта
4. Убедитесь, что ваши изображения адаптивны
5. Правильно изменять размер изображений
6. Используйте правильный формат изображения
7. Сжать изображения
8. Оптимизировать атрибуты alt
9. Подписывайте фотографии четко
10. Позаботьтесь об углах вашего продукта
11. Уметь смешивать цвета
12. Создавайте эмоциональные визуальные эффекты
13. Используйте фон, соответствующий продукту
14. Оптимизируйте миниатюры
15. Использовать карту сайта изображения
16. Применить субдискретизацию цветности
17. Ленивая загрузка некритических изображений
18. Развернуть спрайт изображения
19. Начать кеширование изображений
20. Предварительно загрузите важные изображения

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

Если у вас есть, скажем, 11 000 изображений на вашем сайте.

Сколько времени потребуется, чтобы закончить их оптимизацию?

Теперь представьте, что вы можете сделать это автоматически!

Это то, что делает Cloudimage.

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

После этого идет оптимизация.

Изменение размера изображения

Серверы изменения размера Cloudimage, расположенные в трех центрах обработки данных по всему миру (Канада, Франция и Сингапур), будут загружать ваше исходное изображение из origin_image_url, преобразовывать его на основе параметров операции и фильтрации и, наконец, отображать его на вашем веб-сайте или в мобильном приложении через ракету. -быстрый CDN.

Пример с исходным изображением, размещенным на вашем веб-сервере, в корзине Amazon S3 или любом другом хранилище, доступном через HTTP.

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

Обрезать

Сохраняет пропорции изображения, обрезая изображение по заданной ширине и высоте.

Соответствовать

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

Граница

Пытается изменить размер изображения с сохранением пропорций. Похож на fit, но без набивки.

Покрытие

Изменяет размер изображения до заданной ширины и высоты, игнорируя исходные пропорции изображения.

Повернуть

Поворачивает изображение на указанный угол против часовой стрелки

Подрезать

Удаляет одноцветную рамку вокруг изображения.

Сжатие изображения

Вы можете изменить сжатие (выходной формат и качество) вашего изображения с помощью фильтров сжатия.

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

По умолчанию Cloudimage предоставляет изображения в формате WebP. Если формат не поддерживается клиентским браузером, он возвращается к JPEG или PNG.

Optipress — сжатие изображений на основе машинного обучения

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

Разные изображения, сжатые с одинаковыми параметрами сжатия, могут иметь разное воспринимаемое качество.

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

Чтобы преодолеть это, мы разработали алгоритм сжатия JPEG Optipress.

Optipress определяет лучший подход к сжатию JPG, анализируя особенности изображения и текущие параметры сжатия.

Модель машинного обучения определяет наилучшую стратегию сжатия для этого изображения.

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

Пресеты трансформации

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

р=Х

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

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

Адаптивные изображения — это просто

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

Команда Cloudimage разработала плагин JS, чтобы автоматизировать все для вас.

Библиотека Cloudimage JS автоматически адаптирует все ваши URL-адреса и предлагает встроенный адаптивный дизайн, отложенную загрузку и многие другие функции, которые сделают ваш сайт отзывчивым, быстрым и добавят приятные эффекты загрузки к вашим изображениям.

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

Сеть доставки контента

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

В дополнение к ускорению ваших образов, CDN обеспечивает защиту от DDoS (распределенный отказ в обслуживании), которая будет действовать как щит для ваших серверов и позволит избежать простоев.

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

Реализовано за считанные минуты

Что делает Cloudimage очень уникальным, так это то, что его услуги могут быть реализованы очень быстро.

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

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

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

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