Trong thời đại web hiện đại, tối ưu hóa hình ảnh là một phần quan trọng giúp cải thiện hiệu suất trang web. Định dạng WebP được Google phát triển giúp giảm kích thước ảnh mà vẫn giữ chất lượng cao, góp phần tăng tốc độ tải trang và tiết kiệm băng thông. Laravel, với hệ sinh thái phong phú, cung cấp nhiều package hỗ trợ xử lý ảnh hiệu quả. Cùng FPT Polytechnic Hải Phòng tìm hiểu cách tích hợp hai package phổ biến: Spatie Image và Intervention Image để chuyển đổi ảnh sang WebP và tối ưu hóa kích thước ảnh trong Laravel.
Cài đặt Laravel và các Package hỗ trợ
Nếu chưa có dự án Laravel, bạn có thể tạo một dự án mới bằng lệnh:
Sau đó, cài đặt hai package hỗ trợ xử lý ảnh:
Intervention Image giúp resize, crop ảnh, trong khi Spatie Image hỗ trợ chuyển đổi sang WebP.
Cấu trúc lưu trữ ảnh
Trong Laravel, ảnh tải lên thường được lưu trữ trong thư mục storage/app/public/images. Chạy lệnh sau để đảm bảo thư mục này có thể truy cập từ public:
Ngoài ra, hãy đảm bảo thư mục tồn tại bằng lệnh:
Xử lý upload ảnh và chuyển đổi sang WebP
Tạo một controller mới để xử lý upload ảnh:
Sau đó, cập nhật file app/Http/Controllers/ImageController.php như sau:
Giải thích:
- Validate ảnh trước khi xử lý.
- Resize ảnh về tối đa 800px để giảm dung lượng.
- Chuyển đổi ảnh sang WebP với chất lượng 90%.
- Trả về đường dẫn của ảnh WebP đã được xử lý.
Định tuyến API upload ảnh
Thêm route xử lý upload ảnh vào routes/web.php:
Bây giờ, bạn có thể thử nghiệm bằng Postman hoặc cURL:
Nếu thành công, API sẽ trả về đường dẫn ảnh WebP.
Hiển thị ảnh WebP trong View
Trong Laravel Blade template, bạn có thể hiển thị ảnh WebP bằng cách:
Nếu trình duyệt không hỗ trợ WebP, có thể dùng fallback:
Sử dụng Spatie Image và Intervention Image, chúng ta có thể dễ dàng xử lý ảnh, resize và chuyển đổi sang WebP để tối ưu hóa tốc độ tải trang trong Laravel. Việc này giúp tiết kiệm băng thông và cải thiện trải nghiệm người dùng. Hãy triển khai vào dự án của bạn để tận dụng lợi ích từ WebP ngay hôm nay!
Giảng viên Trần Nguyễn Khánh Lâm
Bộ môn Công nghệ thông tin
FPT Polytechnic Hải Phòng
