изображений Archives

Использование типа данных MySQL BLOB для хранения изображений с PHP в Ubuntu 18.04

Автор выбрал Girls Who Code для получения пожертвования в рамках программы Write for DOnations.

Введение

Большие двоичные объекты (BLOB) — это тип данных MySQL для хранения двоичных данных, таких как изображения, мультимедийные файлы и файлы PDF.

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

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

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

В этом обучающем модуле мы используем тип данных MySQL BLOB для сохранения изображений в коде PHP в Ubuntu 18.04.

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

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

Шаг 1 — Создание базы данных

Для начала создайте тестовую базу данных для своего проекта. Для этого подключитесь к серверу через SSH и запустите следующую команду для входа на сервер MySQL с привилегиями root:

Введите пароль пользователя root для вашей базы данных MySQL и нажмите ENTER, чтобы продолжить.

Затем запустите следующую команду для создания базы данных. В этом обучающем модуле мы назовем базу данных test_company:

CREATE DATABASE test_company;

После создания базы данных вы увидите следующее:

OutputQuery OK, 1 row affected (0.01 sec)

Затем создайте учетную запись test_user на сервере MySQL и обязательно замените PASSWORD на надежный пароль:

CREATE USER 'test_user'@'localhost' IDENTIFIED BY 'PASSWORD';

Вывод должен выглядеть так:

OutputQuery OK, 0 rows affected (0.01 sec)

Чтобы предоставить пользователю test_user полные права доступа к базе данных test_company, выполните команду:

GRANT ALL PRIVILEGES ON test_company.* TO 'test_user'@'localhost';

Вы должны увидеть следующее:

OutputQuery OK, 0 rows affected (0.01 sec)

Очистите таблицу прав доступа, чтобы СУБД MySQL перезагрузила разрешения:

На экран должно быть выведено следующее:

OutputQuery OK, 0 rows affected (0.01 sec)

Мы подготовили базу данных test_company и пользователя test_user. Теперь мы можем перейти к созданию таблицы products для сохранения образцов продуктов. Позднее мы используем эту таблицу для вставки и получения записей, чтобы продемонстрировать работу объектов MySQL BLOB.

Выполните выход из сервера MySQL:

Снова войдите в систему под учетными данными созданного пользователя test_user:

Введите в диалоге пароль пользователя test_user и нажмите ENTER, чтобы продолжить. Переключитесь на базу данных test_company с помощью следующей команды:

После выбора базы данных test_company MySQL выведет на экран следующее:

OutputDatabase changed

Затем создайте таблицу products, запустив команду:

CREATE TABLE `products` (product_id BIGINT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(50), price DOUBLE, product_image BLOB) ENGINE = InnoDB;

Эта команда создает таблицу с именем products. В таблице имеется четыре столбца:

product_id: в этом столбце используется тип данных BIGINT, за счет чего обеспечивается поддержка больших списков продуктов, где может содержаться до 2⁶³-1 элементов. Вы пометили столбец как PRIMARY KEY для уникальной идентификации продуктов. Чтобы MySQL обрабатывала генерирование новых идентификаторов для вставленных столбцов, вы использовали ключевое слово AUTO_INCREMENT.
product_name: в этом столбце хранятся названия продуктов. Мы использовали тип данных VARCHAR, поскольку это поле обычно обрабатывает не более 50 бувенно-числовых символов. Предел в 50 символов — это гипотетическое значение, используемое для целей этого обучающего модуля.
price: для демонстрационных целей мы добавили в таблицу products столбец price для хранения информации о розничной цене продуктов. Поскольку некоторые продукты могут иметь значения с плавающей запятой (например, 23.69, 45.36, 102.99), мы использовали тип данных DOUBLE.
product_image: в этом столбце данные типа BLOB используются для хранения двоичных данных изображений продуктов.

Мы использовали для таблицы InnoDB, СИСТЕМУ ХРАНЕНИЯ, поддерживающую широкий набор функций, включая транзакции MySQL. После выполнения этой команды для создания таблицы products вы увидите на экране следующее:

OutputQuery OK, 0 rows affected (0.03 sec)

Выполните выход с сервера MySQL:

Вы увидите следующее

OutputBye

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

`Шаг 2 — Создание скриптов PHP для подключения к базе данных и ее заполнения`

На этом шаге мы создадим скрипт PHP для подключения к базе данных MySQL, созданной нами на шаге 1. Этот скрипт подготовит три образца продуктов и вставит их в таблицу products.

Для создания кода PHP откройте новый файл в текстовом редакторе:

sudo nano /var/www/html/config.php

Введите в файл следующую информацию и замените PASSWORD паролем пользователя test_user, созданным на шаге 1:

/var/www/html/config.php

<?php

define('DB_NAME', 'test_company');
define('DB_USER', 'test_user');
define('DB_PASSWORD', 'PASSWORD');
define('DB_HOST', 'localhost');

$pdo = new PDO("mysql:host=" . DB_HOST . "; dbname=" . DB_NAME, DB_USER, DB_PASSWORD);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

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

В этом файле мы использовали четыре константы PHP для подключения к базе данных MySQL, созданной на шаге 1:

DB_NAME : эта константа хранит название базы данных test_company.
DB_USER : эта переменная хранит имя пользователя test_user.
DB_PASSWORD : эта константа хранит ПАРОЛЬ MySQL для учетной записи test_user.
DB_HOST: сервер, где располагается база данных. В данном случае мы используем сервер localhost.

Следующая строка в вашем файле инициирует объект данных PHP (PDO) и выполняет подключение к базе данных MySQL:

...
$pdo = new PDO("mysql:host=" . DB_HOST . "; dbname=" . DB_NAME, DB_USER, DB_PASSWORD);
...

Ближе к концу файла мы зададим пару атрибутов PDO:

ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION: этот атрибут предписывает PDO выдать исключение, которое можно зарегистрировать для целей отладки.
ATTR_EMULATE_PREPARES, false: эта опция повышает безопасности, предписывая СУБД MySQL выполнять подготовку вместо PDO.

Мы добавим файл /var/www/html/config.php в два скрипта PHP для вставки и получения записей, которые мы сейчас создадим.

Вначале создайте скрипт PHP /var/www/html/insert_products.php для вставки записей в таблицу products:

sudo nano /var/www/html/insert_products.php

Затем добавьте следующую информацию в файл /var/www/html/insert_products.php:

/var/www/html/insert_products.php

<?php

require_once 'config.php';

$products = [];

$products[] = [
              'product_name' => 'VIRTUAL SERVERS',
              'price' => 5,
              'product_image' => file_get_contents("https://i.imgur.com/VEIKbp0.png")
              ];

$products[] = [
              'product_name' => 'MANAGED KUBERNETES',
              'price' => 30,
              'product_image' => file_get_contents("https://i.imgur.com/cCc9Gw9.png")
              ];

$products[] = [
              'product_name' => 'MySQL DATABASES',
              'price' => 15,
              'product_image' => file_get_contents("https://i.imgur.com/UYcHkKD.png" )
              ];

$sql = "INSERT INTO products(product_name, price, product_image) VALUES (:product_name, :price, :product_image)";

foreach ($products as $product) {
    $stmt = $pdo->prepare($sql);
    $stmt->execute($product);
}

echo "Records inserted successfully";

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

Вы добавили файл config.php в верхней части файла. Это первый файл, который вы создали для определения переменных базы данных и подключения к базе данных. Также этот файл инициирует объект PDO и сохраняет его в переменной $pdo.

Далее вы создали массив данных о продуктах, которые нужно вставить в базу данных. Помимо значений product_name и price, подготовленных в виде текстовых и числовых значений соответственно, данный скрипт использует встроенную функцию PHP file_get_contents для чтения изображений из внешнего источника и передачи их в виде строк в столбец product_image.

Затем вы подготовили выражение SQL и использовали выражение PHP foreach{...} для вставки каждого продукта в базу данных.

Для выполнения файла /var/www/html/insert_products.php запустите его в окне браузера, используя следующий URL. Замените your-server-IP публичным IP-адресом вашего сервера:

http://your-server-IP/insert_products.php

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

Вы успешно вставили три записи с изображениями продуктов в таблицу products. На следующем шаге мы создадим скрипт PHP для извлечения этих записей и их вывода в браузере.

`Шаг 3 — Отображение информации о продуктах из базы данных MySQL`

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

Для создания файла введите следующее:

sudo nano /var/www/html/display_products.php

Затем введите в файл следующую информацию:

/var/www/html/display_products.php

<html>
  <title>Using BLOB and MySQL</title>
  <body>

  <?php

  require_once 'config.php';

  $sql = "SELECT * FROM products";
  $stmt = $pdo->prepare($sql);
  $stmt->execute();
  ?>

  <table border="1" align = 'center'> <caption>Products Database</caption>
    <tr>
      <th>Product Id</th>
      <th>Product Name</th>
      <th>Price</th>
      <th>Product Image</th>
    </tr>

  <?php
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      echo '<tr>';
      echo '<td>' . $row['product_id'] . '</td>';
      echo '<td>' . $row['product_name'] . '</td>';
      echo '<td>' . $row['price'] . '</td>';
      echo '<td>' .
      '<img src = "data:image/png;base64,' . base64_encode($row['product_image']) . '" width = "50px" height = "50px"/>'
      . '</td>';
      echo '</tr>';
  }
  ?>

  </table>
  </body>
</html>

Сохраните изменения в файле и закройте его.

Здесь мы опять использовали файл config.php для подключения к базе данных. Затем мы подготовили и выполнили команду SQL, используя PDO для извлечения всех элементов из таблицы products с помощью команды SELECT * FROM products.

Затем мы создали таблицу HTML и заполнили ее данными о продуктах, используя выражение PHP while() {...}. Строка $row = $stmt->fetch(PDO::FETCH_ASSOC) отправляет запрос в базу данных и сохраняет результат в переменной $row как многомерный массив, который затем отображается как столбец таблицы HTML с использованием синтаксиса $row['column_name'].

Изображения из столбца product_image заключены в теги <img src = "">. Мы использовали атрибуты width и height для уменьшения ширины и высоты изображений, чтобы они поместились в столбце таблицы HTML.

Чтобы конвертировать данные, хранящиеся в объекте типа BLOB, обратно в изображения, мы использовали встроенную функцию PHP base64_encode и следующий синтаксис схемы URI данных:

data:media_type;base64, base_64_encoded_data

В данном случае image/png — это значение параметра media_type (тип файла), а закодированная строка Base64 из столбца product_image — это данные base_64_encoded_data.

Выполните в браузере файл display_products.php, введя следующий адрес:

http://your-server-IP/display_products.php

Запустив в браузере файл display_products.php, вы увидите таблицу HTML со списком продуктов и связанных с ними изображений.

Это подтверждает, что скрипт PHP для извлечения изображений из базы данных MySQL работает ожидаемым образом.

`Заключение`

В этом обучающем модуле мы использовали тип данных MySQL BLOB для хранения и вывода изображений в коде PHP в Ubuntu 18.04. Мы увидели основные преимущества хранения изображений в базе данных по сравнению с их хранением в файловой системе. В число этих преимуществ входят портативность, безопасность и удобство резервного копирования. Эта технология будет вам полезна, если вы создаете приложение, для которого требуется хранить информацию и изображения вместе, например, студенческий портал или базу данных сотрудников.

Дополнительную информацию о поддерживаемых типах данных в MySQL можно найти в руководстве по типам данных MySQL. Если вас интересуют дополнительные материалы по MySQL и PHP, пройдите следующие обучающие модули:

Source link

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

hassan latif
blog

Автор выбрал фонд 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: