One place for hosting & domains

      WebP

      Создание и вывод изображений WebP для ускорения себ-сайта


      Автор выбрал фонд Apache Software Foundation для получения пожертвования в рамках программы Write for DOnations.

      Введение

      WebP — открытый формат изображений, разработанный компанией Google в 2010 году на основе видеоформата VP8. С тех пор количество веб-сайтов и мобильных приложений с использованием формата WebP значительно выросло. Как Google Chrome, так и Opera поддерживают оригинальный формат WebP, и поскольку на эти браузеры приходится около 74% всего веб-трафика, пользователи могут получать доступ к веб-сайтам быстрее, если на них используются изображения WebP. Также имеются планы внедрения WebP в Firefox.

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

      В этом обучающем руководстве вы будете использовать инструмент командной строки cwebp для преобразования изображений в формат WebP, создавая скрипты, которые будут наблюдать за изображениями и преобразовывать их в конкретной директории. Затем вы изучите два способа показывать изображения WebP своим посетителям.

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

      Работа с изображениями WebP не требует конкретного дистрибутива, но мы продемонстрируем, как работать с соответствующим программным обеспечением на Ubuntu 16.04 и CentOS 7. Для прохождения данного обучающего руководства вам потребуется следующее:

      • Сервер, созданный пользователем sudo без прав root. Для настройки сервера Ubuntu 16.04 следуйте нашему руководству по начальной настройке сервера Ubuntu 16.04. Если вы хотите использовать CentOS, то можете настроить сервер CentOS 7 при помощи нашего «Обучающего руководства по начальной настройке сервера CentOS 7».

      • Apache, установленный на сервере. Если вы используете Ubuntu, то можете следовать первому шагу руководства «Установка стека Linux, Apache, MySQL, PHP (LAMP) на Ubuntu 16.04». Если вы используете CentOS, следуйте первому шагу «Установка стека Linux, Apache, MySQL, PHP (LAMP) на CentOS 7». Обязательно измените настройки брандмауэра для разрешения трафика HTTP и HTTPS.

      • mod_rewrite, установленный на сервере. Если вы используете Ubuntu, то можете следовать нашему руководству «Как переписывать URL-адреса при помощи mod_rewrite для Apache на Ubuntu 16.04». По умолчанию mod_rewrite установлен и активирован на CentOS 7.

      Шаг 1 — Установка cwebp и подготовка директории изображений

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

      На Ubuntu 16.04 можно установить cwebp (это утилита, которая позволяет сжимать изображения в формат .webp),“ введя следующее:

      • sudo apt-get update
      • sudo apt-get install webp

      В CentOS 7 введите:

      • sudo yum install libwebp-tools

      Для создания новой директории изображений, которая называется webp, в корневой директории Apache (находится по умолчанию в /var/www/html), введите:

      • sudo mkdir /var/www/html/webp

      Дайте права на данную директорию вашему пользователю sammy без прав root:

      • sudo chown sammy: /var/www/html/webp

      Для тестирования команд можно скачать бесплатные изображения JPEG и PNG, используя wget. Этот инструмент установлен по умолчанию в Ubuntu 16.04; если вы используете CentOS 7, можно установить его, введя следующее:

      Затем загрузите тестовые изображения, используя следующие команды:

      • wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
      • wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
      • wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

      Примечание. Эти изображения доступны для использования и распространения по лицензиям Creative Commons Attribution-ShareAlike и Public Domain Dedication.

      Основная часть вашей работы на следующем шаге будет находиться в директории /var/www/html/webp, в которую можно перейти, введя:

      С имеющимися тестовыми изображениями, при помощи веб-сервера Apache, модуля mod_rewrite и утилиты cwebp вы готовы начинать преобразование изображений.

      Шаг 2 — Сжатие файлов изображений с помощью cwebp

      Показ изображений .webp посетителям сайта требует версий .webp файлов изображений. На этом шаге вы преобразуете изображения JPEG и PNG в формат .webp, используя cwebp. Общий синтаксис команды выглядит следующим образом:

      • cwebp image.jpg -o image.webp

      Параметр -o указывает путь к файлу WebP.

      Поскольку вы все еще находитесь в директории /var/www/html/webp, можно запустить следующую команду для преобразования изображений image1.jpg в image1.webp и image2.jpg​​​ в ​​​image2.webp​​​​:

      • cwebp -q 100 image1.jpg -o image1.webp
      • cwebp -q 100 image2.jpg -o image2.webp

      Если установить параметр качества -q равным 100, сохраняется 100% качества изображения; если он не указан, значение по умолчанию составляет 75.

      Затем проверьте размер изображений JPEG и WebP, используя команду ls. Параметр -l показывает длинный формат списка, который включает размер файла, а параметр -h обеспечивает, что ls выводит на печать изображения читаемых размеров:

      • ls -lh image1.jpg image1.webp image2.jpg image2.webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

      Данные, выводимые командой ls, показывают, что размер image1.jpg составляет 7,4 Mбайт, а размер image1.webp — 3,9 Mбайт. То же самое относится к изображениям image2.jpg​​​​​​ (16 Mбайт) и image2.webp (7 Mбайт). Эти файлы почти в два раза меньше первоначального размера!

      Для сохранения полных исходных данных этих изображений при сжатии можно использовать параметр -lossless вместо параметра -q. Это наилучший вариант сохранения качества изображений PNG. Для преобразования загруженного изображения PNG из шага 1 введите:

      • cwebp -lossless logo.png -o https://www.digitalocean.com/logo.webp

      Следующая команда показывает, что размер изображения WebP без потерь (60 Кбайт) примерно в два раза меньше размера первоначального изображения PNG (116 Кбайт):

      • ls -lh logo.png https://www.digitalocean.com/logo.webp

      Output

      -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      Преобразованные изображения WebP в директории /var/www/html/webp на 50% меньше исходных JPEG и PNG. На практике степени сжатия могут отличаться в зависимости от определенных факторов: уровень сжатия исходного изображения, формат файла, тип преобразования (с потерями или без потерь), процент качества и операционная система. При преобразовании большего числа изображений можно видеть изменения коэффициентов преобразования, связанные с этими факторами.

      Шаг 3 — Преобразование изображений JPEG и PNG в директории

      Написание скрипта упрощает процесс преобразования, т.к. устраняет ручное преобразование. Теперь напишем скрипт преобразования, который находит файлы JPEG и преобразовывает их в формат WebP с 90% качеством, а также преобразовывает файлы PNG в изображения WebP без потерь.

      Используя nano или предпочитаемый вами редактор, создайте скрипт webp-convert.sh в домашней директории вашего пользователя:

      Первая строка скрипта будет выглядеть следующим образом:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" )
      

      Эта строка включает следующие компоненты:

      • find: Эта команда будет искать файлы в конкретной директории.
      • $1: этот позиционный параметр указывает путь к директории изображений, взятый из командной строки. В конечном счете, он делает местоположение директории менее зависимым от местоположения скрипта.
      • -type f: данный параметр указывает команде find искать только обычные файлы.
      • -iname: данный тест соспоставляет имена файлов по заданной схеме. Нечувствительный к регистру тест -iname указывает команде find искать любое имя файла, заканчивающееся на .jpg (*.jpg) или .jpeg (*.jpeg).
      • -o: этот логический оператор указывает команде find вывести файлы, соответствующие первому тесту -iname (-iname "*.jpg") *или *второму (iname "*.jpeg").
      • (): скобки вокруг этих тестов, вместе с оператором -and, обеспечивают, что первый тест (т.е. -type f) всегда выполняется.

      Вторая строка скрипта будет преобразовывать изображения в формат WebP, используя параметр -exec. Общий синтаксис этого параметра — -exec command {} ;​​. Строка {} заменяется каждым файлом, который обрабатывает команда, а символ ; указывает команде find, где заканчивается команда:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c 'commands' {} ;
      

      В данном случае для параметра -exec потребуется несколько команд для поиска и преобразования изображений:

      • bash: эта команда будет выполнять небольшой скрипт, создающий версию .webp файла, если она отсутствует. Этот скрипт будет передаваться в bash как строка благодаря опции -c.
      • 'commands': этот заполнитель — скрипт, который будет создавать версии .webp ваших файлов.

      Скрипт в 'commands' будет выполнять следующие функции:

      • Создавать переменную webp_path.
      • Проверять наличие версии .webp файла.
      • Создавать файл, если он отсутствует.

      Малый скрипт выглядит следующим образом:

      ~/webp-convert.sh

      ...
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;
      

      Элементы этого малого скрипта включают в себя следующее:

      • webp_path: эта переменная будет создана с помощью sed и соответствующего имени файла из команды bash, обозначенного по позиционному параметру $0. here string (<<<) будет передавать это имя в sed.
      • if [ ! -f "$webp_path" ]: данный тест будет определять наличие файла под названием "$webp_path", используя логический оператор not (!).
      • cwebp: эта команда будет создавать файл, если он отсутствует, используя параметр -q, чтобы не выводить результат.

      С этим малым скриптом вместо заполнителя 'commands', полный скрипт преобразования изображений JPEG теперь будет выглядеть следующим образом:

      ~/webp-convert.sh

      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      

      Для преобразования изображений PNG в WebP мы будем использовать тот же подход, с двумя отличиями: Во-первых, шаблон -iname в команде find будет "*.png". Во-вторых, команда преобразования будет использовать параметр -lossless вместо параметра качества -q.

      Завершенный скрипт выглядит следующим образом:

      ~/webp-convert.sh

      #!/bin/bash
      
      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      
      # converting PNG images
      find $1 -type f -and -iname "*.png" 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -lossless "$0" -o "$webp_path";
      fi;' {} ;
      

      Сохраните файл и выйдите из редактора.

      Затем проверим скрипт webp-convert.sh на практике, используя файлы в директории /var/www/html/webp. Убедитесь, что файл скрипта является исполняемым, запустив следующую команду:

      • chmod a+x ~/webp-convert.sh

      Запустите скрипт в директории изображений:

      • ./webp-convert.sh /var/www/html/webp

      Ничего не произошло! Это потому, что мы уже преобразовали эти изображения на шаге 2. Далее скрипт webp-convert будет преобразовывать изображения при добавлении нами новых файлов или удалении версий .webp. Чтобы увидеть, как это работает, удалите файлы .webp, созданные нами на шаге 2:

      • rm /var/www/html/webp/*.webp

      Удалив все изображения .webp, снова выполните скрипт, чтобы убедиться, что он работает:

      • ./webp-convert.sh /var/www/html/webp

      Команда ls подтвердит, что скрипт успешно преобразовал изображения:

      • ls -lh /var/www/html/webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

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

      Шаг 4 — Просмотр файлов изображений в директории

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

      Создание скрипта, который следит за нашей директорией изображений, может решить некоторые проблемы со скриптом webp-convert.sh в ходе его написания. Например, данный скрипт не будет идентифицировать, переименовали ли мы изображение. Предположим, у нас есть изображение foo.jpg, мы выполняем webp-convert.sh, переименовываем этот файл в bar.jpg, а затем снова выполняем webp-convert.sh — теперь у нас есть идентичные файлы .webp (foo.webp и bar.webp). Для решения этой проблемы, и чтобы не выполнять скрипт вручную, добавим watchers в другой скрипт. Наблюдатели (watchers) наблюдают за конкретными файлами или директориями и запускают команды в ответ на эти изменения.

      Команда inotifywait будет настраивать наблюдатели (watchers) в нашем скрипте. Эта команда является частью inotify-tools — пакета инструментов командной строки, который обеспечивает простой интерфейс подсистемы ядра inotify. Чтобы установить его на Ubuntu 16.04, введите:

      • sudo apt-get install inotify-tools

      В CentOS 7 пакет ​​​inotify-tools доступен в хранилище EPEL. Установите хранилище EPEL и пакет ​​​inotify-tools, используя следующие команды:

      • sudo yum install epel-release
      • sudo yum install inotify-tools

      Далее создайте скрипт webp-watchers.sh в домашней директории вашего пользователя с помощью nano:

      Первая строка скрипта будет выглядеть следующим образом:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1
      

      Эта строка включает следующие элементы:

      • inotifywait: эта команда следит за изменениями в определенной директории.
      • -q: данный параметр будет указывать команде inotifywait ограничивать свою активность и не генерировать много результатов.
      • -m: данный параметр будет указывать команде inotifywait работать без ограничения времени и не совершать выход после получения одного события.
      • -r: данный параметр будет настраивать наблюдатели рекурсивно, наблюдая за заданной директорией и всеми ее поддиректориями.
      • --format: данный параметр указывает команде inotifywait следить за изменениями с помощью имени события и следующего за ним пути файла. События, за которыми мы хотим наблюдать: close_write (инициируется, когда файл создается и полностью записывается на диск), moved_from и moved_to (инициируется, когда файл перемещается) и delete (инициируется, когда файл удаляется).
      • $1: этот параметр позиционирования хранит путь измененных файлов.

      Далее добавим команду grep, чтобы установить, являются ли наши файлы изображениями JPEG или PNG. Параметр -i будет указывать команде grep игнорировать регистр, -E будет указывать, что grep должна использовать расширенные регулярные выражения, а --line-buffered будет указывать grep передавать совпавшие строки в цикл while:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '.(jpe?g|png)$' --line-buffered
      

      Далее создадим цикл while с командой read. read будет обрабатывать событие, которое обнаружила команда inotifywait, и присваивать его переменной $operation, а путь обработанного файла — переменной $path:

      ~/webp-watchers.sh

      ...
      | while read operation path; do
        # commands
      done;
      

      Объединим этот цикл с остальным скриптом:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        # commands
      done;
      

      После того, как цикл while проверил событие, команды внутри цикла будут совершать следующие действия, в зависимости от результата:

      • Создайте новый файл WebP, если новый файл ​​изображения был создан или перенесен в целевую директорию.
      • Удалите файл WebP, если соответствующий файл изображения был удален или перенесен из целевой директории.​​

      Внутри цикла есть три основных раздела. Переменная webp_path будет хранить путь к версии .webp рассматриваемого изображения:

      ~/webp-watchers.sh

      ...
      webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
      

      Далее скрипт проверит, какое событие произошло:

      ~/webp-watchers.sh

      ...
      if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
        # commands to be executed if the file is moved or deleted
      elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
        # commands to be executed if a new file is created
      fi;
      

      Если файл был перенесен или удален, скрипт будет проверять наличие версии .webp. Если она существует, скрипт будет удалять ее с помощью rm:

      ~/webp-watchers.sh

      ...
      if [ -f "$webp_path" ]; then
        $(rm -f "$webp_path");
      fi;
      

      Для вновь созданных файлов сжатие будет осуществляться следующим образом:

      • Если соответствующий файл будет изображением PNG, скрипт будет использовать сжатие без потерь.
      • В противном случае скрипт будет использовать сжатие с потерями с помощью параметра -quality.

      Добавим команды cwebp, которые будут выполнять эти действия, в скрипт:

      ~/webp-watchers.sh

      ...
      if [ $(grep -i '.png$' <<< "$path") ]; then
        $(cwebp -quiet -lossless "$path" -o "$webp_path");
      else
        $(cwebp -quiet -q 90 "$path" -o "$webp_path");
      fi;
      

      Целиком файл webp-watchers.sh будет выглядеть следующим образом:

      ~/webp-watchers.sh

      #!/bin/bash
      echo "Setting up watches.";
      
      # watch for any created, moved, or deleted image files
      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
        if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
          if [ -f "$webp_path" ]; then
            $(rm -f "$webp_path");
          fi;
        elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
           if [ $(grep -i '.png$' <<< "$path") ]; then
             $(cwebp -quiet -lossless "$path" -o "$webp_path");
           else
             $(cwebp -quiet -q 90 "$path" -o "$webp_path");
           fi;
        fi;
      done;
      

      Сохраните и закройте файл. Не забудьте сделать его исполняемым:

      • chmod a+x ~/webp-watchers.sh

      Выполним этот скрипт в директории /var/www/html/webp в фоновом режиме, используя &. Также перенаправим стандартный результат и стандартную ошибку в ~/output.log, чтобы хранить результат в легкодоступном месте:

      • ./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

      На данный момент вы преобразовали файлы JPEG и PNG в директории /var/www/html/webp в формат WebP, а также настроили наблюдатели для выполнения этих действий с помощью скрипта webp-watchers.sh. Теперь пора изучить варианты показа изображений WebP посетителям вашего веб-сайта.

      Шаг 5 — Показ изображений WebP посетителям сайта с помощью элементов HTML

      На этом шаге мы расскажем, как показывать изображения WebP с элементами HTML. На данный момент в директории /var/www/html/webp должны быть версии .webp каждого тестового изображения JPEG и PNG . Теперь мы можем показывать их в поддерживаемых браузерах с помощью элементов HTML5 (<picture>) или модуля mod_rewrite Apache. На этом шаге мы используем элементы HTML.

      Элемент <picture> позволяет включить изображения напрямую в веб-страницы и задать несколько источников изображений. Если браузер поддерживает формат WebP, он будет загружать версию файла .webp вместо оригинального, что приведет к более быстрой загрузке веб-страниц. Следует отметить, что элемент <picture> широко поддерживается в современных браузерах, поддерживающих формат WebP.

      Элемент <picture> представляет собой контейнер с элементами <source> и <img>, указывающими на конкретные файлы. Если мы используем элемент <source> для указания на изображение .webp, браузер сможет его обработать. В противном случае браузер будет использовать файл изображения, заданный с помощью атрибута src в элементе <img>.

      Мы будем использовать файл logo.png из директории /var/www/html/webp, который мы преобразовали в https://www.digitalocean.com/logo.webp, например с помощью элемента <source>. Мы можем использовать следующий код HTML для показа https://www.digitalocean.com/logo.webp в любом браузере, поддерживающем формат WebP, и logo.png в любом браузере, не поддерживающем WebP или элемент <picture>.

      Создайте файл HTML в /var/www/html/webp/picture.html:

      • nano /var/www/html/webp/picture.html

      Добавьте в веб-страницу следующий код для показа https://www.digitalocean.com/logo.webp в поддерживающих браузерах с помощью элемента <picture>:

      /var/www/html/webp/picture.html

      <picture>
        <source  type="image/webp">
        <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      </picture>
      

      Сохраните и закройте файл.

      Чтобы убедиться, что все работает, перейдите в каталог http://your_server_ip/webp/picture.html. Вы должны увидеть тестовое изображение PNG.

      Теперь, когда вы знаете, как показывать изображения .webp напрямую из кода HTML, давайте посмотрим, как автоматизировать этот процесс с помощью модуля mod_rewrite Apache.

      Шаг 6 — Показ изображений WebP с помощью mod_rewrite

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

      Во-первых, создайте файл .htaccess в директории /var/www/html/webp с помощью следующей команды:

      • nano /var/www/html/webp/.htaccess

      Директива ifModule проверит, доступен ли if mod_rewrite; если доступен, то он может быть активирован при помощи RewriteEngine On. Добавьте эти директивы в .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On
        # further directives
      </IfModule>
      

      Веб-сервер сделает несколько проверок, чтобы установить, когда показывать изображения .webp пользователю. Когда браузер делает запрос, он включает в запрос заголовок, чтобы указать серверу, что именно браузер способен обрабатывать. В случае с WebP браузер будет направлять заголовок Accept, содержащий image/webp. Мы проверим, отправляет ли браузер этот заголовок с помощью RewriteCond, указывающего критерии, которые должны быть сопоставлены для выполнения правила RewriteRule:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{HTTP_ACCEPT} image/webp
      

      Необходимо отфильтровать все, кроме изображений JPEG и PNG. Снова используя RewriteCond, добавьте регулярное выражение (аналогично тому, что мы использовали в предыдущих разделах), чтобы сравнить запрошенную версию URI:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$
      

      Модификатор (?i) сделает сравнение нечувствительным к регистру.

      Чтобы проверить наличие версии .webp файла, используйте RewriteCond еще раз следующим образом:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{DOCUMENT_ROOT}%1.webp -f
      

      Наконец, если все предыдущие условия выполнены, RewriteRule перенаправляет запрошенный файл JPEG или PNG в соответствующий файл WebP. Обратите внимание, что это перенаправление redirect происходит при помощи флага -R, а не перезаписи rewrite URI-адреса. Разница между перезаписью и перенаправлением — в том, что сервер будет направлять перезаписанный URI-адрес, не сообщая об этом браузеру. Например, URI-адрес покажет, что расширение файла — .png, но на самом деле это будет файл .webp. Добавьте RewriteRule в файл:

      /var/www/html/webp/.htaccess

      ...
      RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R]
      

      На данный момент раздел mod_rewrite в файле .htaccess завершен. Но что произойдет, если между вашим сервером и клиентом будет промежуточный сервер кэширования? Он может показать неправильную версию конечному пользователю. Именно поэтому стоит проверить, активирован ли модуль mod_headers, чтобы отправить заголовок Vary:Accept. Заголовок Vary указывает серверам кэширования (например, прокси-серверам), что тип содержания документа варьируется в зависимости от возможностей браузера, запрашивающего документ. Кроме того, ответ будет сгенерирован на основе заголовка Accept в запросе. Запрос с другим заголовком Accept может получить другой ответ. Данный заголовок важен, поскольку не позволяет показывать кэшированные изображения WebP в неподдерживаемых браузерах:

      /var/www/html/webp/.htaccess

      ...
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      

      Наконец, задайте тип MIME изображений .webp как image/webp в конце файла .htaccess, используя директиву AddType. Благодаря этому, изображения будут показаны с правильным типом MIME:

      /var/www/html/webp/.htaccess

      ...
      AddType image/webp .webp
      

      Это последняя версия нашего файла .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$
        RewriteCond %{DOCUMENT_ROOT}%1.webp -f
        RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R]
      </IfModule>
      
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      
      AddType image/webp .webp
      

      Примечание. Можно объединить этот файл .htaccess с другим файлом .htaccess (при наличии). Если вы используете, например, WordPress, то следует скопировать этот файл .htaccess и вставить его в верхней части существующего файла.

      Давайте на практике сделаем то, что мы изучили на этом шаге. Если вы следовали указаниям в предыдущих шагах, то у вас должны быть изображения logo.png и https://www.digitalocean.com/logo.webp в /var/www/html/webp. Мы используем простой элемент <img>, чтобы добавить изображение logo.png на нашу веб-страницу. Создайте новый файл HTML для проверки конфигурации:

      • nano /var/www/html/webp/img.html

      Введите следующий код HTML в файл:

      /var/www/html/webp/img.html

      <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      

      Сохраните и закройте файл.

      При посещении веб-страницы http://your_server_ip/webp/img.html в браузере Chrome вы увидите, что показанное изображение — это версия .webp (попробуйте открыть изображение в новой вкладке). Если вы используете Firefox, то автоматически получите изображение .png.

      Заключение

      В этом обучающем руководстве мы изучили основные методы работы с изображениями WebP. Мы рассказали, как использовать cwebp для преобразования файлов, а также два варианта показа этих изображений пользователям: элемент HTML5 <picture> и модуль Apache mod_rewrite.

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

      • Характеристики формата WebP и использование инструментов преобразования описаны подробнее в документации WebP.
      • Дополнительные сведения об использовании элемента см. в документации по MDN.
      • Чтобы полностью понять, как использовать mod_rewrite, см. документацию.

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



      Source link

      Como Criar e Exibir Imagens WebP para Acelerar Seu Website


      O autor selecionou a Apache Software Foundationpara receber uma doação como parte do programa Write for DOnations.

      Introdução

      WebP é um formato aberto de imagem desenvolvido pelo Google em 2010, baseado no formato de vídeo VP8. Desde então, o número de sites e aplicativos móveis que usam o formato WebP cresceu rapidamente. Tanto o Google Chrome como o Opera suportam o formato WebP de forma nativa e, uma vez que esses navegadores representam cerca de 74% do tráfego da Web, os usuários podem acessar sites mais rapidamente se esses sites usarem imagens WebP. Também existem planos para implementar o WebP no Firefox.

      O formato WebP suporta tanto a compressão de imagens com perda, quanto sem perda de dados, incluindo animação. Sua princpal vantagem em comparação com outros formatos de imagem usados na Web é o tamanho bastante reduzido dos arquivos, o que permite que as páginas Web carreguem mais rapidamente e reduz o uso de largura de banda. Usar imagens WebP pode levar a aumentos consideráveis na velocidade da página. Se o seu aplicativo ou site estiver passando por problemas de desempenho ou aumento de tráfego, converter suas imagens pode ajudar a otimizar o desempenho das páginas.

      Neste tutorial, você usará a ferramenta de linha de comando cwebp para converter imagens para o formato WebP, criando scripts que irão ver e converter imagens em um diretório específico. Finalmente, você irá explorar duas maneiras de exibir imagens WebP aos seus visitantes.

      Pré-requisitos

      Trabalhar com imagens WebP não exige uma distribuição específica, mas vamos demonstrar como trabalhar com os software relevantes no Ubuntu 16.04 e CentOS 7. Para seguir este tutorial você precisará de:

      • Um servidor configurado com um usuário não raiz (non-root) de comando sudo. Para configurar um servidor Ubuntu 16.04, você pode seguir nosso Guia de configuração inicial de servidor Ubuntu 16.04. Se você quiser usar o CentOS, você pode configurar um servidor CentOS 7 com nossa Configuração Inicial de Servidor com tutorial CentOS.

      • O Apache instalado no seu servidor. Se você estiver usando o Ubuntu, você pode seguir o passo um do Como Instalar Linux, Apache, MySQL, pilha PHP (LAMP) no Ubuntu 16.04. Se você estiver usando o CentOS, então você deve seguir o passo um do Como Instalar Linux, Apache, MySQL, pilha PHP (LAMP) no CentOS 7. Certifique-se de ajustar as configurações do seu firewall para permitir o tráfego HTTP e HTTPS.

      • mod_rewrite instalado no seu servidor. Se você estiver usando o Ubuntu, você pode seguir nosso guia Como Manipular URLs com mod_rewrite para o Apache no Ubuntu 16.04. No CentOS 7 o mod_rewrite é instalado e ativado por padrão.

      Passo 1 — Instalando o cwebp e Preparando o Diretório de Imagens

      Nesta seção, instalaremos o software para converter imagens e criaremos um diretório com imagens para a finalidade de teste.

      No Ubuntu 16.04, você pode instalar o cwebp, um utilitário que comprime imagens no formato .webp, digitando:

      • sudo apt-get update
      • sudo apt-get install webp

      No CentOS 7, digite:

      • sudo yum install libwebp-tools

      Para criar um novo diretório de imagens chamado webp no diretório raiz do Apache Web (localizado por padrão em /var/www/html) digite:

      • sudo mkdir /var/www/html/webp

      Altere o proprietário deste diretório para o seu usuário sammy não raiz:

      • sudo chown sammy: /var/www/html/webp

      Para testar comandos, você pode baixar imagens JPEG e PNG gratuitas usando o wget. Esta ferramenta é instalada por padrão no Ubuntu 16.04; se você estiver usando o CentOS 7, você pode instalá-la digitando:

      A seguir, baixe as imagens teste usando os comandos seguintes:

      • wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
      • wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
      • wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

      Nota: estas imagens estão disponíveis para uso e redistribuição sob a licença Creative Commons Attribution-ShareAlike e o Public Domain Dedication.

      A maior parte do seu trabalho no próximo passo estará no diretório /var/www/html/webp, para o qual você pode se mover digitando:

      Com as imagens teste instaladas e o servidor Apache Web, mod_rewrite e cwebp instalados, você está pronto para ir para a conversão de imagens.

      Exibir imagens .webp para visitantes do site exige versões .webp de arquivos de imagem. Neste passo, você irá converter imagens JPEG e PNG para o formato .webp usando o cwebp. A sintaxe geral do comando se parece com essa:

      • cwebp image.jpg -o image.webp

      A opção -o especifica o caminho até o arquivo WebP.

      Uma vez que você ainda está no diretório /var/www/html/webp, você pode executar o comando a seguir para converter a image1.jpg em image1.webp e image2.jpg em image2.webp:

      • cwebp -q 100 image1.jpg -o image1.webp
      • cwebp -q 100 image2.jpg -o image2.webp

      Definir o fator de qualidade -q em 100 retém 100% da qualidade da imagem; se não especificado, o valor padrão é 75.

      A seguir, inspecione o tamanho das imagens JPEG e WebP usando o comando ls. A opção -l irá mostrar o formato de lista longa, que inclui o tamanho do arquivo e a opção -h irá garantir que ls imprima tamanhos legíveis para humanos:

      • ls -lh image1.jpg image1.webp image2.jpg image2.webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

      O resultado do comando ls mostra que o tamanho da image1.jpg é de 7,4 MB, enquanto o tamanho da image1.webp é 3,9 MB. O mesmo se aplica à image2.jpg (16 MB) e image2.webp (7 MB). Estes arquivos têm quase metade do tamanho original.

      Para salvar os dados das imagens completos e originais durante a compressão, você pode usar a opção -lossless no lugar de -q. Esta é a melhor opção para manter a qualidade de imagens PNG. Para converter a imagem PNG baixada do passo 1, digite:

      • cwebp -lossless logo.png -o https://www.digitalocean.com/logo.webp

      O comando a seguir mostra que o tamanho sem perdas da imagem WebP (60 KB) é aproximadamente metade do tamanho da imagem PNG original (116 KB):

      • ls -lh logo.png https://www.digitalocean.com/logo.webp

      Output

      -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      As imagens convertidas no diretório /var/www/html/webp são cerca de 50% menores do que suas equivalentes em JPEG e PNG. Na prática, as taxas de compressão podem ser diferentes, dependendo de certos fatores: a taxa de compressão da imagem original, o formato do arquivo, o tipo de conversão (com ou sem perdas), a porcentagem de qualidade e o seu sistema operacional. Conforme você for convertendo mais imagens, você poderá ver variações nas taxas de conversão relacionadas a esses fatores.

      Passo 3 — Convertendo Imagens JPEG e PNG em um Diretório

      Escrever um script irá simplificar o processo de conversão, eliminando o trabalho da conversão manual. Agora, vamos escrever um script de conversão que encontre arquivos JPEG e os converta para o formato WebP com 90% da qualidade, enquanto também converte arquivos PNG em imagens WeP sem perdas.

      Usando o nano ou seu editor favorito, crie o script webp-convert.sh no diretório home do seu usuário.

      A primeira linha do script se parecerá com esta:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" )
      

      Esta linha tem os seguintes componentes:

      • find: este comando irá procurar por arquivos dentro de um diretório especificado.
      • $1: este parâmetro posicional especifica o caminho do diretório de imagens, tirado da linha de comando. Em última análise, ele torna o local do diretório menos dependente do local do script.
      • -type f: esta opção diz ao find para procurar apenas arquivos regulares.
      • -iname: este teste compara os nomes dos arquivos com um padrão especificado. O teste -iname que não diferencia maiúsculas de minúsculas diz ao find para procurar qualquer nome de arquivo que termine com .jpg (*.jpg) ou .jpeg (*.jpeg).
      • -o: Este operador lógico instrui o comando find para listar arquivos que correspondam ao primeiro teste -iname (-iname ".jpg"**) ou o segundo (-iname "*.jpeg"**).
      • (): parênteses em volta desses testes, junto com o operador -and, garante que o primeiro teste (ou seja -type f) seja sempre executado.

      A segunda linha do script irá converter as imagens para WebP usando o parâmetro -exec. A sintaxe geral deste parâmetro é -exec command {} ;. Cada arquivo substitui uma string {}; o comando faz a iteração através desses arquivos, ao passo que a string ; diz para o find onde o comando termina:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c 'commands' {} ;
      

      Neste caso, o parâmetro -exec irá exigir mais de um comando para procurar e converter imagens:

      • bash: este comando irá executar um pequeno script que irá criar a versão .webp do arquivo se ele não existir. Este script será passado para o bash como uma string, graças à opção -c.
      • 'commands': este espaço reservado é o script que irá fazer versões .webp dos seus arquivos.

      O script dentro de 'commands' fará as seguintes coisas:

      • Criar uma variável webp_path.
      • Testar se a versão .webp do arquivo existe ou não.
      • Criar o arquivo se ele não existir.

      O script menor se parece com este:

      ~/webp-convert.sh

      ...
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;
      

      Os elementos neste script menor incluem:

      • webp_path: esta variável será gerada usando o sed e o nome do arquivo correspondente do comando bash, estipulado pelo pelo parâmetro posicional $0. Uma _string here_ (​​​​​​<<<) passará este nome para o sed.
      • if [ ! -f "$webp_path" ]: este teste irá determinar se um arquivo chamado "$webp_path" já existe, usando o operador lógico not (!).
      • cwebp: este comando irá criar o arquivo se ele não existir, usando a opção -q para não imprimir o resultado.

      Com este script menor no lugar do espaço reservado 'commands', o script completo para converter imagens JPEG se parecerá agora com este:

      ~/webp-convert.sh

      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      

      Para converter imagens PNG para WebP, vamos adotar a mesma abordagem, com duas diferenças: primeiro, o padrão -iname no comando find será "*.png". Segundo, o comando de conversão usará a opção -lossless em vez da opção de qualidade -q.

      O script final se parece com este:

      ~/webp-convert.sh

      #!/bin/bash
      
      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      
      # converting PNG images
      find $1 -type f -and -iname "*.png" 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -lossless "$0" -o "$webp_path";
      fi;' {} ;
      

      Salve o arquivo e saia do editor.

      Em seguida, vamos colocar o script webp-convert.sh em prática, usando os arquivos no diretório /var/www/html/webp. Certifique-se de que o arquivo script é executável, executando o comando a seguir:

      • chmod a+x ~/webp-convert.sh

      Execute o script no diretório de imagens:

      • ./webp-convert.sh /var/www/html/webp

      Nada aconteceu! Isso se dá porque já convertemos essas imagens no passo 2. Avançando, o script webp-convert converterá imagens quando adicionarmos novos arquivos ou removermos as versões .webp. Para ver como isso funciona, exclua os arquivos .webp que criamos no passo 2:

      • rm /var/www/html/webp/*.webp

      Após excluir todas as imagens .webp, execute o script novamente para garantir que ele funciona:

      • ./webp-convert.sh /var/www/html/webp

      O comando ls confirmará que o script converteu as imagens com sucesso:

      • ls -lh /var/www/html/webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      O script neste passo é a base para usar imagens WebP no seu site, uma vez que você precisará de uma versão m funcionamento de todas as imagens no formato WebP para exibir aos visitantes. O próximo passo abordará como automatizar a conversão de novas imagens.

      Passo 4 — Monitorando Arquivos de Imagem em um Diretório

      Neste passo, criaremos um novo script para monitorar nosso diretório de imagens quanto a alterações e para converter automaticamente as imagens recém-criadas.

      Criar um script que monitora nosso diretório de imagens pode resolver certos problemas com o script webp-convert.sh da forma como ele está escrito. Por exemplo, este script não identificará se renomeamos uma imagem. Se tivéssemos uma imagem chamada foo.jpg, executássemos o webp-convert.sh, renomeássemos aquele arquivo para bar.jpg e, então, executássemos o webp-convert.sh novamente, teríamos arquivos duplicados de .webp (foo.webp e bar.webp). Para resolver este problema e para evitar executar o script manualmente, adicionaremos observadores a outro script. Os observadores monitoram os arquivos ou diretórios especificados quanto às alterações e executam comandos em resposta a essas alterações.

      O comando inotifywait irá configurar observadores no nosso script. Este comando faz parte do pacote inotify-tools, um conjunto de ferramentas de linha de comando que fornecem uma interface simples ao subsistema do kernel inotify. Para instalá-lo no Ubuntu 16.04 digite:

      • sudo apt-get install inotify-tools

      Com o CentOS 7, o pacote inotify-tools está disponível no repositório EPEL. Instale o repositório EPEL e o pacote inotify-tools usando os comandos a seguir:

      • sudo yum install epel-release
      • sudo yum install inotify-tools

      Em seguida, crie o script webp-watchers.sh no diretório home do seu usuário usando o nano:

      A primeira linha do script se parecerá com esta:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1
      

      Esta linha inclui os seguintes elementos:

      • inotifywait: este comando monitora quanto às alterações em um certo diretório.
      • -q: esta opção irá dizer ao inotifywait para ficar quieto e não produzir grande quantidade de resultados.
      • -m: esta opção irá dizer ao inotifywait para executar indefinidamente e não sair após receber um único evento.
      • -r: esta opção irá configurar observadores de maneira repetitiva, monitorando um diretório especificado e todos os seus subdiretórios.
      • --format: esta opção diz ao inotifywait para monitorar alterações usando o nome do evento seguido do caminho do arquivo. Os eventos que queremos monitorar são close_write (acionado quando um arquivo é criado e completamente gravado no disco), moved_from e moved_to (acionados quando um arquivo é movido) e delete (acionado quando um arquivo é excluído).
      • $1: este parâmetro posicional retém o caminho dos arquivos alterados.

      Na sequência, vamos adicionar um comando grep para determinar se nossos arquivos são imagens JPEG ou PNG. A opção -i irá dizer ao grep para ignorar a diferença entre maiúsculas e minúsculas; -E irá especificar que o grep deve usar expressões regulares estendidas e a --line-buffered irá dizer ao grep para passar as linhas correspondentes para um loop while:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '.(jpe?g|png)$' --line-buffered
      

      A seguir, vamos construir um loop while com o comando read. O read irá processar o evento que o inotifywait detectou, atribuindo-o a uma variável chamada $operation e o caminho do arquivo processado para uma variável chamada $path:

      ~/webp-watchers.sh

      ...
      | while read operation path; do
        # commands
      done;
      

      Vamos combinar este loop com o resto do nosso script:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        # commands
      done;
      

      Após o loop while verificar o evento, os comandos dentro do loop tomarão as seguintes ações, dependendo do resultado:

      • Criar um novo arquivo WebP se um novo arquivo de imagem for criado ou movido para o diretório de destino.
      • Excluir o arquivo WebP se o arquivo de imagem associado for excluído ou movido do diretório de destino.

      Há três seções principais dentro do loop. Uma variável chamada webp_path irá reter o caminho para a versão .webp da imagem em questão:

      ~/webp-watchers.sh

      ...
      webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
      

      A seguir, o script irá testar qual evento aconteceu:

      ~/webp-watchers.sh

      ...
      if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
        # commands to be executed if the file is moved or deleted
      elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
        # commands to be executed if a new file is created
      fi;
      

      Se o arquivo foi movido ou excluído, o script irá verificar se a versão .webp existe. Se ela existe, o script irá removê-la usando o rm:

      ~/webp-watchers.sh

      ...
      if [ -f "$webp_path" ]; then
        $(rm -f "$webp_path");
      fi;
      

      Para arquivos recém-criados, a compressão irá acontecer da seguinte forma:

      • Se o arquivo correspondente for uma imagem PNG, o script irá usar a compressão sem perdas.
      • Se não for, o script usará uma compressão com perdas com a opção -quality.

      Vamos adicionar os comandos cwebp que irão fazer este trabalho no script:

      ~/webp-watchers.sh

      ...
      if [ $(grep -i '.png$' <<< "$path") ]; then
        $(cwebp -quiet -lossless "$path" -o "$webp_path");
      else
        $(cwebp -quiet -q 90 "$path" -o "$webp_path");
      fi;
      

      Na íntegra, o arquivo webp-watchers.sh se parecerá com este:

      ~/webp-watchers.sh

      #!/bin/bash
      echo "Setting up watches.";
      
      # watch for any created, moved, or deleted image files
      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
        if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
          if [ -f "$webp_path" ]; then
            $(rm -f "$webp_path");
          fi;
        elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
           if [ $(grep -i '.png$' <<< "$path") ]; then
             $(cwebp -quiet -lossless "$path" -o "$webp_path");
           else
             $(cwebp -quiet -q 90 "$path" -o "$webp_path");
           fi;
        fi;
      done;
      

      Salve e feche o arquivo. Não se esqueça de torná-lo executável:

      • chmod a+x ~/webp-watchers.sh

      Vamos executar este script no diretório /var/www/html/webp em segundo plano, usando o &. Vamos também redirecionar os resultados padrão e os erros padrão para um ~/output.log, para armazenar os resultados em local prontamente disponível:

      • ./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

      Neste ponto, você converteu os arquivos JPEG e PNG em /var/www/html/webp para o formato WebP e configurou observadores para fazer esse trabalho, usando o script webp-watchers.sh. Agora é hora de explorar opções para entregar imagens WebP aos visitantes do seu site.

      Passo 5 — Exibindo Imagens WebP para Visitantes Usando Elementos HTML

      Neste passo, vamos explicar como exibir imagens WebP com elementos HTML. Neste ponto, devem haver versões .webp de cada uma das imagens teste JPEG e PNG no diretório /var/www/html/webp. Agora, podemos exibi-las para os navegadores compatíveis, usando ou os elementos HTML5 (<picture>) ou o módulo Apache mod_rewrite. Vamos usar elementos HTML neste passo.

      O elemento <picture> permite que você inclua imagens diretamente nas suas páginas Web e defina mais de uma fonte de imagens. Se seu navegador é compatível com o formato WebP, ele irá baixar a versão .webp do arquivo em vez da versão original, resultando em páginas Web sendo exibidas mais rapidamente. Vale dizer que o elemento <picture> é bem suportado em navegadores modernos compatíveis com o formato WebP.

      O elemento <picture> é um container com elementos <source> que <image> apontam para arquivos específicos. Se usarmos <source> para apontar para uma imagem .webp, o navegador verá se ele pode lidar com ela; caso contrário, ele retrocederá para o arquivo de imagem especificado no atributo src do elemento <source>.

      Vamos usar o arquivo logo.png do nosso diretório /var/www/html/webp, o qual convertemos para https://www.digitalocean.com/logo.webp, como um exemplo com <source>. Podemos usar o seguinte código HTML para exibir o https://www.digitalocean.com/logo.webp em qualquer navegador compatível com o formato WebP e o logo.png com navegadors não compatíveis com o WebP ou o elemento <picture>.

      Crie um arquivo HTML localizado em /var/www/html/webp/picture.html:

      • nano /var/www/html/webp/picture.html

      Adicione o código a seguir à página Web para exibir o https://www.digitalocean.com/logo.webp para navegadores compatíveis, usando o elemento <picture>:

      /var/www/html/webp/picture.html

      <picture>
        <source  type="image/webp">
        <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      </picture>
      

      Salve e feche o arquivo.

      Para testar se tudo está funcionando, navegue até a página http://your_server_ip/webp/picture.html. Você deve ver a imagem teste PNG.

      Agora que você sabe como exibir imagens .webp diretamente do código HTML, vamos ver como automatizar este processo usando o módulo mod_rewrite do Apache.

      Passo 6 — Exibindo Imagens WebP Usando o mod_rewrite

      Se queremos otimizar a velocidade do nosso site, mas temos um grande número de páginas ou muito pouco tempo para editar o código HTML, então o módulo mod_rewrite do Apache pode nos ajudar a automatizar o processo de exibição de imagens .webp em navegadores compatíveis.

      Primeiramente, crie um arquivo .htaccess no diretório /var/www/html/webp usando o comando a seguir:

      • nano /var/www/html/webp/.htaccess

      A diretiva ifModule irá testar se o mod_rewrite está disponível; se ele estiver, ele pode ser ativado usando o RewriteEngine On. Adicione essas diretivas ao .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On 
        # further directives
      </IfModule>
      

      O servidor Web fará vários testes para estabelecer quando exibir imagens .webp para o usuário. Quando um navegador faz um pedido, ele inclui um cabeçalho que indica ao servidor o que o navegador é capaz de manipular. No caso do WebP, o navegador irá enviar um cabeçalho Accept que contém image/webp. Vamos verificar se o navegador enviou aquele cabeçalho usando o RewriteCond, que especifica os critérios que devem ser correspondidos para executar o RewriteRule:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{HTTP_ACCEPT} image/webp
      

      Tudo deve ser filtrado, exceto as imagens JPEG e PNG. Usando o RewriteCond novamente, adicione uma expressão regular (similar ao que usamos nas seções anteriores) para corresponder ao URI solicitado:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$ 
      

      O modificador (?i) fará com que a correspondência não diferencie maiúsculas e minúsculas.

      Para verificar se a versão .webp do arquivo existe, use o RewriteCond novamente do seguinte modo:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{DOCUMENT_ROOT}%1.webp -f
      

      Finalmente, se todas as condições anteriores forem cumpridas, o RewriteRule irá redirecionar o arquivo JPEG ou PNG solicitado para seu arquivo WebP associado. Observe que isso irá redirecionar usando o sinalizador -R, em vez de reescrever o URI. A diferença entre reescrever e redirecionar é que o servidor irá exibir o URI reescrito sem contar ao navegador. Por exemplo, o URI irá mostrar que a extensão de arquivo é .png, mas ele será na realidade um arquivo .webp. Adicione o RewriteRule ao arquivo:

      /var/www/html/webp/.htaccess

      ...
      RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R] 
      

      Neste ponto, a seção mod_rewrite no arquivo .htaccess está completa. Mas o que acontecerá se houver um servidor de cache intermediário entre seu servidor e o cliente? Ele pode exibir a versão errada ao usuário final. É por isso que vale a pena verificar se o mod_headers está habilitado, para enviar o cabeçalho Vary: Accept. O cabeçalho Vary indica aos servidores de cache (como servidores proxy) que o tipo de conteúdo do documento varia dependendo das capacidades do navegador que solicita o documento. Além disso, a resposta será gerada com base no cabeçalho Accept no pedido. Um pedido com um cabeçalho Accept diferente pode obter uma resposta diferente. Este cabeçalho é importante porque ele impede que imagens WebP em cache sejam exibidas para navegadores não compatíveis:

      /var/www/html/webp/.htaccess

      ...
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      

      Enfim, no final do arquivo .htaccess, configure o tipo MIME das imagens .webp como image/webp usando a diretiva AddType. Isso irá exibir as imagens usando o tipo de MIME correto:

      /var/www/html/webp/.htaccess

      ...
      AddType image/webp .webp
      

      Esta é a versão final do nosso arquivo .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On 
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$ 
        RewriteCond %{DOCUMENT_ROOT}%1.webp -f
        RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R] 
      </IfModule>
      
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      
      AddType image/webp .webp
      

      Nota: você pode fundir este .htaccess com outro arquivo .htaccess, se ele existir. Se você está usando o WordPress, por exemplo, você deve copiar este arquivo .htaccess e colá-lo no topo do arquivo existente.

      Vamos colocar o que fizemos neste passo em prática. Se você seguiu as instruções nos passos anteriores, você deve ter as imagens logo.png e https://www.digitalocean.com/logo.webp em /var/www/html/webp. Vamos usar uma tag simples <img> para incluir a logo.png em nossa página Web. Crie um novo arquivo HTML para testar a configuração:

      • nano /var/www/html/webp/img.html

      Digite o código HTML a seguir no arquivo:

      /var/www/html/webp/img.html

      <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      

      Salve e feche o arquivo.

      Quando você visitar a página Web usando o Chrome visitando http://your_server_ip/webp/img.html, você irá notar que a imagem exibida é a versão .webp (tente abrir a imagem em uma nova aba). Se você usa o Firefox, você receberá uma imagem .png automaticamente.

      Conclusão

      Neste tutorial, abordamos técnicas básicas para trabalhar com imagens WebP. Explicamos como usar o cwebp para converter arquivos, além de duas opções para exibir essas imagens aos usuários: o elemento <picture> do HTML5 e o mod_rewrite do Apache.

      Para personalizar os scripts deste tutorial, você pode consultar alguns desses recursos:

      • Para aprender mais sobre as características do formato WebP e como usar as ferramentas de conversão, consulte a documentação do WebP.
      • Para ver mais detalhes sobre o uso do elemento <picture>, consulte sua documentação no MDN.
      • Para entender completamente como usar o mod_rewrite, consulte sua documentação.

      Usar o formato WebP para suas imagens irá reduzir os tamanhos dos arquivos de maneira considerável. Isso pode reduzir o uso da largura de banda e fazer as páginas carregarem mais rapidamente, particularmente se seu site usar muitas imagens.



      Source link

      Cómo crear y presentar imágenes WebP para acelerar su sitio web


      El autor seleccionó la Apache Software Foundation para recibir una donación como parte del programa Write for DOnations.

      Introducción

      WebP es un formato de imagen abierto desarrollado por Google en 2010 que se basa en el formato de video VP8. Desde entonces, el número de sitios web y aplicaciones móviles que usan el formato WebP ha aumentado a un ritmo rápido. Tanto Google Chrome como Opera admiten el formato WebP de forma nativa, y ya que estos navegadores son responsables de, aproximadamente, el 74 % del tráfico de Internet, los usuarios pueden acceder más rápido a los sitios web si utilizan imágenes WebP. También se planea implementar WebP en Firefox.

      El formato WebP admite la compresión de imágenes con y sin pérdida de datos, incluso animación. Su principal ventaja sobre otros formatos de imagen usados en la web es su tamaño de archivo mucho menor, lo que hace que las páginas web se carguen más rápido y reduce el uso de ancho de banda. Usar imágenes WebP puede provocar aumentos considerables en la velocidad de página. Si su aplicación o sitio web está experimentando problemas de rendimiento o un aumento de tráfico, convertir sus imágenes puede ayudar a optimizar el rendimiento de página.

      En este tutorial, utilizará la herramienta de línea de comandos cwebp para convertir imágenes a formato WebP, creando scripts que examinarán y convertirán imágenes en un directorio específico. Por último, explorará dos formas de presentar imágenes WebP a sus visitantes.

      Requisitos previos

      Trabajar con imágenes WebP no requiere ninguna distribución concreta, pero demostraremos cómo trabajar con software pertinente en Ubuntu 16.04 y CentOS 7. Para seguir este tutorial necesitará lo siguiente:

      • Un servidor configurado con un usuario sudo no root. Para configurar un servidor Ubuntu 16.04, puede seguir nuestra Guía de configuración inicial del servidor Ubuntu 16.04. Si desea usar CentOS, puede configurar un servidor CentOS 7 con nuestro Tutorial de configuración inicial del servidor con CentOS 7.

      • Apache instalado en su servidor. Si está usando Ubuntu, puede seguir el paso uno de Cómo instalar la pila de Linux, Apache, MySQL, PHP (LAMP) en Ubuntu 16.04. Si está usando CentOS, deberá seguir el paso uno de Cómo instalar la pila de Linux, Apache, MySQL, PHP (LAMP) en CentOS 7. Asegúrese de configurar los ajustes de su firewall para que permita tráfico HTTP y HTTPS.

      • mod_rewrite instalado en su servidor. Si está usando Ubuntu, puede seguir nuestra guía Cómo reescribir URL con mod_rewrite para Apache en Ubuntu 16.04. En CentOS7, mod_rewrite está instalado y activado por defecto.

      Paso 1: instalación de cwebp y preparación del directorio de imágenes

      En esta sección, instalaremos el software para convertir imágenes y crearemos un directorio con imágenes como prueba.

      En Ubuntu 16.04, puede instalar cwebp, una herramienta que comprime imágenes al formato .webp al escribir lo siguiente:

      • sudo apt-get update
      • sudo apt-get install webp

      En CentOS 7, escriba lo siguiente:

      • sudo yum install libwebp-tools

      Para crear un nuevo directorio de imágenes llamado webp en el root web de Apache (ubicado por defecto en /var/www/html), escriba lo siguiente:

      • sudo mkdir /var/www/html/webp

      Cambie la propiedad de este directorio a su usuario no root sammy:

      • sudo chown sammy: /var/www/html/webp

      Para probar los comandos, puede descargar imágenes gratuitas JPEG y PNG usando wget. Esta herramienta está instalada por defecto en Ubuntu 16.04; si está usando CentOS 7, puede instalarla escribiendo lo siguiente:

      A continuación, descargue las imágenes de prueba usando los siguientes comandos:

      • wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
      • wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
      • wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

      Nota: estas imágenes están disponibles para su uso y redistribución bajo la licencia Atribución-CompartirIgual y la Certificación de dominio público de Creative Commons.

      La mayor parte de su trabajo en el siguiente paso será en el directorio /var/www/html/webp, que puede mover escribiendo lo siguiente:

      Con las imágenes de prueba en su sitio, y el servidor web de Apache, mod_rewrite, y cwebp instalados, está listo para pasar a convertir imágenes.

      Paso 2: compresión de archivos de imagen con cwebp

      Presentar imágenes .webp a los visitantes de un sitio requiere archivos de imagen en versión .webp. En este paso, convertirá imágenes JPEG y PNG al formato .webp usando cwebp. La sintaxis *general *del comando tiene este aspecto:

      • cwebp image.jpg -o image.webp

      La opción -o especifica la ruta al archivo WebP.

      Ya que aún está en el directorio /var/www/html/webp, puede ejecutar el siguiente comando para convertir image1.jpg a image1.webp e image2.jpg a image2.webp:

      • cwebp -q 100 image1.jpg -o image1.webp
      • cwebp -q 100 image2.jpg -o image2.webp

      Establecer el factor de calidad -q en 100 retiene el 100 % de la calidad de la imagen; si no se especifica, el valor predeterminado es 75.

      A continuación, inspeccione el tamaño de las imágenes JPEG y WebP usando el comando ls. La opción -l mostrará el listado de formato largo, que incluye el tamaño del archivo, y la opción -h se asegurará de que ls imprima tamaños legibles para el ser humano:

      • ls -lh image1.jpg image1.webp image2.jpg image2.webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

      La salida del comando ls muestra que el tamaño de image1.jpg es 7,4 M, mientras que el tamaño de image1.webp es de 3,9 M. Lo mismo se aplica a image2.jpg (16 M) e image2.webp (7 M). El tamaño de estos archivos es de casi la mitad de su tamaño original.

      Para guardar los datos de las imágenes completos y originales durante la compresión, puede usar la opción -lossless en vez de -q. Esta es la mejor opción para mantener la calidad de las imágenes PNG. Para convertir la imagen PNG descargada del paso 1, escriba lo siguiente:

      • cwebp -lossless logo.png -o https://www.digitalocean.com/logo.webp

      El siguiente comando muestra que el tamaño de la imagen WebP (60 K) sin pérdida es de, aproximadamente, la mitad del tamaño de la imagen PNG original (116 K):

      • ls -lh logo.png https://www.digitalocean.com/logo.webp

      Output

      -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      Las imágenes WebP convertidas en el directorio /var/www/html/webp son, aproximadamente, un 50 % menores que sus equivalentes en JPEG y PNG. En la práctica, las tasas de compresión pueden diferir dependiendo de ciertos factores: la tasa de compresión de la imagen original, el formato de archivo, el tipo de conversión (con o sin pérdida), el porcentaje de calidad y su sistema operativo. A medida que convierte más imágenes, puede ver variaciones en las tasas de conversión relacionadas con estos factores.

      Paso 3: conversión de imágenes JPEG y PNG en un directorio

      Escribir una secuencia de comandos simplificará el proceso de conversión al eliminar el trabajo de la conversión manual. Ahora, escribiremos una secuencia de comandos de conversión que encuentre los archivos JPEG y los convierta a formato WebP con una calidad del 90 %, y que también convierta los archivos PNG a imágenes WebP sin pérdida.

      Usando nano o su editor favorito, cree la secuencia de comandos webp-convert.sh en el directorio principal de su usuario.

      La primera línea de la secuencia de comandos tendrá este aspecto:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" )
      

      Esta línea tiene los siguientes componentes:

      • find: este comando buscará archivos en un directorio especificado.
      • $1: este parámetro de posición especifica la ruta del directorio de imágenes, tomada de la línea de comandos. En última instancia, hace que la ubicación del directorio sea menos dependiente de la ubicación de la secuencia de comandos.
      • -type f: esta opción le indica a fin d que busque solo archivos regulares.
      • -iname: esta prueba compara los nombres de archivo con un patrón especificado. La prueba -iname, que no distingue entre mayúsculas y minúsculas, le indica a find que busque cualquier nombre de archivo que termine con .jpg (*.jpg) o .jpeg (*.jpeg).
      • -o: este operador lógico da instrucciones al comando find para que enumere los archivos que coinciden con la primera prueba -iname (-iname “*.jpg”) o la segunda (-iname "*.jpeg").
      • (): los paréntesis alrededor de estas pruebas, junto con el operador -and, garantizan que la primera prueba (por ejemplo, -type f) siempre se ejecute.

      La segunda línea de la secuencia de comandos convertirá las imágenes a WebP usando el parámetro -exec. La sintaxis general de este parámetro es -exec command {} ;. La cadena {} se sustituye con cada archivo que el comando procesa una iteración, mientras que ; le indica a find dónde finaliza el comando:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c 'commands' {} ;
      

      En este caso, el parámetro -exec necesitará más de un comando para buscar y convertir imágenes:

      • bash: este comando ejecutará una pequeña secuencia de comandos que creará la versión .webp del archivo si no existe. Esta secuencia de comandos se pasará a bash como una cadena gracias a la opción -c.
      • 'commands': este marcador de posición es la secuencia de comandos que creará versiones .webp de sus archivos.

      La secuencia de comandos dentro de 'commands' hará lo siguiente:

      • Crear una variable webp_path.
      • Probar si la versión .webp del archivo existe o no.
      • Crear el archivo si no existe.

      La secuencia de comandos más pequeña tiene este aspecto:

      ~/webp-convert.sh

      ...
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;
      

      Los elementos de esta secuencia de comandos más pequeña incluyen los siguientes:

      Con esta secuencia de comandos más pequeña en lugar del marcador de posición 'commands', la secuencia de comandos completa para convertir imágenes JPEG, ahora, tendrá este aspecto:

      ~/webp-convert.sh

      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      

      Para convertir imágenes PNG a WebP, vamos a adoptar el mismo enfoque, con dos diferencias. La primera es que el patrón -iname en el comando find será "*.png". La segunda, que el comando de conversión usará la opción -lossless en vez de la opción de calidad -q.

      La secuencia de comandos completa tendrá este aspecto:

      ~/webp-convert.sh

      #!/bin/bash
      
      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      
      # converting PNG images
      find $1 -type f -and -iname "*.png" 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -lossless "$0" -o "$webp_path";
      fi;' {} ;
      

      Guarde el archivo y salga del editor.

      A continuación, vamos a poner la secuencia de comandos webp-convert.sh en práctica usando los archivos del directorio /var/www/html/webp. Asegúrese de que el archivo de la secuencia de comandos sea ejecutable con el siguiente comando:

      • chmod a+x ~/webp-convert.sh

      Ejecute la secuencia de comandos en el directorio de imágenes:

      • ./webp-convert.sh /var/www/html/webp

      ¡No ha pasado nada! Eso es porque ya convertimos estas imágenes en el paso 2. A continuación, la secuencia de comandos webp-convert convertirá las imágenes cuando agreguemos nuevos archivos o eliminemos las versiones .webp. Para ver cómo funciona esto, elimine los archivos .webp que creamos en el paso 2:

      • rm /var/www/html/webp/*.webp

      Tras eliminar todas las imágenes .webp, ejecute la secuencia de comandos de nuevo para asegurarse de que funcione:

      • ./webp-convert.sh /var/www/html/webp

      El comando ls confirmará que la secuencia de comandos convirtió las imágenes correctamente:

      • ls -lh /var/www/html/webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      La secuencia de comandos de este paso es la base para utilizar imágenes WebP en su sitio web, ya que necesitará una versión funcional de todas las imágenes en formato WebP para presentarlas a los visitantes. El siguiente paso cubrirá cómo automatizar la conversión de nuevas imágenes.

      Paso 4: inspección de archivos de imagen en un directorio

      En este paso, crearemos una nueva secuencia de comandos para examinar nuestro directorio de imágenes en busca de cambios y convertir, automáticamente, las imágenes recién creadas.

      Crear una secuencia que examine nuestro directorio de imágenes puede abordar ciertos problemas con la secuencia de comandos webp-convert.sh tal como está escrita. Por ejemplo, esta secuencia de comandos no identificará si cambiamos el nombre a una imagen. Si tuviésemos una imagen llamada foo.jpg, ejecutásemos webp-convert.sh, cambiásemos ese archivo a bar.jpg y ejecutásemos webp-convert.sh de nuevo, tendríamos archivos .webp duplicados (foo.webp y bar.webp). Para resolver este problema, y evitar ejecutar la secuencia de comandos manualmente, añadiremos monitores a otra secuencia de comandos. Los monitores examinan archivos o directorios específicos en busca de cambios y ejecutan comandos en respuesta a ellos.

      El comando inotifywait establecerá monitores en nuestra secuencia de comandos. Este comando es parte del paquete inotify-tools, un conjunto de herramientas de línea de comandos que proporcionan una interfaz sencilla para el subsistema de núcleo de inotify. Para instalarlo en Ubuntu 16.04, escriba lo siguiente:

      • sudo apt-get install inotify-tools

      Con CentOS 7, el paquete inotify-tools está disponible en el repositorio EPEL. Instale el repositorio EPEL y el paquete inotify-tools usando los siguientes comandos:

      • sudo yum install epel-release
      • sudo yum install inotify-tools

      A continuación, cree la secuencia de comandos webp-watchers.sh en el directorio principal de su usuario usando nano:

      La primera línea de la secuencia de comandos tendrá este aspecto:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1
      

      Esta línea incluye los siguientes elementos:

      • inotifywait: este comando vigila si se producen cambios en un directorio concreto.
      • -q: esta opción indicará a inotifywait que permanezca en modo silencioso y no produzca muchos resultados.
      • -m: esta opción indicará a inotifywait que se ejecute indefinidamente y no salga tras recibir un único evento.
      • -r: esta opción establecerá monitores de forma recursiva, observando un directorio específico y todos sus subdirectorios.
      • -format: esta opción indicará a inotifywait que monitoree los cambios usando el nombre del evento seguido de la ruta del archivo. Los eventos que queremos monitorear son close_write (que se activa cuando un archivo se crea y se escribe por completo en el disco), moved_from y moved_to (que se activan cuando se mueve un archivo), y delete (que se activa cuando se elimina un archivo).
      • $1: este parámetro de posición contiene la ruta de los archivos cambiados.

      A continuación, vamos a añadir un comando grep para establecer si nuestros archivos son imágenes JPEG o PNG o no. La opción -i indicará a grep que ignore el uso de mayúsculas y minúsculas, -E especificará que grep deberá usar expresiones regulares extendidas, y -line-buffered hará que grep pase las líneas coincidentes a un bucle while:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '.(jpe?g|png)$' --line-buffered
      

      A continuación, crearemos un bucle while con el comando read; readprocesará el evento que detectó inotifywait, asignándolo a una variable llamada $operation, y asignará la ruta del archivo procesado a una variable llamada $path:

      ~/webp-watchers.sh

      ...
      | while read operation path; do
        # commands
      done;
      

      Vamos a combinar este bucle con el resto de nuestra secuencia de comandos:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        # commands
      done;
      

      Una vez que el bucle while haya comprobado el evento, los comandos dentro del bucle realizarán las siguientes acciones, dependiendo del resultado:

      • Crear un nuevo archivo WebP, si se creó un nuevo archivo de imagen o se movió al directorio de destino.
      • Eliminar el archivo WebP, si el archivo de imagen asociado se eliminó o se movió del directorio de destino.

      Hay tres secciones principales dentro del bucle. Una variable llamada webp_path mantendrá la ruta a la versión .webp de la imagen referente:

      ~/webp-watchers.sh

      ...
      webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
      

      A continuación, la secuencia de comandos probará qué evento se produjo:

      ~/webp-watchers.sh

      ...
      if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
        # commands to be executed if the file is moved or deleted
      elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
        # commands to be executed if a new file is created
      fi;
      

      Si el archivo se movió o eliminó, la secuencia de comandos comprobará si hay una versión .webp. Si es así, la secuencia de comandos la eliminará usando rm:

      ~/webp-watchers.sh

      ...
      if [ -f "$webp_path" ]; then
        $(rm -f "$webp_path");
      fi;
      

      Para los archivos recién creados, la compresión se realizará como sigue:

      • Si el archivo equivalente es una imagen PNG, la secuencia de comandos usará compresión sin pérdida.
      • Si no es así, la secuencia de comandos usará una compresión con pérdida con la opción -quality.

      Vamos a añadir los comando cwebp que harán este trabajo en la secuencia de comandos:

      ~/webp-watchers.sh

      ...
      if [ $(grep -i '.png$' <<< "$path") ]; then
        $(cwebp -quiet -lossless "$path" -o "$webp_path");
      else
        $(cwebp -quiet -q 90 "$path" -o "$webp_path");
      fi;
      

      Completo, el archivo webp-watchers.sh tendrá este aspecto:

      ~/webp-watchers.sh

      #!/bin/bash
      echo "Setting up watches.";
      
      # watch for any created, moved, or deleted image files
      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
        if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
          if [ -f "$webp_path" ]; then
            $(rm -f "$webp_path");
          fi;
        elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
           if [ $(grep -i '.png$' <<< "$path") ]; then
             $(cwebp -quiet -lossless "$path" -o "$webp_path");
           else
             $(cwebp -quiet -q 90 "$path" -o "$webp_path");
           fi;
        fi;
      done;
      

      Guarde y cierre el archivo. No olvide hacer que sea ejecutable:

      • chmod a+x ~/webp-watchers.sh

      Vamos a ejecutar esta secuencia de comandos en el directorio /var/www/html/webp en segundo plano usando &. También vamos a redirigir el resultado estándar y el error estándar a un ~/output.log, para almacenar el resultado en una ubicación fácilmente disponible:

      • ./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

      Hasta ahora, convirtió los archivos JPEG y PNG en /var/www/html/webp al formato WebP, y estableció monitores para hacer este trabajo usando la secuencia de comandos webp-watchers.sh. Ahora, es momento de explorar las opciones para presentar imágenes WebP a los visitantes de su sitio web.

      Paso 5: presentación de imágenes WebP a los visitantes usando elementos HTML

      En este paso, explicaremos cómo presentar imágenes WebP con elementos HTML. Ahora, debería haber versiones -webp de cada una de las imágenes de prueba JPEG y PNG en el directorio /var/www/html/webp. Ya podemos presentarlas en los navegadores compatibles usando elementos HTML5 (<picture>) o el módulo mod_rewrite de Apache. Usaremos elementos HTML en este paso.

      El elemento <picture> le permite incluir imágenes directamente en sus páginas web y definir más de una fuente de imagen. Si su navegador es compatible con el formato WebP, descargará la versión .webp del archivo en vez de la original, lo que hará que las páginas web se presenten más rápido. Cabe mencionar que el elemento <picture> se admite bien en los navegadores modernos compatibles con el formato WebP.

      El elemento <picture> es un contenedor con <source> y <image> que apuntan a archivos concretos. Si lo usamos <source> para apuntar a una imagen .webp, el navegador determinará si puede manejarla; de lo contrario, volverá al archivo de imagen especificado en el atributo src del elemento <picture>.

      Vamos a usar el archivo logo.pngde nuestro directorio /var/www/html/webp, que convertimos a https://www.digitalocean.com/logo.webp, como en el ejemplo con <source>. Podemos usar el siguiente código HTML para visualizar https://www.digitalocean.com/logo.webp en cualquier navegador que sea compatible con el formato WebP, y logo.png en cualquier navegador que no sea compatible con WebP o con el elemento<picture>.

      Cree un archivo HTML en /var/www/html/webp/picture.html:

      • nano /var/www/html/webp/picture.html

      Añada el siguiente código a la página web para visualizar https://www.digitalocean.com/logo.webp en los navegadores compatibles usando el elemento<picture>:

      /var/www/html/webp/picture.html

      <picture>
        <source  type="image/webp">
        <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      </picture>
      

      Guarde y cierre el archivo.

      Para comprobar que todo funcione correctamente, navegue a http://your_server_ip/webp/picture.html. Debería ver la imagen PNG de prueba.

      Ahora que sabe cómo presentar imágenes .webp directamente desde código HTML, vamos a ver cómo automatizar este proceso usando el módulo mod_rewrite de Apache.

      Paso 6: presentación de imágenes WebP usando mod_rewrite

      Si queremos optimizar la velocidad de nuestro sitio, pero tenemos un gran número de páginas o poco tiempo para editar el código HTML, el módulo mod_rewrite de Apache puede ayudarnos a automatizar el proceso de presentar imágenes .webp en los navegadores compatibles.

      Primero, cree un archivo .htaccess en el directorio /var/www/html/webp usando el siguiente comando:

      • nano /var/www/html/webp/.htaccess

      La directiva ifModule probará si mod_rewrite está disponible; si es así, puede desactivarse usando RewriteEngine On. Añada estas directivas a .htaccess::

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On 
        # further directives
      </IfModule>
      

      El servidor web realizará varias pruebas para establecer cuándo presentar las imágenes .webp al usuario. Cuando un navegador realiza una solicitud, incluye un encabezado para indicar al servidor qué es capaz de manejar. En el caso de WebP, el navegador enviará un encabezado Accept que contiene image/webp. Comprobaremos si el navegador envió ese encabezado usando RewriteCond, que especifica el criterio que debería coincidir para realizar RewriteRule:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{HTTP_ACCEPT} image/webp
      

      Todo debería filtrarse, excepto las imágenes JPEG y PNG. Usando de nuevo RewriteCond, añada una expresión regular (similar a la que usamos en las secciones anteriores) para que se corresponda con la URI solicitada:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$ 
      

      El modificador (?i) hará que la coincidencia no distinga entre mayúsculas y minúsculas.

      Para comprobar si existe la versión .webp del archivo, utilice RewriteCond de nuevo como sigue:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{DOCUMENT_ROOT}%1.webp -f
      

      Por último, si se cumplieron todas las condiciones anteriores, RewriteRule redirigirá el archivo JPEG o PNG solicitado a su archivo WebP asociado. Tenga en cuenta que se redirigirá usando el marcador -R, en vez de reescribir la URI. La diferencia entre reescribir y redirigir es que el servidor presentará la URI reescrita sin informar al navegador. Por ejemplo, la URI mostrará que la extensión del archivo es .png, pero, en verdad, será un archivo .webp. Añada RewriteRule al archivo:

      /var/www/html/webp/.htaccess

      ...
      RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R] 
      

      En este momento, la sección mod_rewrite del archivo .htaccess está completa. Pero, ¿qué sucederá si hay un servidor de caché entre su servidor y el cliente? Podría presentar la versión equivocada al usuario final. Por eso, es recomendable comprobar si mod_headers está habilitado, para enviar el encabezado Vary: Accept. El encabezado Vary indica a los servidores de caché (como los servidores proxy), que el tipo de contenido del documento varía dependiendo de las capacidades del navegador que solicita el documento. Además, la respuesta se generará según el encabezado Accept de la solicitud. Una solicitud con un encabezado Accept diferente puede recibir una respuesta distinta. Este encabezado es importante porque impide que las imágenes WebP en caché se presenten en navegadores no compatibles.

      /var/www/html/webp/.htaccess

      ...
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      

      Por último, al final del archivo .htaccess, establezca el tipo MIME de las imágenes .webp en image/webp usando la directiva AddType. Esto presentará las imágenes usando el tipo MIME adecuado:

      /var/www/html/webp/.htaccess

      ...
      AddType image/webp .webp
      

      Esta es la versión final de nuestro archivo .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On 
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$ 
        RewriteCond %{DOCUMENT_ROOT}%1.webp -f
        RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R] 
      </IfModule>
      
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      
      AddType image/webp .webp
      

      Nota: puede fusionar este .htaccess con otro archivo .htaccess, de haberlo. Si está usando WordPress, por ejemplo, debería copiar este archivo .htaccess y pegarlo en la parte superior del archivo existente.

      Vamos a poner en práctica lo que hicimos en este paso. Si siguió las instrucciones de los pasos anteriores, debería tener las imágenes logo.png y https://www.digitalocean.com/logo.webpen /var/www/html/webp. Vamos a usar una sencilla etiqueta para incluir logo.png en nuestra página web. Cree un nuevo archivo HTML para probar la configuración:

      • nano /var/www/html/webp/img.html

      Introduzca el siguiente código HTML en el archivo:

      /var/www/html/webp/img.html

      <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      

      Guarde y cierre el archivo.

      Cuando visite la página web usando Chrome en http://your_server_ip/webp/img.html, notará que la imagen presentada es la versión .webp (intente abrir la imagen en una nueva pestaña). Si utiliza Firefox, obtendrá una imagen .png automáticamente.

      Conclusión

      En este tutorial, cubrimos técnicas básicas para trabajar con imágenes WebP. Explicamos cómo usar cwebp para convertir archivos, así como dos opciones para presentar estas imágenes a los usuarios: el elemento de HTML5 <picture> y mod_rewrite de Apache.

      Para personalizar las secuencias de comandos de este tutorial, puede consultar algunos de los siguientes recursos:

      • Para obtener más información sobre las características del formato WebP y cómo usar las herramientas de conversión, consulte la documentación de WebP.
      • Para conocer más detalles sobre el uso del elemento<picture>, consulte su documentación en MDN.
      • Para entender plenamente cómo usar mod_rewrite, consulte su documentación.

      Usar el formato WebP para sus imágenes reducirá considerablemente el tamaño de los archivos. Esto puede reducir el uso de ancho de banda y hacer que las páginas se carguen más rápido, sobre todo si su sitio web utiliza muchas imágenes.



      Source link