Оптимизируйте изображения с помощью Thumbor

Thumbor можно бесплатно использовать для изменения размера, сжатия и преобразования изображений по требованию.

Кэти Хемпениус
Katie Hempenius
X

Thumbor — это бесплатная CDN изображений с открытым исходным кодом, которая позволяет легко сжимать, изменять размер и преобразовывать изображения. Этот пост позволит вам опробовать Thumbor своими глазами, без необходимости ничего устанавливать. Мы создали для вас тестовую среду Thumbor по адресу http://34.67.235.246:8888 . Изображение, с которым вы собираетесь поэкспериментировать, доступно по адресу http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg .

Предварительные требования

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

Формат URL-адреса миниатюры

Как упоминалось в разделе «Использование CDN изображений для оптимизации изображений» , каждая CDN изображений использует немного другой формат URL-адресов для изображений. На рисунке 1 представлен формат Thumbor.

URL-адрес Thumbor состоит из следующих компонентов: источник, ключ безопасности, размер, фильтры и изображение.
Формат URL-адреса Thumbor

Источник

Как и все источники , источник URL-адреса Thumbor состоит из трех частей: схемы (почти всегда http или https ), хоста и порта. В этом примере хост идентифицируется по IP-адресу, но если вы используете DNS-сервер, он может выглядеть так: thumbor-server.my-site.com . По умолчанию Thumbor использует порт 8888 для передачи изображений.

Ключ безопасности

unsafe часть URL-адреса указывает на то, что вы используете Thumbor без ключа безопасности. Ключ безопасности не позволяет пользователю вносить несанкционированные изменения в URL-адреса ваших изображений. Изменив URL-адрес изображения, пользователь может использовать ваш сервер (и ваш счет за хостинг) для изменения размера своих изображений или, что более злонамеренно, для перегрузки вашего сервера. В этом руководстве не рассматривается настройка функции ключа безопасности Thumbor .

Размер

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

Попробуй это сейчас:

  1. Щелкните следующий URL-адрес, чтобы просмотреть изображение в исходном размере на новой вкладке: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    Изображение в исходном размере
    Исходное изображение

  2. Измените размер изображения до 100x100 пикселей: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg.

Изображение размером 100x100 пикселей
Размер изображения изменен до 100x100 пикселей.

Фильтры

Фильтры преображают изображение. Часть сегмента URL-адреса, посвященная фильтрам, начинается с filters: за ними следует список фильтров, разделенных двоеточиями; это можно пропустить, если вы не используете какие-либо фильтры. Синтаксис отдельных фильтров напоминает вызов функции (например grayscale() ), содержащий ноль или более аргументов.

Попробуй это сейчас:

  1. Примените один фильтр: эффект размытия по Гауссу с радиусом 25 пикселей: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    Размытое изображение
    Размытое изображение

  2. Применить несколько фильтров. Преобразуйте в оттенки серого и поверните изображение на 90 градусов: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Изображение в оттенках серого, повернутое на 90 градусов.
Оттенки серого, повернутое изображение

Преобразование изображений

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

Сжатие

Фильтр качества сжимает изображения JPEG до желаемого уровня качества изображения (1–100). Если уровень качества не указан, Thumbor сжимает изображение до уровня качества 80. Это хорошее значение по умолчанию: уровни качества 80–85 обычно мало влияют на качество изображения, но обычно уменьшают размер изображения на 30–40%.

Попробуй это сейчас:

  1. Сжать изображение до качества 1 (очень плохое): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    Изображение низкого качества
    Изображение низкого качества

  2. Сжимайте изображение, используя настройки сжатия Thumbor по умолчанию: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Сжатое изображение без заметных проблем с качеством.
Сжатое изображение

Изменение размера

Чтобы изменить размер изображения, сохранив его исходные пропорции, используйте формат $WIDTHx0 или 0x$HEIGHT в части size строки URL.

Попробуй это сейчас:

  1. Измените размер изображения до ширины 200 пикселей, сохранив исходные пропорции: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    Изображение шириной 200 пикселей.
    Размер изображения изменен до ширины 200 пикселей.

  2. Измените размер изображения до высоты 500 пикселей, сохранив исходные пропорции: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Изображение высотой 500 пикселей.
Размер изображения изменен до высоты 500 пикселей.

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

Попробуй это сейчас:

  1. Измените размер изображения до 50 % от исходного: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg.

    Изображение размером 50 % от размера оригинала.
    Размер изображения изменен до 50 % от размера оригинала.

  2. Измените размер изображения до ширины 1000 пикселей, затем измените размер изображения до 10 % от его текущего размера: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web. dev/backdrop-filter/hero.jpg

Изображение шириной 100 пикселей.
Размер изображения изменен до ширины 100 пикселей.

Эти методы — лишь некоторые из множества возможностей обрезки и изменения размера Thumbor. Чтобы узнать о других вариантах, ознакомьтесь с Использованием .

Форматы файлов

Фильтр формата преобразует изображения в jpeg , webp , gif или png . Имейте в виду, что если вы оптимизируете производительность, вам следует использовать JPEG или WebP, поскольку файлы PNG и GIF, как правило, значительно больше и не сжимаются.

Попробуй это сейчас:

  1. Конвертируйте изображение в WebP. Если вы откроете панель «Сеть » DevTools , заголовок ответа Content-Type документа покажет, что сервер вернул изображение WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev /backdrop-filter/hero.jpg
Скриншот DevTools, показывающий тип контента (WebP) изображения.
Заголовок ответа content-type показанный в DevTools

Следующие шаги

Попробуйте другие фильтры и преобразования изображения hero.jpg .

Если вы используете собственную установку Thumbor, ознакомьтесь с приложением ниже, в котором объясняется, как и зачем использовать файл thumbor.conf .

Приложение: thumbor.conf

Многие параметры конфигурации, обсуждаемые в этом посте, а также многие другие, можно установить по умолчанию, настроив и используя файл конфигурации thumbor.conf . Настройки в файле thumbor.conf будут применяться ко всем изображениям, если они не переопределены параметрами строки URL-адреса.

  1. Запустите команду thumbor-config , чтобы создать новый файл thumbor.conf .

    thumbor-config > ./thumbor.conf

  2. Откройте новый файл thumbor.conf . Команда thumbor-config создала файл, в котором перечислены и описаны все параметры конфигурации Thumbor.

  3. Настройте параметры, раскомментировав строки и изменив значения по умолчанию. Возможно, вам будет полезно установить следующие настройки:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH и MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. Запустите Thumbor с флагом --conf , чтобы использовать настройки thumbor.conf .

    thumbor --conf /path/to/thumbor.conf