Hướng dẫn
Quảng cáo

Tạo hình ảnh Webp bằng PHP và mã HTML

Hướng dẫn viết code PHP để xem các định dạng ảnh JPG, PNG, GIF dưới dạng ảnh WebP

Một cách để tăng tốc độ trang web của bạn là sử dụng hình ảnh có kích thước nhỏ hơn, ngay cả lượng dữ liệu nhỏ cũng có thể tạo ra sự khác biệt rất lớn cho người dùng di động khi kết nối chậm hơn.

Các tài liệu về tốc độ trang của Google khuyên bạn nên chuyển sang định dạng ảnh webp , về cơ bản đây là một định dạng tệp khác, giống như .png hoặc .jpg, ảnh .webp thường có kích thước nhỏ hơn 4-5 lần với sự khác biệt tối thiểu hoặc không có chất lượng.

Chúng ta sẽ tạo một tập lệnh sẽ tự động tạo hình ảnh .webp từ các tệp .jpg / png / gif hiện có trên trang web và chúng tôi sẽ chỉ cho bạn cách tốt nhất để hiển thị những hình ảnh này.

1. Cài đặt các chương trình máy chủ chuyển đổi hình ảnh sang .webp

Trên máy chủ của bạn, bạn có thể chuyển đổi hình ảnh sang webp với cwebp gif2webp

Bạn có thể cài đặt chúng bằng yum:

Ví dụ

yum install libwebp.x86_64
yum install libwebp-tools.x86_64

2. Tạo thư mục chứa ảnh WebP

Tạo một thư mục trống có tên "webp" bên trong thư mục gốc trang web của bạn

3. Chỉnh sửa cấu hình .htaccess

Thêm các dòng mới này vào tệp .htaccess của bạn

Ví dụ

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^webp/(.*)\.webp?$ webp_generator.php?file=$1 [QSA]


Trước tiên, mã htaccess sẽ kiểm tra xem tệp hình ảnh webp đã được tạo chưa, nếu có thì nó sẽ tự động hiển thị, bỏ qua tập lệnh.

4. Viết code PHP tự động tạo hình ảnh

Tạo tệp tự động tạo hình ảnh webp bên trong thư mục /webp
Tạo một tệp có tên webp_generator.php và đặt nó vào thư mục gốc của trang web của bạn, dán mã tiếp theo vào đó.

Nếu bây giờ bạn có hình ảnh /images/landscape.jpg , bạn sẽ có thể truy cập tệp webp có tên /webp/images/landscape.jpg.webp

Mã này khá nhanh, một hình ảnh được tạo sẽ được tải trực tiếp khi bỏ qua tập lệnh vào lần sau

 

Ghi chú: Tập lệnh được tạo để xóa hình ảnh khỏi /webp 30 ngày một lần (xem phần ghi chú), vì vậy KHÔNG lưu trữ hình ảnh vĩnh viễn ở đó mà bạn có thể cần. Chỉ coi thư mục /webp như một thư mục bộ nhớ cache tạm thời

Ví dụ

<?php
// Lấy đường dẫn tuyệt đối
$settings_document_root = dirname(__FILE__);
$file = trim(strip_tags($_GET['file']));
// thoát ra nếu không tìm thấy tệp GỐC
if(!is_file($file)){
  
  // include("404.php");
  echo "không tìm thấy tệp gốc";
  exit;
}
// phát hiện xem tệp có phải là png / jpg / gif hay không, đối với gif, chúng ta sử dụng lệnh gif2webp
$file_extension = strtolower(pathinfo($file, PATHINFO_EXTENSION));
// mkdir -p để tạo các thư mục cha nếu cần (ví dụ: một đường dẫn đầy đủ của các thư mục con)
exec("mkdir -p ".escapeshellarg("webp/".dirname($file)));

// Chuyển đổi png, jpg
if($file_extension=="png" or $file_extension=="jpg"){
  exec("cwebp -q 80 ".escapeshellarg($settings_document_root."/".$file)." -o ".escapeshellarg($settings_document_root."/webp/".$file.".webp"));
}
// Chuyển đổi gif
if($file_extension=="gif"){
  exec("gif2webp -q 80 ".escapeshellarg($settings_document_root."/".$file)." -o ".escapeshellarg($settings_document_root."/webp/".$file.".webp"));
}

// hiển thị cảnh báo nếu tệp không được tạo đúng cách, bạn có thể thay thế điều này bằng chuyển hướng header() đến hình ảnh mặc định
if(!file_exists($settings_document_root."/webp/".$file.".webp")){
  echo "không thể tạo tệp webp ".escapeshellarg("webp/".$file);
  exit;
}

// bảo trì, xóa các tệp webp cũ, sau đó xóa các thư mục trống
exec("find webp/ -type f -mtime +30 -delete");
exec("find webp/ -type d -empty -delete");

// Tiếp tục hiển thị tệp web đã tạo
// ?tim () ở đây để nó không chuyển hướng trở lại chính nó vào lần đầu tiên khi hình ảnh được tạo
// điều đó có thể gây ra vòng lặp vô hạn vì nó lưu vào bộ nhớ cache tệp dưới dạng chuyển hướng trở lại chính nó
header("Location: /webp/".$file.".webp?".time());
exit;
?>

5. Thay đổi mã html của bạn để hiển thị hình ảnh .webp

Không phải tất cả các trình duyệt đều hỗ trợ hình ảnh webp, nhưng mã mẫu này sẽ dự phòng thành jpg hoặc hình ảnh khác nếu trình duyệt của người dùng không hiểu hình ảnh .webp.

Một hình ảnh bình thường giống như <img src="/images/landscape.jpg"> có thể được hiển thị ở định dạng webp bằng mã tiếp theo.

Lưu ý đường dẫn bắt đầu bằng /webp và kết thúc bằng .webp , đó là tập lệnh của chúng ở trên ta tạo ra hình ảnh webp tự động

Ví dụ

<picture>
<source srcset="/webp/images/landscape.jpg.webp" type="image/webp">
<img src="/images/landscape.jpg">
</picture>

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Advertisements