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 :

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:

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_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:

# 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:

#!/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:

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 :

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 read. readsẽ 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 :

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_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

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

...
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:

...
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:

...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:

#!/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ử