Hướng Dẫn Tạo và Cung Cấp Hình Ảnh WebP Để Tăng Tốc Độ Website

1 năm trước

Hướng Dẫn Tạo và Cung Cấp Hình Ảnh WebP Để Tăng Tốc Độ Website

 Giới Thiệu 

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

Định dạng WebP hỗ trợ nén ảnh lossy và lossless, bao gồm cả  ảnh động. Lợi thế chính của nó so với các định dạng ảnh khác được sử dụng trên web là kích thước tệp nhỏ hơn nhiều, giúp các trang web tải nhanh hơn và giảm việc sử dụng băng thông. Sử dụng hình ảnh WebP có thể dẫn đến tăng tốc độ trang đáng kể. Nếu ứng dụng hoặc trang web của bạn đang gặp vấn đề về hiệu suất hoặc gia tăng lưu lượng truy cập, việc chuyển đổi hình ảnh  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 ra các tập lệnh sẽ xem và chuyển đổi các hình ảnh trong một thư mục cụ thể. Cuối cùng, bạn sẽ khám phá hai cách để phục vụ hình ảnh WebP cho khách truy cập.

Yêu Cầu

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

  • Một máy chủ được thiết lập với người dùng sudo không phải gốc. Để thiết lập một máy chủ Ubuntu 16.04, hãy làm theo hướng dẫn cài đặt máy chủ ban đầu của Ubuntu 16.04. Nếu muốn sử dụng CentOS, bạn có thể thiết lập một máy chủ CentOS 7 với thiết lập máy chủ ban đầu với CentOS 7 .

  • Apache được cài đặt trên máy chủ của bạn. Nếu  đang sử dụng Ubuntu, bạn có thể làm theo bước một trong Hướng dẫn cài đặt Linux, Apache, MySQL, PHP (LAMP) stack trên Ubuntu 16.04. Nếu bạn đang sử dụng CentOS, hãy làm theo các bước trong Hướng dẫn cài đặt Linux, Apache, MySQL, PHP (LAMP) trên CentOS 7. Hãy chắc chắn điều chỉnh cài đặt tường lửa  cho phép lưu thông HTTP và HTTPS. 

  • mod_rewrite đã được cài đặt trên máy chủ của bạn . Nếu đang sử dụng Ubuntu,bạn có thể làm theo hướng dẫn trong Cách để Viết lại URL với 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à Soạn Thư mục Hình ảnh


Trong phần này, chúng ta sẽ cài đặt phần mềm để chuyển đổi hình ảnh và tạo ra một thư mục với hình ảnh như là 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 sang định dạng .webp bằng cách gõ: 

On Ubuntu 16.04, you can install cwebp, a utility that compresses images to the .webp format, by typing:

sudo apt-get update
sudo apt-get install webp

               Trên CentOs, gõ :

sudo yum install libwebp-tools

Để tạo thư mục hình ảnh mới gọi là  webp trong nền tảng Web Apache (đặt mặc định ở /var/www/html) gõ :

sudo mkdir /var/www/html/webp

Thay đổi quyền sở hữu của thư mục này sang người dùng không phải gốc sammy :

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

Để kiểm tra các lệnh, bạn có thể tải xuống các ảnh JPEG và PNG miễn phí bằ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 cách gõ:

sudo yum install wget

Tiếp theo, tải về các hình ảnh thử bằng cách sử dụ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 ý Note: 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à Public Domain Dedication .

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

cd /var/www/htm/webp

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

Bước 2 - Nén tập tin hình ảnh với cwebp

Cung cấp hình ảnh .webpcho khách truy cập trang web yêu cầu các phiên bản tệp tin hình ảnh.webp. Trong bước này, bạn sẽ chuyển đổi các ảnh JPEG và PNG sang định dạng .webp bằng cwebp. Cú pháp tổng quát của lệnh trông như sau:

cwebp image.jpg -o image.webp

Tùy chọn -o xác định đường dẫn tới tệp WebP .

Vì vẫn nằm trong thư mục  /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

Thiết lập yếu tố chất lượng  -q đến 100 vẫn giữ 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 hình ảnh  JPEG và WebP bằng lệnh  ls . Tùy chọn  -l sẽ hiển thị dạng danh sách dài , bao gồm kích thước của tệp , và tùy chọn  -h sẽ đảm bảo ls in các kích thước có thể đọc được của con người :

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 lệnh  ls  cho thấy kích thước image1.jpg là 7.4M, trong khi kích thước của image1.webp là 3.9M. Cũng vậy với image2.jpg (16M)và  image2.webp (7M). Những tệp này gần một nửa kích thước ban đầu!

Để lưu toàn bộ các dữ liệu ban đầu 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à lựa chọn tốt nhất để duy trì chất lượng hình ảnh  PNG. Để chuyển đổi ảnh  PNG đã tải xuống ở bước 1, gõ:

cwebp -lossless logo.png -o logo.webp

Câu lệnh sau cho thấy rằng kích thước hình ảnh WebP không bị mất (60K) xấp xỉ một nửa kích thước của ảnh PNG ban đầu (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 thư mục /var/www/html/webp nhỏ hơn JPEG và PNG của chúng khoảng 50%. Trong thực tế, tỷ lệ nén có thể khác nhau tùy thuộc vào các yếu tố nhất định: tỷ lệ nén của hình ảnh ban đầu, định dạng tệp, loại chuyển đổi (lossy hoặc lossless),tỷ lệ 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 các ảnh JPEG và PNG trong một thư mục

Viết một câu lệnh sẽ đơn giản hóa quá trình chuyển đổi bằng cách loại bỏ công việc của chuyển đổi thủ công. Bây giờ chúng ta sẽ viết câu lệnh chuyển đổi tìm các tệp 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 các tệp PNG sang các hình ảnh WebP không bị mất.
Sử dụng nano hoặc trình biên tập yêu thích của bạn, hãy tạo tập lệnh webp-convert.sh trong thư mục chính của người dùng của bạn:

nano ~/webp-convert.sh

Dòng đầu tiên của câu lệnh 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: Câu lệnh cho phép tìm kiếm các tệp trong một thư mục xác định.
  • $1: Tham số vị trí này xác định đường dẫn của thư mục hình ảnh, lấy từ dòng lệnh. Cuối cùng, nó làm cho vị trí của thư mục ít phụ thuộc vào vị trí của câu lệnh.
  • -type f: Tùy chọn này nói find tìm kiếm các tệp tin thường .
  • -iname: Thử nghiệm này phù hợp với các tên tệp dựa trên một mẫu được chỉ định. Thử nghiệm -case-insensitive -iname chỉ find tìm bất kỳ tên tệp 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 tệp phù hợp với phép thử-iname đầu tiên (-iname "*.jpg") hoặc thứ hai (-iname "*.jpeg").
  • (): Các dấu ngoặc quanh các phép thử này, cùng với toán tử -and đảm bảo rằng thử nghiệm đầu tiên (tức là -type f) luôn được thực thi.

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

~/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 lệnh để tìm kiếm và chuyển đổi hình ảnh:

  • bash: Lệnh này sẽ thực hiện một câu lệnh nhỏ mà sẽ làm cho các phiên bản .webp của tập tin nếu nó không tồn tại. Câu lệnh này sẽ được thông qua để bash như là một chuỗi nhờ vào tùy chọn  -c .
  • 'commands': Trình giữ chỗ này là tập lệnh  tạo các phiên bản tệp tin .webp

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

  • Tạo một biến webp_path .
  • Kiểm tra xem phiên bản.webp  của tệp có tồn tại hay không.
  • Tạo các tập tin nếu nó không tồn tại.

Tập lệnh nhỏ hơn trô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 yếu tố trong tập lệnh nhỏ hơn gồm:

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

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

~/webp-convert.sh
# converting JPEG imagesfind $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 các hình ảnh PNG sang WebP, chúng ta sẽ tiếp cận cùng một cách tiếp cận, với hai sự khác biệt: Thứ nhất, kiểu -iname  trong lệnh find sẽ là "*.png". Thứ hai, lệnh chuyển đổi sẽ sử dụng

 -lossless thay vì lựa chọn chất lượng  -q .

Tập lệnh hoàn thành sẽ như sau:

~/webp-convert.sh
#!/bin/bash# converting JPEG imagesfind $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 imagesfind $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 tập tin và thoát khỏi trình soạn thảo.

Tiếp theo, đặt webp-convert.sh vào thực tiễn sử dụng các tệp trong thư mục /var/www/html/webp .Đảm bảo tệp lệnh được thực thi bằng cách chạy lệnh sau :

chmod a+x ~/webp-convert.sh

Chạy tập lệnh trên thư mục hình ảnh:

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

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

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

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

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

Câu lệnh  ls sẽ xác nhận tập lệnh đã chuyển đổi các 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 các hình ảnh WebP trong trang web của bạn, vì bạn sẽ cần một phiên bản làm việc của tất cả các hình ảnh trong đị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 hoá việc chuyển đổi các hình ảnh mới.

Bước 4 - Xem các tệp hình ảnh trong một thư mục

Trong bước này, chúng tôi sẽ tạo một tập lệnh mới để xem thư mục hình ảnh để thay đổi và tự động chuyển đổi các hình ảnh mới được tạo ra. 

Tạo một tập lệnh xem thư mục hình ảnh có thể giải quyết một số vấn đề với  webp-convert.sh như nó được viết. Ví dụ, tập lệnh này sẽ không xác định nếu chúng ta đổi tên một hình ảnh. Nếu chúng ta có một hình ảnh gọi là foo.jpg, chạy webp-convert.sh, đổi tên tệp tin bar.jpg, và sau đó chạy webp-convert.sh  một lần nữa, chúng ta sẽ sao chép các file .webp. (foo.webp và bar.webp) . Để giải quyết vấn đề này, và để tránh chạy script bằng tay, chúng ta sẽ thêm các watcher vào một script khác. Người xem xem các tệp hoặc thư mục cụ thể để thay đổi và chạy lệnh đáp ứng những thay đổi đó.

Lệnh inotifywait sẽ thiết lập người theo dõi trong script. 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 một giao diện đơn giản cho hệ thống con hạt nhân inotify. Để cài đặt nó trên Ubuntu 16.04 gõ:

sudo apt-get install inotify-tools

Với CentOS 7, bộ  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 ra tập lệnh  webp-watchers.sh trong thư mục chính của người dùng của bạn sử dụng  nano:

nano ~/webp-watchers.sh

Dòng đầu tiên của tập lệnh 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 xem những thay đổi đến một thư mục nhất định
  • -q: Tùy chọn này yêu cầu inotifywait nghỉ và không tạo ra nhiều đầu ra
  • -m: Tùy chọn này yêu cầu inotifywait chạy vô thời hạn và không thoát ra sau khi nhận được một sự kiện duy nhất.
  • -r: Tùy chọn này sẽ thiết lập người xem một cách đệ quy, xem một thư mục chỉ định và tất cả các tiểu thư mục của nó.
  • --format: Tùy chọn này nói  inotifywait để theo dõi các thay đổi bằng cách sử dụng tên sự kiện theo sau là đường dẫn tệp tin. Các sự kiện chúng ta muốn giám sát là close_write (kích hoạt khi một tệp được tạo và ghi vào đĩa), moved_from và moved_to  (kích hoạt khi một tập tin được di chuyển),và delete (kích hoạt khi một tập tin bị xóa).
  • $1:  Tham số vị trí này giữ đường dẫn của các tệp đã thay đổi 

Tiếp theo, hãy thêm một lệnh grep  để xác định liệu các tệp của chúng ta có phải là ảnh JPEG hoặc PNG hay không.Tùy chọn   -ioption sẽ nói với grep để bỏ qua trường hợp, -E sẽ chỉ định rằng grep nên sử dụng các biểu thức chính quy mở rộng, và --line-buffered-line-buffered sẽ cho grep để vượt qua các đường kết hợp với một vòng lặp 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

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

...
| whileread operation path; do# commandsdone;

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 :

~/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 \
| whileread operation path; do# commandsdone;

Sau khi 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 ra một file WebP mới nếu một tệp ảnh mới được tạo và chuyển đến thư mục đích.
  • Xóa tệp WebP nếu tệp hình ảnh liên quan đã bị xóa hoặc chuyển từ thư mục đích.

Có ba phần chính bên trong vòng lặp. Một biến gọi là webp_path sẽ giữ đường dẫn đếnphiên bản .webp của ả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 tệp đã được di chuyển hoặc xóa, tập lệnh sẽ kiểm tra nếu phiên bản .webp tồn tại. Nếu có, kịch bản sẽ gỡ bỏ nó bằng rm:

~/webp-watchers.sh
...
if [ -f "$webp_path" ]; then
$(rm -f "$webp_path");
fi;

Đối với các tập tin mới tạo, nén sẽ xảy ra như sau:

  • Nếu tệp khớp là một ảnh PNG, tập lệnh sẽ sử dụng nén không mất dữ liệu.
  • Nếu không, tập lệnh sẽ sử dụng nén nén lossy với tùy chọn -quality .

Hãy thêm các lệnh cwebp sẽ làm việc này cho 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;

Tóm lại , Tệp webp-watchers.sh nhìn như sau:

~/webp-watchers.sh
#!/bin/bashecho"Setting up watches.";# watch for any created, moved, or deleted image filesinotifywait -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 \
| whileread operation path; do webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then# if the file is moved or deletedif [ -f"$webp_path" ]; then $(rm -f"$webp_path");
fi;
elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then# if new file is createdif [ $(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 tập tin. Đừng quên làm cho nó thực thi được:

chmod a+x ~/webp-watchers.sh

Hãy chạy tập lệnh này trên thư mục /var/www/html/webp trong nền, sử dụng & .Chúng ta cũng phải chuyển hướng đầu ra tiêu chuẩn và lỗi tiêu chuẩn tới tệp ~/output.log, để lưu trữ đầu ra ở vị trí sẵn sàng:

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

Lúc này, bạn đã chuyển đổi các tệp JPEG và PNG trong /var/www/html/webp sang định dạng WebP và thiết lập 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. Đã đến 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 của bạn.

Bước 5 - Cung cấp hình ảnh WebP cho khách truy cập sử dụng các yếu tố HTML

Trong bước này, chúng tôi hướng dẫn cách phục vụ các hình ảnh WebP với các yếu tố HTML. Tại thời điểm này, nên có phiên bản .webpcủa mỗi tệp thử nghiệm JPEG và PNG trong thư mục /var/www/html/webp . Bây giờ chúng ta có thể cung cấp chúng để hỗ trợ các trình duyệt sử dụng các phần tử HTML5 () hoặc mod_rewriteApache. 

Phần tử   cho phép bạn đưa hình ảnh trực tiếp vào trang web của mình và để xác định nhiều hơn một nguồn hình ảnh. Nếu trình duyệt của bạn hỗ trợ định dạng WebP, nó sẽ tải về phiên bản .webp của tệp thay vì phiên bản gốc, kết quả là các trang web đang được phục vụ nhanh hơn. Cần lưu ý rằng phần tử  được hỗ trợ tốt trong các trình duyệt hiện đại hỗ trợ định dạng WebP.

Phần tử  là một phần tử có các phần tử 

và  trỏ đến các tệp tin cụ thể. Nếu chúng ta sử dụng 

để trỏ tới một hình ảnh  .webp , trình duyệt sẽ thấy nó có thể xử lý ; nếu không, nó sẽ quay trở lại tệp hình ảnh được chỉ định trong thuộc tính srctrong phần tử .

 

Hãy sử dụng tệp tin logo.png từ thư mục /var/www/html/webp , chúng ta đã chuyển đổi sang logo.webp, làm ví dụ với 

. Chúng ta có thể sử dụng mã HTML sau để hiển thị logo.webp tới 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ử .

 

Tạo tệp HTML nằm ở  /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 để hỗ trợ các trình duyệt sử dụng phần tử :

 

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

 

<picture><sourcesrcset="logo.webp"type="image/webp"><imgsrc="logo.png"alt="Site Logo">picture>

 

Lưu và đóng file.

 

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

 

Bây giờ bạn biết cách để xử lý các hình ảnh .webp trực tiếp từ mã HTML, hãy xem làm thế nào để tự động hoá quá trình này bằng mô-đun mod_rewrite của Apache.

 

Bước 6 - Cung cấp các ảnh WebP Sử dụng mod_rewrite

 

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

 

Đầu tiên, tạo tệp tin .htaccesstrong thư mục /var/www/html/webp bằng lệnh sau:

 

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

 

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

 

/var/www/html/webp/.htaccess

 

RewriteEngineOn# further directives

 

Máy chủ web sẽ thực hiện một số kiểm tra để xác định khi nào để cung cấp hình ảnh .webp cho người dùng. Khi một trình duyệt đưa ra một yêu cầu, nó sẽ bao gồm một tiêu đề để chỉ ra cho máy chủ những gì trình duyệt có khả năng xử lý. Trong trường hợp của WebP, trình duyệt sẽ gửi một tiêu đề Accept  có chứa image/webp. Chúng ta sẽ kiểm tra xem trình duyệt có gửi tiêu đề đó bằng cách sử dụng RewriteCond, trong đó xác định các tiêu chí cần được kết hợp để thực hiệnRewriteRule

 

/var/www/html/webp/.htaccess

 

...RewriteCond%{HTTP_ACCEPT} image/webp

 

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

 

/var/www/html/webp/.htaccess

 

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

 

Bộ điều chỉnh  (?i)  phù hợp vớicase-insensitive.

 

Để kiểm tra xem phiên bản .web có tồn tại ,sử dụng  RewriteCond lần nữa 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 đây được đáp ứng, RewriteRule sẽ chuyển hướng tệp JPEG hoặc PNG yêu cầu đến tệp WebP có liên quan. Lưu ý rằng điều này sẽ chuyển hướng bằng cách sử dụng chỉ báo -R , chứ không phải là viết lại URI. Sự khác biệt giữa viết lại và chuyển hướng là máy chủ sẽ phục vụ URI đã được viết lại mà không báo trình duyệt. Ví dụ, URI sẽ cho thấy rằng phần mở rộng tệp là .png, nhưng nó sẽ thực sự là một tệp .webp. Thêm RewriteRule vào tệp tin:

 

/var/www/html/webp/.htaccess

 

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

 

Tại thời điểm này, phần mod_rewrite trong tập tin .htaccess đã hoàn tất. Nhưng điều gì sẽ xảy ra nếu có một máy chủ lưu trữ đệm trung gian giữa máy chủ và máy khách? Nó có thể cung cấp các phiên bản sai cho người dùng cuối. Đó là lý do tại sao nó là cần thiết để kiểm tra để xem mod_headers có được kích hoạt , để gửi tiêu đề Vary: Accept. Tiêu đề  Vary chỉ ra cách để lưu trữ các máy chủ (như các máy chủ 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 ra dựa trên tiêu đề Accept trong yêu cầu. Yêu cầu với một tiêu đề Accept khác nhau có thể nhận được phản hồi khác. Tiêu đề này rất quan trọng vì nó ngăn ngừa các hình ảnh WebP lưu trữ trong bộ nhớ không được phục vụ cho các trình duyệt không hỗ trợ:

 

/var/www/html/webp/.htaccess

 

...Header append Vary Accept env=REDIRECT_accept

 

Cuối cùng, ở cuối tập tin .htaccess, đặt kiểu MIME của hình ảnh .webp vào image/webp bằng cách sử dụng chỉ thị AddType. Thao tác này sẽ cung cấpcác hình ảnh sử dụng đúng loại MIME:

 

/var/www/html/webp/.htaccess

 

...AddType image/webp .webp

 

Đây là phiên bản cuối cùng của file.htaccess :

 

/var/www/html/webp/.htaccess

 

RewriteEngineOnRewriteCond%{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]  Header append Vary Accept env=REDIRECT_acceptAddType image/webp .webp

 

Lưu ý : Bạn có thể hợp nhất file .htaccess này với file  .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 copy file .htaccess này và paste nó lên đầu file hiện có 

 

Hãy đặt những gì đã làm trong bước này vào thực hành. Nếu bạn đã làm theo hướng dẫn trong các bước trước, bạn nên có các hình ảnh logo.png vàlogo.webp trong /var/www/html/webp. Hãy sử dụng thẻ đơn giản để bao gồm logo.png trong trang web của chúng ta. Tạo tệp HTML mới để kiểm tra thiết lập:

 

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

 

Đăng nhập vào mã trong file :

 

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

 

<imgsrc="logo.png"alt="Site Logo">

 

Lưu và đóng file.

 

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

 

 

 

Kết Luận

 

Trong hướng dẫn này, chúng tôi đã giới thiệu các kỹ thuật cơ bản để làm việc với các hình ảnh WebP. Chúng tôi đã giải thích cách sử dụng cwebp để chuyển đổi tệp, cũng như hai tùy chọn để phục vụ những hình ảnh này cho người dùng: phần tử  của HTML5 và mod_rewritecủa Apache.

 

Sử dụng định dạng WebP cho hình ảnh của bạn sẽ làm giảm kích thước tệp bằng một lượng đáng kể. Điều này có thể làm giảm việ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 của bạn sử dụng rất nhiều hình ảnh.

 

Tìm hiểu thêm những điều thú vị  tại ViCloud Community