Все команды под root.
Добавление в nginx поддержки сжатия brotli.
Включаем в конфигурации использование собранных модулей.
Устанавливаем консольную утилиту для конвертации картинок в webp
Оригинал:https://www.digitalocean.com/community...ur-website
В оригинале есть как настроить для Ubuntu и Rewrite для Apache через .htaccess
Для случаев, когда используется оригинальное имя картинки, требуется изменение в формировании webp_path.
Например, в одну директорию заливают photo.jpeg и photo.png разного содержания, на выходе получается photo.webp для png, а картики в jpeg как будто и не было. Скрипты и настройки ниже делались для проекта с уникальными названиями картинок.
Устанавливаем утилиту для отслеживания изменений файлов и настраиваем сервис конвертации и сжатия
Добавляем в конфигурацию nginx поддержку webp.
Добавление в nginx поддержки сжатия brotli.
yum install brotli #Сборка динамических модулей для NGINX https://serverdiary.com/linux/how-to-install-and-configure-nginx-brotli/ nginx -V wget http://nginx.org/download/nginx-1.16.1.tar.gz tar zxvf nginx-1.16.1.tar.gz git clone https://github.com/google/ngx_brotli.git cd ngx_brotli/ git submodule update --init cd ../nginx-1.16.1 yum groupinstall 'Development Tools' -y yum install gcc-c++ flex bison yajl yajl-devel curl-devel curl GeoIP-devel doxygen zlib-devel yum install lmdb lmdb-devel libxml2 libxml2-devel ssdeep ssdeep-devel lua lua-devel yum install pcre-devel yum install openssl-devel ./configure --add-dynamic-module=../ngx_brotli ...сюда копируем опции сборки из вывода nginx -V... make modules cp objs/ngx_http_brotli_static_module.so /etc/nginx/modules cp objs/ngx_http_brotli_filter_module.so /etc/nginx/modules chmod 644 /etc/nginx/modules/ngx_http_brotli_static_module.so chmod 644 /etc/nginx/modules/ngx_http_brotli_filter_module.so |
Включаем в конфигурации использование собранных модулей.
vi /etc/nginx/nginx.conf ...... error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; load_module modules/ngx_http_brotli_filter_module.so; load_module modules/ngx_http_brotli_static_module.so; ...... server { ....... ....... brotli on; brotli_static on; # for static compression brotli_comp_level 6; # this setting can vary from 1-11 brotli_types text/xml image/svg+xml application/x-font-ttf image/vnd.microsoft.icon application/x-font-opentype application/json font/eot application/vnd.ms-fontobject application/javascript font/otf application/xml application/xhtml+xml text/javascript application/x-javascript text/plain application/x-font-truetype application/xml+rss image/x-icon font/opentype text/css image/x-win-bitmap; gzip on; ....... ....... } ....... nginx -t nginx -s reload |
Устанавливаем консольную утилиту для конвертации картинок в webp
Оригинал:
В оригинале есть как настроить для Ubuntu и Rewrite для Apache через .htaccess
Для случаев, когда используется оригинальное имя картинки, требуется изменение в формировании webp_path.
Например, в одну директорию заливают photo.jpeg и photo.png разного содержания, на выходе получается photo.webp для png, а картики в jpeg как будто и не было. Скрипты и настройки ниже делались для проекта с уникальными названиями картинок.
yum install libwebp-tools vi ~/webp-convert.sh # Содержимое ~/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"; jpg_size=$(wc -c "$0" | cut -d " " -f 1); webp_size=$(wc -c "$webp_path" | cut -d " " -f 1); if [ $jpg_size -lt $webp_size ]; then if [ -f "$webp_path" ]; then $(rm -f "$webp_path"); fi; fi; 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"; png_size=$(wc -c "$0" | cut -d " " -f 1); webp_size=$(wc -c "$webp_path" | cut -d " " -f 1); if [ $png_size -lt $webp_size ]; then if [ -f "$webp_path" ]; then $(rm -f "$webp_path"); fi; fi; fi;' {} \; chmod a+x ~/webp-convert.sh /var/www/www-root/data/webp-convert.sh /var/www/www-root/data/www/example.ru/upload |
Устанавливаем утилиту для отслеживания изменений файлов и настраиваем сервис конвертации и сжатия
yum install epel-release yum install inotify-tools vi /etc/webp_convert.conf # Содержимое /etc/webp_convert.conf MONITOR=/var/www/www-root/data/www/example.ru/ # Пустой файл convert_webp.log создавался заранее. LOG_FILE=/var/www/www-root/data/www/example.ru/logs/convert_webp.log WEB_SERVER_USER=www-root:www-root # Изначально сервис конвертировал картинки в webp. # Позже было добавлено сжатие brotli, а название сервиса не поменялось. vi /etc/rc.d/init.d/webp_convert.sh # Содержимое /etc/rc.d/init.d/webp_convert.sh #!/bin/bash # webp_convert: Start/Stop convertation images to webp # # chkconfig: - 80 20 # description: use inotifywait for track and convert images to webp. # # processname: webp_convert . /etc/rc.d/init.d/functions . /etc/webp_convert.conf LOCK=/var/lock/subsys/webp_convert RETVAL=0 watching() { /usr/bin/inotifywait \ -q -m -r --format '%e %w%f' \ -s $LOG_FILE \ -e close_write -e moved_from -e moved_to -e delete $MONITOR \ | grep -i -E '\.(jpe?g|png|js|css)$' --line-buffered \ | while read operation path; do ts=$(date +"%C%y%m%d%H%M%S") echo "$ts :: $operation :: $path" >> $LOG_FILE; webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")"; brotli_path="${path}.br"; if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted if [ $(grep -i -E '\.(css|js)$' <<< "$path") ]; then if [ -f "$brotli_path" ]; then $(rm -f "$brotli_path"); fi; else if [ -f "$webp_path" ]; then $(rm -f "$webp_path"); fi; 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"); $(chown "$WEB_SERVER_USER" "$webp_path"); png_size=$(wc -c "$path" | cut -d " " -f 1); webp_size=$(wc -c "$webp_path" | cut -d " " -f 1); if [ $png_size -lt $webp_size ]; then if [ -f "$webp_path" ]; then $(rm -f "$webp_path"); fi; fi; elif [ $(grep -i -E '\.(css|js)$' <<< "$path") ]; then $(brotli -q 11 -k -f "$path"); $(chown "$WEB_SERVER_USER" "$brotli_path"); else $(cwebp -quiet -q 90 "$path" -o "$webp_path"); $(chown "$WEB_SERVER_USER" "$webp_path"); jpg_size=$(wc -c "$path" | cut -d " " -f 1); webp_size=$(wc -c "$webp_path" | cut -d " " -f 1); if [ $jpg_size -lt $webp_size ]; then if [ -f "$webp_path" ]; then $(rm -f "$webp_path"); fi; fi; fi; fi; done; } start() { start_date=$(date +"%C%y%m%d%H%M%S"); echo "$start_date :: Setting up watches." >> $LOG_FILE; echo "Wathing dir: $MONITOR"; echo "Log to file: $LOG_FILE"; echo "Apache user: $WEB_SERVER_USER"; echo "Starting inotifywait for webp_convert..."; watching & status inotifywait RETVAL=$? [ $RETVAL -eq 0 ] && touch $LOCK return $RETVAL } stop() { echo -n $"Stopping inotifywait and webp_convert: " killproc inotifywait RETVAL=$? echo [ $RETVAL -eq 0 ] && rm -f $LOCK return $RETVAL } case "$1" in start) start ;; stop) stop ;; status) status inotifywait ;; restart) stop start ;; *) echo $"Usage: $0 {start|stop|status|restart}" exit 1 esac exit $? chmod a+x /etc/rc.d/init.d/webp_convert.sh # По умолчанию количество watches 8192, что не хватит для работы # Устанавливаем максимальное количество watches 524288, но помним, что один watch забирает 1Кб ОЗУ. # Для 524288 потребуется 512 мегабайт оперативной памяти. # https://askubuntu.com/questions/154255/how-can-i-tell-if-i-am-out-of-inotify-watches echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p /etc/rc.d/init.d/webp_convert start chkconfig --add webp_convert chkconfig webp_convert on |
Добавляем в конфигурацию nginx поддержку webp.
# https://alexey.detr.us/en/posts/2018/2018-08-20-webp-nginx-with-fallback/ http { # ... map $http_accept $webp_ext { default ""; "~image\/webp" ".webp"; } map $uri $file_ext { default ""; "~(\.\w+)$" $1; } # ... } server { # ... location ~* "^(?<path>.+)\.(png|jpeg|jpg|gif)$" { try_files $path$webp_ext $path$file_ext =404; } # ... } # В файл /etc/nginx/mime.types добавить строку image/webp webp; nginx -t nginx -s reload |