Nội dung
- Yêu cầu - Bước 1 - Cài đặt cwebp và chuẩn bị folder hình ảnh - Bước 2 - Nén file hình ảnh bằng cwebp - Bước 3 - Chuyển đổi hình ảnh JPEG và PNG trong một folder - Bước 4 - Xem các file hình ảnh trong folder - Bước 5 - Cung cấp hình ảnh WebP cho khách truy cập bằng phần tử HTML - Bước 6 - Cung cấp Hình ảnh WebP bằng mod_rewrite - Kết luận

Thứ sáu, 13/04/2018 | 00:00 GMT+7

Cách tạo và cung cấp image WebP để tăng tốc trang web của bạn

WebP là một định dạng hình ảnh mở được Google phát triển vào năm 2010 dựa trên định dạng video VP8. Kể từ đó, số lượng các trang web và ứng dụng di động sử dụng định dạng WebP đã phát triển với tốc độ nhanh chóng. Cả Google Chrome và Opera đều hỗ trợ định dạng WebP nguyên bản và vì các trình duyệt này chiếm khoảng 74% lưu lượng truy cập web, user có thể truy cập các trang web nhanh hơn nếu các trang web này sử dụng hình ảnh WebP. Ngoài ra còn có kế hoạch triển khai WebP trong Firefox .

Định dạng WebP hỗ trợ cả nén ảnh mất dữ liệu và không mất dữ liệu, bao gồm cả hoạt ảnh. Ưu điểm chính của nó so với các định dạng hình ảnh khác được sử dụng trên web là kích thước file nhỏ hơn nhiều, giúp trang web tải nhanh hơn và giảm sử dụng băng thông. Sử dụng hình ảnh WebP có thể dẫn đến tốc độ trang tăng lên đáng kể . Nếu ứng dụng hoặc trang web đang gặp vấn đề về hiệu suất hoặc lưu lượng truy cập tăng, việc chuyển đổi hình ảnh của bạn có thể giúp tối ưu hóa hiệu suất trang.

Trong hướng dẫn này, bạn sẽ sử dụng công cụ dòng lệnh cwebp để chuyển đổi hình ảnh sang định dạng WebP, tạo các tập lệnh sẽ xem và chuyển đổi hình ảnh trong một folder cụ thể. Cuối cùng, bạn sẽ khám phá hai cách để cung cấp hình ảnh WebP cho khách truy cập của bạn.

Yêu cầu

Làm việc với hình ảnh WebP không yêu cầu một bản phân phối cụ thể, nhưng ta sẽ trình bày cách làm việc với phần mềm có liên quan trên Ubuntu 16.04 và CentOS 7. Để làm theo hướng dẫn này, bạn cần :

Server được cài đặt với user sudo không phải root. Để cài đặt server Ubuntu 16.04, bạn có thể làm theo hướng dẫn cài đặt server ban đầu Ubuntu 16.04 của ta . Nếu bạn muốn sử dụng CentOS, bạn có thể cài đặt server CentOS 7 với hướng dẫn Cài đặt Server Ban đầu với CentOS 7 của ta .
Apache đã được cài đặt trên server của bạn. Nếu bạn đang sử dụng Ubuntu, bạn có thể làm theo bước một trong Cách cài đặt ngăn xếp Linux, Apache, MySQL, PHP (LAMP) trên Ubuntu 16.04 . Nếu bạn đang sử dụng CentOS, thì bạn nên làm theo bước một trong Cách cài đặt ngăn xếp Linux, Apache, MySQL, PHP (LAMP) trên CentOS 7 . Đảm bảo điều chỉnh cài đặt firewall của bạn để cho phép truy cập HTTP và HTTPS.
mod_rewrite được cài đặt trên server của bạn. Nếu bạn đang sử dụng Ubuntu, bạn có thể làm theo hướng dẫn của ta về Cách viết lại URL bằng mod_rewrite cho Apache trên Ubuntu 16.04 . Trên CentOS 7 mod_rewrite được cài đặt và kích hoạt theo mặc định.

Bước 1 - Cài đặt cwebp và chuẩn bị folder hình ảnh

Trong phần này, ta sẽ cài đặt phần mềm để chuyển đổi hình ảnh và tạo một folder với hình ảnh như một biện pháp thử nghiệm.

Trên Ubuntu 16.04, bạn có thể cài đặt cwebp , một tiện ích nén hình ảnh thành định dạng .webp , bằng lệnh :

sudo apt-get update 
sudo apt-get install webp

Trên CentOS 7, nhập:

sudo yum install libwebp-tools

Để tạo một folder hình ảnh mới có tên là webp trong folder root của web Apache (được đặt theo mặc định tại /var/www/html ), hãy nhập:

sudo mkdir /var/www/html/webp

Thay đổi quyền sở hữu của folder này thành sammy user không phải root của bạn:

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

Để kiểm tra các lệnh, bạn có thể download hình ảnh JPEG và PNG miễn phí bằng cách sử dụng wget . Công cụ này được cài đặt mặc định trên Ubuntu 16.04; nếu bạn đang sử dụng CentOS 7, bạn có thể cài đặt nó bằng lệnh :

sudo yum install wget

Tiếp theo, download các hình ảnh kiểm tra bằng các lệnh sau:

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

Lưu ý : Những hình ảnh này có sẵn để sử dụng và phân phối lại theo giấy phép Creative Commons Attribution-ShareAlike và Cống hiến trên domain công cộng .

Hầu hết công việc của bạn trong bước tiếp theo sẽ nằm trong folder /var/www/html/webp , bạn có thể chuyển đến bằng lệnh :

cd /var/www/html/webp

Với các hình ảnh thử nghiệm tại chỗ và web server Apache, mod_rewrite và cwebp được cài đặt, bạn đã sẵn sàng chuyển sang chuyển đổi hình ảnh.

Bước 2 - Nén file hình ảnh bằng cwebp

Cung cấp hình ảnh .webp cho khách truy cập trang web yêu cầu version .webp của file hình ảnh. Trong bước này, bạn sẽ chuyển đổi hình ảnh JPEG và PNG vào .webp định dạng sử dụng cwebp . Cú pháp chung của lệnh trông như sau:

cwebp image.jpg -o image.webp

Tùy chọn -o chỉ định đường dẫn đến file WebP.

Vì bạn vẫn ở trong folder /var/www/html/webp , bạn có thể chạy lệnh sau để chuyển đổi image1.jpg thành image1.webp và image2.jpg thành image2.webp :

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

Đặt hệ số chất lượng -q thành 100 sẽ giữ lại 100% chất lượng hình ảnh; nếu không được chỉ định, giá trị mặc định là 75.

Tiếp theo, kiểm tra kích thước của ảnh JPEG và WebP bằng ls . Tùy chọn -l sẽ hiển thị định dạng danh sách dài, bao gồm kích thước của file và tùy chọn -h sẽ đảm bảo ls in ra các kích thước con người có thể đọc được:

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

Kết quả của ls cho thấy kích thước của image1.jpg là 7.4M, trong khi kích thước của image1.webp là 3.9M. Tương tự với image2.jpg (16M) và image2.webp (7M). Những file này gần bằng một nửa kích thước ban đầu của chúng!

Để lưu toàn bộ, dữ liệu root của hình ảnh trong khi nén, bạn có thể sử dụng tùy chọn -lossless thay cho -q . Đây là tùy chọn tốt nhất để duy trì chất lượng của hình ảnh PNG. Để chuyển đổi hình ảnh PNG đã download từ bước 1, hãy nhập:

cwebp -lossless logo.png -o logo.webp

Lệnh sau cho thấy kích thước hình ảnh WebP không mất dữ liệu (60K) xấp xỉ một nửa kích thước của hình ảnh PNG root (116K):

ls -lh logo.png 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 logo.webp

Hình ảnh WebP được chuyển đổi trong folder /var/www/html/webp nhỏ hơn khoảng 50% so với các bản sao JPEG và PNG của chúng. Trên thực tế, tốc độ nén có thể khác nhau tùy thuộc vào các yếu tố nhất định: tốc độ nén của ảnh root , định dạng file , loại chuyển đổi (mất mát hoặc không mất dữ liệu), phần trăm chất lượng và hệ điều hành của bạn. Khi bạn chuyển đổi nhiều hình ảnh hơn, bạn có thể thấy các biến thể về tỷ lệ chuyển đổi liên quan đến các yếu tố này.

Bước 3 - Chuyển đổi hình ảnh JPEG và PNG trong một folder

Viết kịch bản sẽ đơn giản hóa quá trình chuyển đổi bằng cách loại bỏ công việc chuyển đổi thủ công. Bây giờ ta sẽ viết một kịch bản chuyển đổi để tìm các file JPEG và chuyển đổi chúng sang định dạng WebP với chất lượng 90%, đồng thời chuyển đổi file PNG sang hình ảnh WebP không mất dữ liệu.

Sử dụng nano hoặc editor bạn quen dùng , tạo tập lệnh webp-convert.sh trong folder chính của user :

nano ~/webp-convert.sh

Dòng đầu tiên của script sẽ giống như sau:

~ / webp-convert.sh

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

Dòng này có các thành phần sau:

find : Lệnh này sẽ tìm kiếm các file trong một folder cụ thể.
$1 : Tham số vị trí này chỉ định đường dẫn của folder images, được lấy từ dòng lệnh. Cuối cùng, nó làm cho vị trí của folder ít phụ thuộc vào vị trí của tập lệnh.
-type f : Tùy chọn này cho biết chỉ find kiếm các file thông thường.
-iname : Kiểm tra này khớp các tên file với một mẫu được chỉ định. Kiểm tra -iname không phân biệt chữ hoa chữ thường cho biết find kiếm bất kỳ tên file nào kết thúc bằng .jpg ( *.jpg ) hoặc .jpeg ( *.jpeg ).
-o : Toán tử logic này hướng dẫn lệnh find liệt kê các file phù hợp với kiểm tra -iname đầu tiên ( -iname "*.jpg" ) hoặc thứ hai ( -iname "*.jpeg" ).
() : Dấu ngoặc đơn xung quanh các phép thử này, cùng với toán tử -and , đảm bảo phép thử đầu tiên (tức là -type f ) luôn được thực hiện.

Dòng thứ hai của script sẽ chuyển đổi hình ảnh sang WebP bằng cách sử dụng tham số -exec . Cú pháp chung của tham số này là -exec command {} \; . Chuỗi {} được thay thế bởi từng file mà lệnh lặp qua, trong khi ; nói find nơi lệnh đầu:

~ / webp-convert.sh

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

Trong trường hợp này, tham số -exec sẽ yêu cầu nhiều hơn một lệnh để tìm kiếm và chuyển đổi hình ảnh:

bash : Lệnh này sẽ thực thi một tập lệnh nhỏ tạo ra version .webp của file nếu nó không tồn tại. Tập lệnh này sẽ được chuyển đến bash dưới dạng chuỗi nhờ tùy chọn -c .
'commands' : Trình giữ chỗ này là tập lệnh sẽ tạo các version .webp của file của bạn.

Tập lệnh bên trong 'commands' sẽ thực hiện những việc sau:

Tạo một biến webp_path .
Kiểm tra xem version .webp của file có tồn tại hay không.
Tạo file nếu nó không tồn tại.

Tập lệnh nhỏ hơn trông giống như sau:

~ / webp-convert.sh

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

Các phần tử trong tập lệnh nhỏ hơn này bao gồm:

webp_path : Biến này sẽ được tạo bằng cách sử dụng sed và tên file phù hợp từ lệnh bash , được biểu thị bằng tham số vị trí $0 . Một chuỗi ở đây ( <<< ) sẽ chuyển tên này cho sed .
if [ ! -f "$webp_path" ] : Kiểm tra này sẽ xác định xem file có tên "$webp_path" đã tồn tại hay chưa, sử dụng toán tử logic not ( ! ).
cwebp : Lệnh này sẽ tạo file nếu nó không tồn tại, sử dụng tùy chọn -q để không in kết quả .

Với tập lệnh nhỏ hơn này thay cho trình giữ chỗ 'commands' , tập lệnh đầy đủ để chuyển đổi hình ảnh JPEG bây giờ sẽ giống như sau:

~ / 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;' {} \;

Để chuyển đổi hình ảnh PNG sang WebP, ta sẽ thực hiện cùng một cách tiếp cận, với hai điểm khác biệt: Đầu tiên, mẫu -iname trong lệnh find sẽ là "*.png" . Thứ hai, lệnh chuyển đổi sẽ sử dụng tùy chọn -lossless thay vì tùy chọn chất lượng -q .

Tập lệnh đã hoàn thành trông như thế này:

~ / 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;' {} \;

Lưu file và thoát khỏi editor .

Tiếp theo, hãy đưa tập lệnh webp-convert.sh vào thực tế bằng cách sử dụng các file trong folder /var/www/html/webp . Đảm bảo rằng file script có thể thực thi được bằng cách chạy lệnh sau:

chmod a+x ~/webp-convert.sh

Chạy tập lệnh trên folder hình ảnh:

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

Không có chuyện gì xảy ra! Đó là bởi vì ta đã chuyển đổi những hình ảnh này ở bước 2. Về sau, tập lệnh webp-convert sẽ chuyển đổi hình ảnh khi ta thêm file mới hoặc xóa version .webp . Để xem cách này hoạt động, hãy xóa các file .webp mà ta đã tạo ở bước 2:

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

Sau khi xóa tất cả các hình ảnh .webp , hãy chạy lại tập lệnh đảm bảo nó hoạt động:

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

Lệnh ls sẽ xác nhận tập lệnh đã chuyển đổi hình ảnh thành công:

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 logo.webp

Tập lệnh trong bước này là nền tảng của việc sử dụng hình ảnh WebP trong trang web , vì bạn cần một version hoạt động của tất cả hình ảnh ở định dạng WebP để phục vụ khách truy cập. Bước tiếp theo sẽ bao gồm cách tự động chuyển đổi hình ảnh mới.

Bước 4 - Xem các file hình ảnh trong folder

Trong bước này, ta sẽ tạo một tập lệnh mới để xem folder hình ảnh của ta để biết các thay đổi và tự động chuyển đổi các hình ảnh mới được tạo.

Việc tạo một tập lệnh theo dõi folder hình ảnh của ta có thể giải quyết một số vấn đề với tập lệnh webp-convert.sh khi nó được viết. Ví dụ: tập lệnh này sẽ không xác định nếu ta đã đổi tên một hình ảnh. Nếu ta có một hình ảnh được gọi là foo.jpg , chạy webp-convert.sh , đổi tên file đó là bar.jpg và sau đó chạy lại webp-convert.sh , ta sẽ có các file .webp trùng lặp ( foo.webp và bar.webp ) . Để giải quyết vấn đề này và để tránh chạy tập lệnh theo cách thủ công, ta sẽ thêm người theo dõi vào tập lệnh khác. Người theo dõi xem các file hoặc folder được chỉ định để biết các thay đổi và chạy các lệnh để đáp ứng các thay đổi đó.

Lệnh inotifywait sẽ cài đặt các trình theo dõi trong tập lệnh của ta . Lệnh này là một phần của gói inotify-tools , một tập hợp các công cụ dòng lệnh cung cấp giao diện đơn giản cho hệ thống con kernel inotify. Để cài đặt nó trên Ubuntu 16.04, hãy gõ:

sudo apt-get install inotify-tools

Với CentOS 7, gói inotify-tools có sẵn trên kho EPEL. Cài đặt kho EPEL và gói inotify-tools bằng các lệnh sau:

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

Tiếp theo, tạo tập lệnh webp-watchers.sh trong folder chính của user của bạn bằng nano :

nano ~/webp-watchers.sh

Dòng đầu tiên trong script sẽ giống như sau:

~ / webp-watchers.sh

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

Dòng này bao gồm các yếu tố sau:

inotifywait : Lệnh này theo dõi các thay đổi đối với một folder nhất định.
-q : Tùy chọn này sẽ cho inotifywait biết im lặng và không tạo ra nhiều kết quả .
-m : Tùy chọn này sẽ inotifywait chạy vô thời hạn và không thoát sau khi nhận được một sự kiện.
-r : Tùy chọn này sẽ cài đặt đệ quy người theo dõi, xem một folder được chỉ định và tất cả các folder con của nó.
--format : Tùy chọn này yêu cầu inotifywait giám sát các thay đổi bằng cách sử dụng tên sự kiện theo sau là đường dẫn file . Các sự kiện ta muốn theo dõi là close_write (được kích hoạt khi file được tạo và ghi hoàn toàn vào đĩa), moved_from và moved_to (được kích hoạt khi file được di chuyển) và delete (được kích hoạt khi file bị xóa).
$1 : Tham số vị trí này giữ đường dẫn của các file đã thay đổi.

Tiếp theo, hãy thêm grep để xác định file của ta có phải là ảnh JPEG hay PNG hay không. Các -i tùy chọn sẽ cho grep để bỏ qua trường hợp, -E sẽ xác định rằng grep nên sử dụng mở rộng biểu thức thông thường, và --line-buffered sẽ cho grep để vượt qua các dòng phù hợp với một while vòng lặp:

~ / 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

Tiếp theo, ta sẽ xây dựng một while vòng lặp với read lệnh. read sẽ xử lý sự kiện mà inotifywait đã phát hiện, gán nó cho một biến có tên là $operation và đường dẫn file đã xử lý cho một biến có tên $path :

~ / webp-watchers.sh

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

Hãy kết hợp vòng lặp này với phần còn lại của tập lệnh của ta :

~ / 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;

Sau while vòng lặp while đã kiểm tra sự kiện, các lệnh bên trong vòng lặp sẽ thực hiện các hành động sau, tùy thuộc vào kết quả:

Tạo file WebP mới nếu file hình ảnh mới được tạo hoặc chuyển đến folder đích.
Xóa file WebP nếu file hình ảnh liên quan đã bị xóa hoặc di chuyển khỏi folder đích.

Có ba phần chính bên trong vòng lặp. Một biến có tên là webp_path sẽ giữ đường dẫn đến version .webp của hình ảnh chủ đề:

~ / webp-watchers.sh

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

Tiếp theo, tập lệnh sẽ kiểm tra sự kiện nào đã xảy ra:

~ / 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;

Nếu file đã bị di chuyển hoặc bị xóa, tập lệnh sẽ kiểm tra xem version .webp có tồn tại hay không. Nếu có, script sẽ xóa nó bằng cách sử dụng rm :

~ / webp-watchers.sh

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

Đối với các file mới được tạo, quá trình nén sẽ diễn ra như sau:

Nếu file phù hợp là hình ảnh PNG, tập lệnh sẽ sử dụng tính năng nén không mất dữ liệu.
Nếu không, tập lệnh sẽ sử dụng tính năng nén mất dữ liệu với tùy chọn -quality .

Hãy thêm các lệnh cwebp sẽ thực hiện công việc này vào tập lệnh:

~ / 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;

Toàn bộ, file webp-watchers.sh sẽ giống như sau:

~ / 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;

Lưu và đóng file . Đừng quên làm cho nó có thể thực thi:

chmod a+x ~/webp-watchers.sh

Hãy chạy tập lệnh này trên folder /var/www/html/webp ở chế độ nền, sử dụng & . Cũng hãy chuyển hướng kết quả tiêu chuẩn và lỗi tiêu chuẩn đến ~/output.log , để lưu trữ kết quả ở một vị trí sẵn có:

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

Đến đây, bạn đã chuyển đổi các file JPEG và PNG trong /var/www/html/webp sang định dạng WebP và cài đặt người theo dõi để thực hiện công việc này bằng cách sử dụng tập lệnh webp-watchers.sh . Bây giờ là lúc để khám phá các tùy chọn để cung cấp hình ảnh WebP cho khách truy cập trang web .

Bước 5 - Cung cấp hình ảnh WebP cho khách truy cập bằng phần tử HTML

Trong bước này, ta sẽ giải thích cách cung cấp hình ảnh WebP với các phần tử HTML. Đến đây, sẽ có version .webp của mỗi hình ảnh JPEG và PNG thử nghiệm trong folder /var/www/html/webp . Như vậy, ta có thể phân phát chúng cho các trình duyệt hỗ trợ bằng cách sử dụng các phần tử HTML5 ( <picture> ) hoặc module mod_rewrite Apache. Ta sẽ sử dụng các phần tử HTML trong bước này.

Phần tử <picture> cho phép bạn đưa hình ảnh trực tiếp vào các trang web của bạn và xác định nhiều nguồn hình ảnh. Nếu trình duyệt của bạn hỗ trợ định dạng WebP, trình duyệt sẽ download version .webp của file thay vì version root , dẫn đến các trang web được phục vụ nhanh hơn. Điều đáng nói là phần tử <picture> được hỗ trợ tốt trong các trình duyệt hiện đại hỗ trợ định dạng WebP.

Phần tử <picture> là một containers với các phần tử <source> và <img> trỏ đến các file cụ thể. Nếu ta sử dụng <source> để trỏ đến hình ảnh .webp , trình duyệt sẽ xem nó có xử lý được không; nếu không, nó sẽ trở lại file hình ảnh được chỉ định trong thuộc tính src trong phần tử <img> .

Hãy sử dụng file logo.png từ folder /var/www/html/webp mà ta đã chuyển đổi thành logo.webp , làm ví dụ với <source> . Ta có thể sử dụng mã HTML sau để hiển thị logo.webp cho bất kỳ trình duyệt nào hỗ trợ định dạng WebP và logo.png cho bất kỳ trình duyệt nào không hỗ trợ WebP hoặc phần tử <picture> .

Tạo file HTML tại /var/www/html/webp/picture.html :

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

Thêm mã sau vào trang web để hiển thị logo.webp tới các trình duyệt hỗ trợ bằng cách sử dụng phần tử <picture> :

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

<picture>   <source srcset="logo.webp" type="image/webp">   <img src="logo.png" alt="Site Logo"> </picture>

Lưu và đóng file .

Để kiểm tra xem mọi thứ đang hoạt động, hãy chuyển đến http:// your_server_ip /webp/picture.html . Bạn sẽ thấy hình ảnh PNG thử nghiệm.

Đến đây bạn đã biết cách cung .webp hình ảnh .webp trực tiếp từ mã HTML, hãy xem cách tự động hóa quá trình này bằng cách sử dụng module mod_rewrite của Apache.

Bước 6 - Cung cấp Hình ảnh WebP bằng mod_rewrite

Nếu ta muốn tối ưu hóa tốc độ trang web của bạn , nhưng có một số lượng lớn trang hoặc quá ít thời gian để chỉnh sửa mã HTML, thì module mod_rewrite của Apache có thể giúp ta tự động hóa quá trình cung cấp hình ảnh .webp cho các trình duyệt hỗ trợ.

Đầu tiên, tạo .htaccess trong folder /var/www/html/webp bằng lệnh sau:

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

Chỉ thị ifModule sẽ kiểm tra xem có sẵn mod_rewrite ; nếu có, nó có thể được kích hoạt bằng cách sử dụng RewriteEngine On . Thêm các lệnh này vào .htaccess :

/var/www/html/webp/.htaccess

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

Web server sẽ thực hiện một số thử nghiệm để cài đặt thời điểm cung .webp hình ảnh .webp cho user . Khi trình duyệt đưa ra một yêu cầu, nó sẽ bao gồm một tiêu đề để chỉ ra cho server biết trình duyệt có khả năng xử lý những gì. Trong trường hợp của WebP, trình duyệt sẽ gửi tiêu đề Accept có chứa image/webp . Ta sẽ kiểm tra xem trình duyệt có gửi tiêu đề đó bằng RewriteCond , điều này chỉ định các tiêu chí cần phù hợp để thực hiện Luật RewriteRule :

/var/www/html/webp/.htaccess

... RewriteCond %{HTTP_ACCEPT} image/webp

Mọi thứ nên được lọc ra trừ hình ảnh JPEG và PNG. Sử dụng lại RewriteCond , thêm một biểu thức chính quy (tương tự như những gì ta đã sử dụng trong các phần trước) để trùng với URI được yêu cầu:

/var/www/html/webp/.htaccess

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

Bổ ngữ (?i) sẽ làm cho đối sánh không phân biệt chữ hoa chữ thường.

Để kiểm tra xem version .webp của file có tồn tại hay không, hãy sử dụng lại RewriteCond như sau:

/var/www/html/webp/.htaccess

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

Cuối cùng, nếu tất cả các điều kiện trước đó được đáp ứng, RewriteRule sẽ chuyển hướng file JPEG hoặc PNG được yêu cầu đến file WebP được liên kết của nó. Lưu ý điều này sẽ chuyển hướng bằng cách sử dụng cờ -R , thay vì viết lại URI. Sự khác biệt giữa viết lại và chuyển hướng là server sẽ phục vụ URI được viết lại mà không cần thông báo cho trình duyệt. Ví dụ: URI sẽ hiển thị rằng phần mở rộng của file là .png , nhưng nó thực sự sẽ là file .webp . Thêm RewriteRule vào file :

/var/www/html/webp/.htaccess

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

Đến đây, phần mod_rewrite trong .htaccess đã hoàn tất. Nhưng điều gì sẽ xảy ra nếu có một server lưu trữ trung gian giữa server của bạn và client ? Nó có thể cung cấp version sai cho user cuối. Đó là lý do tại sao cần kiểm tra xem mod_headers có được bật hay không, để gửi tiêu đề Vary: Accept . Tiêu đề Vary cho biết với các server lưu trong bộ nhớ đệm (như server proxy) rằng loại nội dung của tài liệu thay đổi tùy thuộc vào khả năng của trình duyệt yêu cầu tài liệu. Hơn nữa, phản hồi sẽ được tạo dựa trên tiêu đề Accept trong yêu cầu. Yêu cầu có tiêu đề Accept khác có thể nhận được phản hồi khác. Tiêu đề này quan trọng vì nó ngăn không cho hình ảnh WebP được lưu trong bộ nhớ cache được phân phát tới các trình duyệt không hỗ trợ:

/var/www/html/webp/.htaccess

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

Cuối cùng, ở cuối .htaccess , hãy đặt kiểu MIME của các hình ảnh .webp thành image/webp bằng cách sử dụng lệnh AddType . Điều này sẽ phân phát hình ảnh bằng loại MIME phù hợp:

/var/www/html/webp/.htaccess

... AddType image/webp .webp

Đây là version cuối cùng của .htaccess của ta :

/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

Lưu ý : Bạn có thể hợp nhất .htaccess này với một .htaccess khác, nếu nó tồn tại. Ví dụ: nếu bạn đang sử dụng WordPress, bạn nên sao chép .htaccess này và dán nó vào đầu file hiện có.

Hãy đưa những gì ta đã làm trong bước này vào thực tế. Nếu bạn đã làm theo hướng dẫn ở các bước trước, bạn sẽ có hình ảnh logo.png và logo.webp trong /var/www/html/webp . Hãy sử dụng <img> đơn giản để đưa logo.png vào trang web của ta . Tạo một file HTML mới để kiểm tra cài đặt :

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

Nhập mã HTML sau vào file :

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

<img src="logo.png" alt="Site Logo">

Lưu và đóng file .

Khi bạn truy cập trang web bằng Chrome bằng cách truy cập http:// your_server_ip /webp/img.html , bạn sẽ nhận thấy rằng hình ảnh được cung cấp là version .webp (hãy thử mở hình ảnh trong một tab mới). Nếu bạn sử dụng Firefox, bạn sẽ tự động nhận được hình ảnh .png .

Kết luận

Trong hướng dẫn này, ta đã đề cập đến các kỹ thuật cơ bản để làm việc với hình ảnh WebP. Ta đã giải thích cách sử dụng cwebp để chuyển đổi file , cũng như hai tùy chọn để cung cấp những hình ảnh này cho user : phần tử <picture> của HTML5 và mod_rewrite của Apache.

Để tùy chỉnh các tập lệnh từ hướng dẫn này, bạn có thể xem một số tài nguyên sau:

Để tìm hiểu thêm về các tính năng của định dạng WebP và cách sử dụng các công cụ chuyển đổi, hãy xem tài liệu WebP .
Để xem thêm chi tiết về cách sử dụng phần tử <picture> , hãy xem tài liệu của nó trên MDN .
Để hiểu đầy đủ cách sử dụng mod_rewrite , hãy xem tài liệu của nó.

Sử dụng định dạng WebP cho hình ảnh của bạn sẽ giảm kích thước file đáng kể. Điều này có thể làm giảm mức sử dụng băng thông và làm cho trang tải nhanh hơn, đặc biệt nếu trang web sử dụng nhiều hình ảnh.

Tags:

Các tin liên quan